React.js初探

React简介

react.js文档

中文文档较为滞后，建议阅读英文文档。

---

与vue.js对比

• vue.js使用的api更多所以更简单，但正是因为react.js使用的api少，所以他的灵活度更大，更适合用于一些复杂度高的项目。
• 一些面向用户端，复杂度不高的项目使用vue.js会更加简单。

---

React开发环境准备

脚手架工具

• 常见的脚手架工具有：webpack、grunt，还有我们接下来使用的react.js官方提供的Create-react-app。
• 我们可以使用脚手架工具去更加简单的编写代码，但是编写的代码不能直接运行，需要通过脚手架工具进行编译以后才能运行。

---

工程目录文件简介

总结：
重要的就是：
public下的index.html文件，负责页面上显示的html内容。
src下的index.js文件,整个react项目的入口，他会引入一个APP.js文件的APP组件，该组件负责显示出页面上的组件内容。

重启项目

具体可参考笔记“React官方脚手架工具的使用”。

---

根目录下

yarn.lock文件

放置一些依赖配置，一般不要动。

README.md文件

关于项目的说明，可以删掉再使用markdown语法进行书写。

package.json文件

是一个node的包文件，他可以让项目变成一个node的包。** 一般不会去动，是脚手架自动生成的文件。**
主要是node里面的内容，包含了：项目名字，版本，依赖的包、可供调用的指令。

我们之所以可以在cmd中通过npm start来启动项目，实际上就是通过npm start启动了下图中红框框出的指令，它会帮我们通过react-scripts去启动服务器：

.gitignore文件

使用git管理代码时，如果有文件不想上传就可以放在这。

todolist文件夹下

node_ modules文件夹

放一些这个项目依赖的第三方包，不要动他。

public文件夹下

favicon.ico

index.html文件

项目首页的HTML模板，将注释删掉后会简洁很多，<title>标签决定：

<noscript>标签是在网页禁掉script的情况下，用来提示用户应该在浏览器上开启script的适配项或者说允许网页去解析JavaScript。这是一段容错的代码。

manifest.json文件

在下面的index.js文件中我们提到使用registerServiceWorker可以在没有网络时网页也可以当做app来使用。
我们可以将这个网页在桌面上建一个快捷方式，**manifest.json文件正是定义这个app的名字、图标、网址跳转到哪儿、主题颜色等的地方**。
（不使用manifest.json时该文件可删除，同时index.html中的manifest引用代码也可删除。）

src文件夹下

放置项目所有的源代码，所有代码的入口在index.js文件里。

index.js文件

可以注意到import ./index.css,这是因为react讲究 all in js ，所以css和js也就不分离了。

文件中有一个**registerServiceWorker，它主要用于帮助我们借助网页去写手机APP应用，使用了它即使断网了，二次访问时也能加载出页面**。那么没有网络时该网页也可以当做app使用。因为registerServiceWorker会帮助你将页面存储在我们的浏览器内。
（后来新建的项目是如下代码，可查一下是否同一个意思：

import * as serviceWorker from './serviceWorker';
serviceWorker.unregister();

如不需使用可删除代码后同样可以删去src下的serviceWorker.js）

import App from './App';以及ReactDOM.render(<App />, document.getElementById('root'));则是在index页面上引入并渲染以显示App组件。

App.js文件

App.js就是定义App组件的地方。

import React, { Component } from 'react';

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

export default App;

App.test.js文件

自动化测试文件，还不涉及自动化测试时为使项目简洁可删去该文件。

---