当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。View Source on GitHub。

 

#头条创作挑战赛#本文同步本人掘金平台的原创翻译：https://juejin.cn/post/6844903823085944846当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。

我看到了看起来一堆HTML和CSS的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？相反，我只专注于学习原始的JavaScript，并在需要的时候使用jQuery经过几次失败的React入门尝试之后，我终于开始了解它了，我开始明白为什么我可能想使用React而不是原始的JS或jQuery。

我试图将自己学到的内容浓缩成一个很好的介绍，以便与你分享，下面就是~预备知识在开始学习React之前，你应该事先了解一些事情例如，如果你之前从没接触过JavaScript或者DOM，那么在解决React之前，你要更加熟悉它们。

下面是我认为学习React的预备知识：熟悉 HTML & CSS的基础知识JavaScript 和编程的基础知识对DOM有基本了解熟悉 ES6 语法和特性全局安装了Node.js 和 npm目标了解基本的React概念和相关术语，例如Babel，Webpack，JSX，组件，属性，状态和生命周期

通过构建一个非常简单的React应用程序，以演示上面的概念下面是最终的相关源代码和示例View Source on GitHubView DemoReact是什么？React是一个JavaScript库 - 最受欢迎的库之一，在GitHub上超过100,000星星。

React不是一个框架（不像Angular，定位是框架）React是Facebook的开源项目React用于在前端构建用户界面UIReact是MVC (Model View Controller)应用的View层。

React的最重要的方面之一是可以创建类似于自定义、可复用的HTML元素的组件，以快速有效地构建用户界面React还使用状态state和属性props来简化数据的存储和处理方式我们将在本文中介绍这些内容及其更多的内容，我们来开始吧。

安装有几种安装React的方法，我将向你展示两种，以便你更好地了解它地工作方式静态HTML文件第一种方法不是安装React的流行方法，也不是我们本教程其余部分的工作方式，但是如果你接触过jQuery之类的库，这将很熟悉并易于理解。

如果你不熟悉Webpack，Babel和Node.js，那这将是种恐怖的入门方式让我们开始创建一个基本的index.html文件我们将在头部head中加载三个CDN资源 - React，DOM和Babel。

我们还将创建一个id为root的div，最后，我们将创建一个脚本script标签，你自定义的代码将存在于该标签中# index.html

charset="utf-8" />Hello React!

>

="https://unpkg.com/babel-standalone@6.26.0/babel.js">

type="text/babel">// React code will go here 复制代码在编写本文的时，我加载的库是稳定版本的React - React顶级API。

React DOM - 添加特定于DOM的方法Babel - JavaScript编辑器，使我们可以在旧的浏览器中使用ES6+我们应用程序的入口点是root div元素，该元素按惯例命名你还会注意到text / babel的脚本类型，这是使用Babel所必需的。

现在，让我们编写React的第一个模块代码我们将使用ES6类来创建一个名为App的React组件# index.htmlclassAppextendsReact.Component{ //... } 复制代码

现在，我们将添加render()方法，这是类组件中唯一需要的方法，用于渲染DOM节点# index.htmlclassAppextendsReact.Component{ render() { 。

return ( //... ); } } 复制代码在return内部，我们将编写简单的看起来像HTML元素的内容请注意，我们不在此处返回字符串，因此请勿在元素周围使用引号。

这称为JSX，我们将很快对其进行详细了解# index.htmlclassAppextendsReact.Component { render() { return

Hello world!

} } 复制代码

最后，我们将使用React DOM的render()方法将我们创建的App类渲染到HTML的root容器div中# index.html ReactDOM.render(, document。

.getElementById(root)) 复制代码下面是index.html中完整的代码# index.html

/>Hello React!

>

>classAppextendsReact.Component{ render() {

return

Hello world!

} } ReactDOM.render(, document.getElementById(root))

复制代码现在，如果你在浏览器上查看index.html，将看到我们创建的呈现给DOM的h1标签。

太棒了！现在你完成了这一步，你可以看到React并没有那么让人着迷只是一些JavaScript帮助教程库，我们将其加载到HTML中我们出于演示目的完成了此操作，但是从这里开始，我们将使用另一种方式：Create React App。

创建React App我刚刚使用的是将JavaScript库加载到静态HTML页面中并动态渲染React和Babel的方法不是很有效，并很难维护幸运的是，Facebook创建了Create React App，该环境预先配置了构建React所需要的一切。

它将创建一个实时开发服务器，使用webpack自动编译React，JSX和ES6，自动为CSS文件加前缀，并使用ESLint测试和警告代码中的错误要设置create-react-app，你要在终端运行以下代码，该代码位于你希望项目所在的目录。

请确保你安装了5.2以上版本的Node.jsnpx create-react-app react-tutorial 复制代码安装完成之后，移至新创建的目录并启动项目cdreact-tutorialnpm。

