一、准备工作：环境配置；快速构建应用

首先安装npm及nodejs；

npm模块的安装、删除和更新 ---命令行

https://blog.csdn.net/zeping891103/article/details/84400954

然后使用react脚手架create-react-app快速构建应用：

（一）安装

npm install -g create-react-app

（二）创建react应用

全局命令来创建react项目
create-react-app react-cli-demo

（三）执行npm run eject命令暴露项目的配置--单向操作不可逆，可以自由配置项目所需的依赖，不使用的版本零配置即可开发。

二、认识 React

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍：

class  ShoppingList  extends  React.Component  {  
    render()  { 
         return  (  
              <div className="shopping-list">  
                  <h1>Shopping List for {this.props.name}</h1>  
                  <ul>  
                      <li>Instagram</li>  
                      <li>WhatsApp</li>  
                      <li>Oculus</li>  
                    </ul>  
              </div>  
            );  
        }  
}

ShoppingList 是一个 React 组件类。一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render方法返回需要展示在屏幕上的视图的层次结构。

React 使用了一种名为 “JSX” 的特殊语法。

JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')。上述的代码等同于：

React.createElement(
  "div", 
  {className: "shopping-list"}, 
  React.createElement("h1", null, "Shopping List for ", props.name),
  React.createElement("ul", null, React.createElement("li", null, "Instagram"), 
  React.createElement("li", null, "WhatsApp"), 
  React.createElement("li", null, "Oculus"))
);