React学习(一) 初识React

React介绍

React是一个声明式的，高效的，并且灵活的用于构建 用户界面 的 JavaScript 库。学习一个新的东西建议多看文档 英文文档,英文不好的同学可以看 中文文档（缺点是跟新不同步）。

React使用

React 使用有两种方式：

1. 在已有项目中添加React。

• 添加一个DOM容器到HTML中

  <!--- existing HTML --->
  <div id="root"></div>
  <!--- existing HTML --->
  

  这个id 就是将来我们React 组件挂载的位置，你可以创建多个div容器，但React 都需要挂载在对应id容器中。
• 添加Script标签

    <!-- ... existing HTML ... -->
  
    <!-- 加载 React. -->
    <!-- 注意：部署时，将"development.js"替换为"production.min.js"。 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
    <!-- 加载我们 React 组件。 -->
    <script src="root.js"></script>
  
  </body>
  

  前两个标签加载React，第三个加载你的组件代码
• 创建自己的组件

    'use strict';
    const e = React.createElement;
  
    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { liked: false };
      }
  
    render() {
     if (this.state.liked) {
       return 'You liked this.';
     }
    return e(
      'button',
       { onClick: () => this.setState({ liked: true }) },
       'Like'
      );
    }
  }
  const domContainer = document.querySelector('#like_button_container');
  ReactDOM.render(e(LikeButton), domContainer);
  

  这面就是我们自己的react组件，先大概了解一下，我们后续再详细讲解React组件的写法。底部的两行代码是一定要有的不然放不到HTML中。

2. 创建一个新的React App(Create React App)
   Create React APP 是学习React最舒适的环境，并且是构建新的单页 应用程序的最佳方式。
   你需要在你的机器上安装 Node >= 6 和 npm >= 5.2。 要创建项目，请运行：

     npx create-react-app [项目名称] 
     cd [项目目录]
     npm start 或者 yarn start
   

注意npx 不是拼写错误，是npm 5.2+ 附带的包运行工具。

React目录介绍

react-dir.png

根据这张目录图来给大家介绍一下一次是什么意思。

1. node_modules 这个做前端的都应该知道是npm下载的依赖包。

2. public 这个是公共目录，里面放一些资源文件后者自己下载的第三方内容

   • favicon.ico 这个文件是浏览器的左上角图标，你也可以换成你自己的图标，但是名字必须保持一致。
   • index.html 这个就是我们的入口文件啦，以后上线的也是这个文件。里面的
     <div id="root"></div> 这个就和我们上面讲的一样React容器。其他的内容都是HTML代码，但是有一点 <link rel="manifest" href="%PUBLIC_URL%/manifest.json">这一行代码我们需要注意。下面我们来讲解。
   • mainifest.json 这个如果不了解PWA的同学可能不是很清楚。这个是实现PWA的配置文件，可以在桌面生成图标，方便下次访问，也可以在断网的情况下继续浏览之前浏览的内容。在我们刚开始学习的时候这个文件可以忽略或者删除，当然删除的时候需要连同index.html中的 <link rel="manifest" href="%PUBLIC_URL%/manifest.json">这一行代码一并删除。

3. src 我们开发的主要目录，业务逻辑，页面等等都放在这个文件夹下面，我们在这里找不到 .html 后缀的文件是因为React 说了一切都是 JS。

   • App 这个包括 App.js, App.css 这个就是我们写的React组件了，App.js 文件就是组件的内容。大家可以打开浏览一下。需要注意一点是在文件最后的 export default App 组件导出，方便我们在其他地方引用。

这里的render 函数 和我们上面的直接应用的写法不一样，原因是上面的原生写法React.createElement 方法，而我们这个目录中的是JSX写法。这里有个转化就是涉及到我们之后的内容虚拟DOM，我们之后在讲。

这里有一个App.test.js文件是做测试的，看过App.js之后你会发现我们写的代码是函数式编程，这个很方便自动化测试。直接调用方法，查看返回结果和预期结果是否一致就可以验证函数是否正确。当然 在你学习的时候是不需要的，你可以直接删除此文件。

• index 这个就是整个项目的入口了，打开后你会发现很简单除了引入React 和 ReactDom，导入App组件，引入css文件之外 就一行代码ReactDOM.render(<App />, document.getElementById('root')); 作用就是把App组件挂载到我们的index.html中的root 容器中。这样一个React app的项目就可以运行起来了。

有人可能发现我漏掉了 import * as serviceWorker from './serviceWorker'; 和 serviceWorker.unregister(); 这两行，他们的作用依旧是PWA的内容，有兴趣的同学可以自行去学习。

4. .gitignore 文件是git上传到远程仓库的时候的忽略文件，里面可以配置你不想提交到远程仓库的文件名称。不了解的同学可以去学习阮一峰老师的Git教程。

5. package.json 这个大家就很熟悉了，里面都是我们安装的依赖，当然也可以在里面配置环境代理或者更改访问端口。

6. README.md 这个就是关于当前项目的介绍文档了，里面的内容你可以都删除掉，写你自己的文档介绍，当然，要遵循Markdown的语法规范。

7. yarn.lock 这个是yarn安装的包的依赖，因为create-react-app默认是用yarn安装，所有会有这个文件生成。

第一个React 页面

现在，我们在命令行里找到当前项目目录，运行 npm start 或者 yarn start 会自动打开浏览器访问 loaclhost:3000 这个页面。

react-page.png
我们到App.js 里添加Hello world,

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          {<!-- 添加Hello World!-->}
          <h1>Hello World!</h1>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    )
  }

上面的代码中添加Hello World,然后保存，我们就完成自己的第一个React 组件啦。

react-page2.png

这里还有一个知识点就是在JSX中添加注释，有两种方式。一是 {!<-- 代码注释 -->} 就是JSX的解析语法{} 加 HTML的代码注释。二是下面这种单行注释。但是注意一定要回车换行，原因是 \\ 会把后面的内容注释掉，程序就错误了。

{
// 这样来添加注释 
}

结束语

通过上面的一系列操作，我们大概知道了React 的一些基本情况，并且简单修改App.js 文件来生成我们自己的Hello World！。你是否有收获呢？

接下来我们会深入讲一些React的内容，请持续关注把。

如果喜欢请多多关注 或点👍。 如有不足还请指教。