start复制代码运行此命令之后，新的React应用程序将在浏览器的localhost:3000弹出一个新窗口。

如果你查看项目结构，将会看到/public和/src目录，以及常规的node_modules，.gitignore，README.md和package.json在/public中，我们的重要文件是index.html，它与我们之前制作的静态index.html文件非常类似 - 只是一个root div。

这次，没有库或脚本被加载/src目录将包含我们所有的React代码要查看环境如何自动编译和更新你的React代码，请在/src/App.js中查找如下所示的行：To get started, edit

`src/App.js` and save to reload. 复制代码然后将其替换为其他文本保存文件后，你会注意到localhost:3000页面会自动编译并刷新数据继续并删除/src目录中的所有文件，我们将创建自己的样板文件，而不至于臃肿。

我们只保留index.css和index.js对于index.css，我只是将原始Primitive CSS 的内容复制并粘贴到文件中如果需要，可以使用Bootstrap或所需的任何CSS框架，或者什么都不用。

我只是觉得更容易使用而已在index.js中，我引入了React，ReactDOM和CSS文件# src/index.jsimport React fromreactimport ReactDOM from

react-domimport./index.css 复制代码让我们再次创建我们的App组件以前，我们只有一个

，但是现在我还要添加一个带有类的div元素你会注意到，我们使用的是className而不是class。

这是我们的第一个提示，此处编写的代码是JavaScript，而不是HTML# src/index.jsclassAppextendsComponent { render() { return

(

Hello, React!

) } } 复制代码最后，我们像之前一样渲染App到根节点中。

# src/index.js ReactDOM.render(, document.getElementById(root)) 复制代码下面是完整的index.js代码这次，我们将Component加载为React的属性，因此我们不再需要扩展React.Component。

# src/index.jsimport React, { Component } fromreactimport ReactDOM fromreact-domimport./index.cssclass

AppextendsComponent { render() { return (

Hello, React!

) } } ReactDOM.render(,

document.getElementById(root)) 复制代码如果你回到localhost:3000页面，像之前那样，你将会看到Hello, React!字样现在，我们已经开始了解React应用程序了。

React开发者工具有一个名为React Developer Tools的扩展工具，可以使你在使用React时的工作更加轻松在你喜欢使用的任何浏览器中下载 React DevTools for Chrome。

安装后，当你打开DevTools时，你将看到React的标签单击它，你将能够在编写组件时检查它们你仍然可以转到elements选项卡以查看实际的DOM输出现在看来似乎没什么大不了的，但是随着应用程序变得越来越复杂，使用它的必要性将越来越明显。

现在，我们拥有了实际开始使用React所需的所有工具和安装设置JSX: JavaScript + XML正如你所见，我们在React代码中一直使用看起来像HTML的东西，但是它并不是完全的HTML这是JSX

，代表JavaScript XML使用JSX，我们可以编写类似HTML的内容，也可以创建和使用自己的类似XML的标签下面是JSX赋值给变量的样子# JSXconst heading =

复制代码编写React并非必须使用JSX它在后台运行createElement，它使用标签，包含属性的对象和子组件并呈现相同的信息下面的代码具有和上面使用JSX语法相同的输出。

# No JSXconst heading = React.createElement(h1, { className: site-heading }, Hello, React!) 复制代码JSX实际上更接近JavaScript，而不是HTML，因此在编写时需要注意一些关键区别。

因为class被作为JavaScript中的保留关键字，className用来替代class添加CSS类JSX中的属性和方法是驼峰式的 - onclick将变为onClick自动闭合标签必须以斜杆结尾 - 例如。

JavaScript表达式也可以使用大括号将包括变量，函数和属性的内容嵌入JSX中const name = Taniaconst heading =

Hello, {name}

复制代码。

JSX比原始的JavaScript中创建和添加许多元素更容易编写和理解，这也是人们如此热爱React的原因之一组件到目前为止，我们创建了一个组件 - App组件React中几乎所有内容都由组件组成，这些组件可以是。

类组件或简单组件大多数React应用程序都是许多小组件，所有内容都加载到主要的App组件中组件也经常有自己的文件，因此让我们更改项目移除index.js中的App类，它现在长这样：# src/index.js。

import React fromreactimport ReactDOM fromreact-domimport App from./Appimport./index.css ReactDOM.render(,

document.getElementById(root)) 复制代码我们将创建一个名为App.js的新文件，然后将组件放在那里# src/App.jsimport React, { Component } 。

fromreactclassAppextendsComponent { render() { return (

) } }

exportdefault App 复制代码我们将组件导出为App并将其加载到index.js中将组件分成文件不是强制性的，但是如果不这样做的话，应用程序将变得笨拙和混乱类组件让我们创建另一个组件我们将创建一个表格。

创建一个Table.js，并用以下数据填充它# src/Table.js import React, { Component } from react class Table extends Component { render() { return (

NameJobCharlieJanitor