React介绍
React是一个声明式的，高效的，并且灵活的用于构建 用户界面 的 JavaScript 库。学习一个新的东西建议多看文档 英文文档,英文不好的同学可以看 中文文档（缺点是跟新不同步）。
React使用
React 使用有两种方式：
- 在已有项目中添加React。
- 添加一个DOM容器到HTML中
这个id 就是将来我们React 组件挂载的位置，你可以创建多个div容器，但React 都需要挂载在对应id容器中。<!--- existing HTML ---> <div id="root"></div> <!--- existing HTML ---> - 添加Script标签
前两个标签加载React，第三个加载你的组件代码<!-- ... 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组件，先大概了解一下，我们后续再详细讲解React组件的写法。底部的两行代码是一定要有的不然放不到HTML中。'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 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目录介绍
根据这张目录图来给大家介绍一下一次是什么意思。
node_modules 这个做前端的都应该知道是npm下载的依赖包。
-
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">这一行代码一并删除。
-
src 我们开发的主要目录，业务逻辑，页面等等都放在这个文件夹下面，我们在这里找不到 .html 后缀的文件是因为React 说了一切都是 JS。
-
App 这个包括 App.js, App.css 这个就是我们写的React组件了，App.js 文件就是组件的内容。大家可以打开浏览一下。需要注意一点是在文件最后的
export default App组件导出，方便我们在其他地方引用。
-
App 这个包括 App.js, App.css 这个就是我们写的React组件了，App.js 文件就是组件的内容。大家可以打开浏览一下。需要注意一点是在文件最后的
这里的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的内容，有兴趣的同学可以自行去学习。
.gitignore 文件是git上传到远程仓库的时候的忽略文件，里面可以配置你不想提交到远程仓库的文件名称。不了解的同学可以去学习阮一峰老师的Git教程。
package.json 这个大家就很熟悉了，里面都是我们安装的依赖，当然也可以在里面配置环境代理或者更改访问端口。
README.md 这个就是关于当前项目的介绍文档了，里面的内容你可以都删除掉，写你自己的文档介绍，当然，要遵循Markdown的语法规范。
yarn.lock 这个是yarn安装的包的依赖，因为create-react-app默认是用yarn安装，所有会有这个文件生成。
第一个React 页面
现在，我们在命令行里找到当前项目目录，运行 npm start 或者 yarn start 会自动打开浏览器访问 loaclhost:3000 这个页面。
我们到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 组件啦。
这里还有一个知识点就是在JSX中添加注释，有两种方式。一是
{!<-- 代码注释 -->}就是JSX的解析语法{} 加 HTML的代码注释。二是下面这种单行注释。但是注意一定要回车换行，原因是 \\ 会把后面的内容注释掉，程序就错误了。
{
// 这样来添加注释
}
结束语
通过上面的一系列操作，我们大概知道了React 的一些基本情况，并且简单修改App.js 文件来生成我们自己的Hello World！。你是否有收获呢？
接下来我们会深入讲一些React的内容，请持续关注把。
如果喜欢请多多关注 或点👍。 如有不足还请指教。
