# React简介
React.js是由Facebook在2013年5月推出的一款开源前端框架，它带来了一种全新的函数式编程风格。目前，最新的React.js版本为React v16.12.0。
# React开发环境的准备
在学习React语法之前，需要先搭建基础的React开发环境。我们有两种使用React.js的方式：一种是使用script标签引入.js文件来引入React，另外一种是使用脚手架来引入React。在这里，我们现在使用脚手架来使用React。
脚手架
脚手架实际上是前端开发过程中的一个辅助工具，它会自动地帮助我们完成项目的构建，以一定的方式实现js文件的相互引用，以便我们更方便地对项目进行管理。
在初学React的时候，推荐使用React官方提供的脚手架-create-react-app。当然，在使用create-react-app之前，需要安装Node和npm。一般情况下，我们应当使用node的长期稳定版本(LTS)。
由于国内使用npm不太方便，推荐使用淘宝npm镜像代替官方的npm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后就可以使用cnpm安装脚手架create-react-app`了。
cnpm install -g create-react-app
# 创建todolist示例项目
本节我们可以使用脚手架创建一个React项目了，其遵循以下模式：
create-react-app my-app
其中，my-app代表React项目名。选择一个目录，创建一个todolist项目。
create-react-app todolist
创建好项目以后，我们切换到todolist项目根目录下，使用yarn start命令启动项目。这时，项目将会访问http://localhost:3000页面。
至此，我们搭建好了React开发的所需的基础环境。
# React工程目录文件简介
上面，我们已经通过脚手架顺利创建了todolist示例项目。
接下来，我们分析一下这个项目各部分的文件和目录。
yarn.lock文件：这个文件定义了项目依赖的安装包版本号，一般情况下，不需要修改。README.md文件：这是项目的说明文件，我们可以根据自己的想法重新编写。package.json文件：这个文件定义了项目的一些基本信息，如项目名称，项目的第三方依赖以及项目使用到的一些指令。.gitignore文件：当我们使用git版本管理时，在这个文件里可以定义需要忽略的文件。node_modules文件夹：这里存放的是项目依赖的第三方包。public文件夹：这里存放的是项目用到的公共文件。其中，index.html文件是项目首页的html模板src文件夹：这里存放的是项目的源代码文件，项目的入口文件index.js也在其中。
# 了解React组件的概念
在这一节，我们来了解一下React中的组件，实际上，组件就是页面中的一部分。
如上图所示，左侧是一个完整的网页，右侧是左侧对应的组件图。对于一个网页来说，我们可以把它看成是好几个小的部分组成的集合，每个部分对应一个组件。例如，网页标题部分对应一个标题组件，搜索部分对应一个搜索组件。而搜索组件又可看成一个输入组件和一个按钮组件的集合。因此，我们可以将网页看成是多个组件的集合。
# 在React中定义组件
在这一节，我们了解一下在React中如何定义一个组件。首先，我们来看一下todolist项目src目录下的项目入口文件index.js。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
这个文件的第一行代码import App from './App';表示从文件App.js中加载一个App组件。为了进一步了解组件App是如何被定义的，我们查看一下App.js文件中的内容。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
在老版本的create-react-app创建的项目中可能会如下面一样定义组件，以后都会使用这种写法来定义组件。当然，上面一种定义方式效率更高一点。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
可以看到在这个文件中，我们定义了一个App组件。
- 首先，我们定义了一个类
App,这个类继承了Component类，当一个类继承这个Component类时，这个类就是一个React组件了。 - 接着，在这个组件类中，我们定义了一个
render方法，这个方法将返回一段html内容，这段内容代表了页面的一部分。这个方法返回什么，组件就展示什么内容。 - 然后，为了能够在外部引用这个组件，我们通过
export default App;代码将其导出。
因此，我们如果需要定义一个组件就需要创建一个继承Component的类，并定义一个render方法返回要展示的html内容即可。
为了演示需要，我们删除render方法内多余的内容，只返回一串简单的文本内容hello world !
import React from 'react';
function App() {
return (
<div>
hello world !
</div>
);
}
export default App;
运行项目，网页显示一串简单的文本内容hello world !，这正是刚才我们在组件方法里返回的内容。其实这种写法属于React中被称为JSX的语法。通过JSX语法，我们可以在js代码中返回html内容。
# 了解文件index.js
通过上节的学习，我们了解了如何定义组件。回过头来，继续关注项目的入口文件index.js。
文件第一行代码为import React from 'react';，从整个文件来看，我们并未使用React 。若我们将这行代码删除，当我们再次运行项目时，将会导致代码编译失败。究其原因，问题出在ReactDOM.render(<App />, document.getElementById('root'));代码上。整段代码表示将App组件挂载到一个id等于root的DOM节点下，而我们又在这段代码中以<App />标签的方式使用了App组件，当我们以标签的方式使用组件时，这其实就表示我们使用了React的JSX语法，若要使用JSX语法，则必须在文件中编写import React from 'react';。
虽然代码将组件挂载到一个id等于root的DOM节点，然而我们却并未自定义这个DOM节点，令人疑惑的是，程序却可以正常运行。实际上，root节点位于public目录下的模板文件index.html中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>TodoList</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
因此，我们不必怀疑程序为什么能够正常运行。
通过以上章节，我们初步了解了React中定义和使用组件的方法，下一章节我们将会以现有的todolist项目为基础做一个简单的示例项目。