一、react简介

• 由faceBook在2013年5月开源推出
  全新的函数式编程风格
• React 16版本之后称之为 React Fiber

这么称是因为在React 16版本之后，在底层在事件循环中加入了优先级这样的概念，可以在循环的碎片事件可以执行高优先级的交互。

React 相对于vue 更灵活，做复杂度高的项目更加自如。

二、React开发环境搭建

1、安装脚手架工具（全局安装）

npm install -g create-react-app

2、在指定目录创建react工程（项目名称不能有大写字母）

create-react-app my-app

3、进入到项目目录，启动项目

cd my-app
npm start

异常问题解决
创建项目时往往会很慢，解决方案是换源。正常可以使用cnpm代替npm来解决下载资源慢的问题。create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。

npm config set registry https://registry.npm.taobao.org

-- 配置后可通过下面方式来验证是否成功
npm config get registry
-- 或npm info express

三、工程目录文件简介

node_moduless       // 所有依赖包
public
  favicon.ico       // 网站图标
  index.html        // 页面模板(必须，不可删)
  manifest.json   
src                 // 项目开发源码
  App.css           // 默认生成的组件样式文件(可删除)
  App.js            // 默认生成的组件js(可删除)
  index.js          // js入口文件(必须，不可删)
  registerServiceWorker.js
.gitgnore           // 不上传git的文件说明
package.json        // webpack说明
README.md           // 项目说明文件
yarn.lock

manifest.json用于配合serviceWorker实现PWA，可以把webapp缓存下来(在https协议的服务器上)，在手机桌面添加快捷方式从而可以直接以类似本地app的方式进行调用。

PWA全称Progressive Web App，即渐进式WEB应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

解决了哪些问题？

• 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
• 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
• 实现了消息推送

它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生 App。

PWA参考文章

四、React中的组件

下面是一个简单组件的两种写法

import React from 'react';
// class组件
class App extends React.Component {
  render() {
    return (
      <div>
      hello world!
      </div>
    )
  }
}

// 函数组件
function App(props) {
  return (
    <div>
    hello world!
    </div>
  )
}

export default App;

下面是精简后的代码(React.Component => Component)

import React, {Component} from 'react';

// import {Component} from 'react'
// // 等价于
// import React from 'react'
// const Component = React.Component

class App extends Component {
  render() {
    return <div>hello world!</div>
  }
}

export default App;

在主入口文件(index.js)中把组件挂载到模板的DOM节点之上

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

1. 如果你在项目中用了JSX语法 你就一定要引用React，不然会编译失败。在react中 render函数中的标签也是JSX语法。
2. ReactDOM是一个第三方模块，它有个方法render帮我们把组件app 挂载到页面的某个节点下。
3. 总之，就是通过React对JSX语法进行编译，然后通过ReactDOM.render将编译好的组件挂载到相应的DOM节点上。

五、React中最基础的JSX语法

JSX语法：React中在JavaScript中写HTML
React组件名首字母必须大写，首字母小写一般是HTML标签。