React V16入门手册（1）

时间 2019-12-04

标签 react v16 入门手册栏目 React 繁體版

原文原文链接

原文medium.freecodecamp.org/the-react-h…html

开始着手学习React，就看到大佬推荐的这篇文章，由于是英文，就尽本身能力翻译一下有错的烦请指正。原文一共220页A4纸，内容有点多，因此会分期更新，见谅前端

介绍

这本React手册遵循二八原则：用20%的时间学习80%的内容node

在本手册里使用了React Hooks，因此你须要使用高于等于 16.7.0-alpha.2 版本的React和ReactDom.react

若是你使用create-react-app初始化项目时，在初始化项目以后运行npm install react@16.7.0-alpha.2 react-dom@16.7.0- alpha.2程序员

我但愿你能在你阅读完本手册后能达到一个目标：学会React的基础ajax

React介绍

先来介绍一下React库npm

什么是React

React是一个旨在简化开发可视化界面的Javascript库。它由Facebook开发，并于2013年向世界发布，并支持着不少被普遍使用的App，包括Facebook和Instagram等无数应用程序。它的主要目标是经过将UI划分为一组组件，使得在任什么时候间点均可以轻松地构建界面及其状态。json

为何React这么流行？

React席卷了整个前端开发领域，为何？浏览器

比其余框架更低的复杂性

在React出道以前，Ember.js和Angular1.X是主流框架。这两种方法在代码上强加了太多的约定，以致于移植现有的应用程序一点都不方便。React选择了很是容易集成到现有项目中的方式，由于Facebook必须实现这一点，这样才能将其引入现有代码库。另外，这两个框架自己包含的内容太多了，而React只选择实现视图层而不是完整的MVC技术栈。bash

完美的时间

当谷歌宣布Angular2.X时，宣称Angular1.X并不能平滑升级到Angular2.X，这两个就像不一样的框架同样，因此想要从Angular1.X升级到Angular2.X就得重构项目。由于这一点，再加上React承诺说能带来执行速度的提高，因此不少程序员就火烧眉毛的尝试。

Facebook的支持

若是一个项目最终成功，获得Facebook的支持显然也会让它受益。Facebook目前对React很是感兴趣，并看到了它开源的价值，这对全部在本身项目中使用React的开发者来讲都是一个巨大的优点。

React学起来容易吗？

虽然我说React要比其余框架简单，可是深刻学习React的话仍是挺有难度的，难的主要缘由是要与React搭配使用的技术，好比Redux,GraphQL等等。

React自己有一个很是小的API，你至少须要理解4个概念才能开始:

Components
JSX
State
Props

上面这些（甚至更多）都会在手册中一一解释

如何安装React

如何在你的电脑上安装React?

React是一个库，因此说安装这个词会有点奇怪，倒不如说“设置”更贴切。在你的app或者网页中有不少方式能够设置React

直接在网页里引入

最简单的方法是直接将React JavaScript文件添加到页面中。当React应用与单个页面上的元素进行交互，而不是实际控制整个导航时，这是最好的选择。

下面的例子中，你在body的最后添加了两个script标签

<html>
...
    <body>
    ...
        <script
        src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js" 
        crossorigin>
        </script>
        <script
        src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
        crossorigin>
        </script>
    </body>
</html>
复制代码

在这里咱们引入两个库（React和React Dom），是为何呢？由于React是百分之的独立于浏览器的，你也能够在浏览器以外使用React（好比用React Native开发移动应用时，也能用React），所以须要React Dom来操做dom。

在引入Javascript文件后，你须要为react，在html里添加script标签，才能使用JSX语法，下面两种方式均可以

//在app.js里写JSX
<script src="app.js"></script>
<!-- or -->

//直接在标签内写JSX
<script>
//my app
</script>

复制代码

若是要使用JSX，你还须要引入Babel

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
复制代码

引入后要在以前写的script标签里添加type="text/babel"才会生效，以下：

<script src="app.js" type="text/babel"></script>

复制代码

如今你能够在你的app.js里写JSX的代码了。

const Button = () => {
return <button>Click me!</button>
}
ReactDOM.render(<Button />, document.getElementById('root'))

复制代码

演示代码地址： glitch.com/edit/#!/rea…

用官方脚手架create-react-app（推荐）

create-react-app旨在让你能快速构建一个React项目，任何React应用均可以使用create-react-app来生成一个单页页面。

首先你须要安装npm和node （地址：nodejs.org/en/）就很少说了而后执行

npx create-react-app todolist
复制代码

npx是npm 5.2以后才有的工具，npx会下载create-react-app，而后解压安装，而后执行create-react-app todolist,而后再把create-react-app从系统中删除。这样你就永远可以使用最新的create-react-app，不会在电脑里存放着过期的create-react-app。

执行完以后你能看到下面的界面

create-react-app会在文件夹内建立相应的文件结构，文件名就是todolist（本身取的） package.json也一样生成了，只须要安装指示，进入相应的文件夹，执行npm start就能够启动项目了

如图

打开浏览器进入http://localhost:3000/就能看到最开始的界面了。

除了 npm start , create-react-app这两个命令以外，还有下面一些命令

npm run build ：要在构建文件夹中构建准备部署到服务器的React应用程序文件
npm test：运行Jest测试包
npm eject ：弹出配置文件什么时候用npm eject？create-react-app已经作了不少工做了，但你想要完成更多的工做时，就要弹出配置文件来本身配置。

由于create-react-app 是为了知足大部分人的需求和有限的配置，当你有一些独特的需求时，就须要本身来配置一些内容了。

当你使用npm eject时，你的页面就不会自动更新了，但你能够在Babel和Webpack配置中得到更大的灵活性。

eject时是不可逆的，当你执行后你会得到两个新的文件夹，配置和脚本。你就能够开始自由的编辑他们了。

下节预告：下节咱们将学习在学习React以前须要了解的JS语法及一些知识

1. React V16入门手册（2）
2. React入门(1)
3. 1 react 入门
4. react入门（1）
5. React（1）之——React入门
6. React入门---react脚手架
7. RocketMQ入门手册
8. bitbucket入门手册
9. dpdk入门手册
10. mongoDB 入门手册
更多相关文章...
• Memcached入门教程 - NoSQL教程
• XQuery 参考手册 - XQuery 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用