一、React介绍

1. React的起源

React 起源于 Facebook 的内部项目。当时，该公司有架设Instagram网站的需求，于是调研了市场上所有 JavaScript MVC 框架，结果都不是很满意。因此，他们决定自己开发一套前端开发框架，这就是React的来历。2013年5月，React正式开源。

2. React VS 传统MVC

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式。React 是一个构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是一个组件，这些组件之间可以组合、嵌套，就成了我们的页面。

3. React的特性

声明式设计：采用声明范式，轻松描述应用。
高性能：通过虚拟DOM最大限度的减少与DOM的交互过程。
灵活性：可以与已知的框架或者库很好地配合。
使用JSX：扩展JavaScript语法，方便了开发，但增加了学习难度。
组件化：通过组件大大提高了代码的可复用性。
单向数据流：实现了单向响应的数据流，减少了重复代码，比传统的绑定方式更加简单。

简单解释一下虚拟DOM。在传统页面的开发模式中，每次需要更新页面时，都需要手动操作DOM树进行更新，很消耗资源。而在React中，将真实DOM树转换为JavaScript对象树，更新时只需要更新变化的部分即可。

二、安装React

通过npm全局安装create-react-app：

npm install -g create-react-app

三、创建helloworld项目

create-react-app your-app 
# 注意命名方式

这需要等待一段时间，这个过程实际上会安装三个东西:

react: react的顶级库
react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用
react-dom
react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

    npm start
        Starts the development server.
        
    npm run build
        Bundles the app into static files for production.

    npm test
        Starts the test runner.
        
    npm run eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you can’t go back!
        
We suggest that you begin by typing:
    cd your-app
    npm start
    
Happy hacking!

根据上面的提示，通过 cd your-app 命令进入目录并运行 npm start 即可运行项目。浏览器会自动打开首页~

React入门(1) ｜ 青训营笔记