luda
编译来源：
作者：Rajat Saxena
译者：GraveAccent
在过去的几个月里，我一直在使用React和React-Native。我已经发布了两个产品：Kiven Aa (React)和Pollen Chat (React)。当我开始学习React的时候，我不仅想教你如何用React写应用程序(博客、视频、课程等)，还想给你准备面试。(威廉莎士比亚)(美国电视剧《Northern Exposure》)。
我发现的大部分资料集中在某一方面。因此，这些文章针对的是希望理论和实践完美结合的观众。让我告诉你一些理论，以便你能理解背后发生了什么。我将向您展示如何编写React.js代码。(约翰f肯尼迪)。
如果你更喜欢视频格式，我从[YouTube][]上传了整个过程。去吧。
开始吧.
React.js是用于配置用户界面的JavaScript库
可以创建各种单页应用程序。例如，用户界面可以实时显示更改后的聊天软件和电子商务门户。
一切都是组件
React应用程序由组件组成，数量多，相互嵌套。你可以这样问。“但是什么是汇编？”。)
组件是定义UI中特定功能的外观和行为的可重用代码片段。例如，按钮是一个组件。
让我们看下一个计算器。如果你想计算2=4 -1=3(简单的数学题)，你可以在Google上看到这个计算器。
红色标记表示元件
如上图所示，该计算器有多个区域，如显示窗口和数字键盘。所有这些都可以是许多单独的组件，也可以是一个巨大的组件。这取决于在React中分解和抽象事物的程度。如果分别为所有这些组件编写代码，然后将这些组件合并到一个容器中，则该容器是另一个React组件。这使您可以创建可重用的组件，最终应用程序成为一起工作的单个组件集。
以下是实践上述原则，用React写计算器的方法。
Calculator
显示窗口/
NumPad
密钥号={1}/
密钥号={2}/
.
.
.
密钥号={9}/
/NumPad
/Calculator
没错！看起来像HTML代码，但不是。我们将在下一节详细讨论。
设置我们的Playground
本教程重点介绍React的基本部分。不首选web或React Native(移动应用程序开发)。因此，在使用联机编辑器学习React可以做什么之前，可以避免web或native的特定配置。
我已经为读者在代码中设置了开发环境。只需单击链接即可读取HTML和JavaScript中的所有注释。
控制组件
React应用程序是由嵌套树组成的各种组件的集合。因此，需要将数据从一个组件传递到另一个组件的机制。
进入“props”
可以使用Props对象将所有数据传递给组件。React中的每个组件都导入一个props对象。在学习如何使用Props之前，让我们先了解一下基于函数的组件。
a)函数组件
在React中，函数组件使用通过props对象传递的所有数据。返回描述reactor应渲染的UI的对象。基于函数的组件也称为无状态组件。
让我们编写第一个函数组件。
Function Hello(props) {
Return div{}/div
}
就这么简单。将Props作为参数传递给常规JavaScript函数，并返回值。嗯？归还了什么？那个div{}/div
>。它是 JSX（JavaScript Extended）。我们将在后面的部分中详细了解它。上面这个函数将在浏览器中渲染出以下 HTML。
<!-- If the "props" object is: {name: 'rajat'} -->
<div>
rajat
</div>
阅读以下有关 JSX 的部分，这一部分解释了如何从我们的 JSX 代码中得到这段 HTML 。
如何在 React 应用中使用这个函数式组件？ 很高兴你问了！ 它就像下面这么简单。
<Hello name='rajat' age={26}/>
属性 name 在上面的代码中变成了 Hello 组件里的 ，属性 age 变成了 。
记住！ 你可以将一个 React 组件嵌套在其他 React 组件中。
让我们在 codepen playground 使用 Hello 组件。用我们的 Hello 组件替换 Reac() 中的 div，并在底部窗口中查看更改。
function Hello(props) {
return <div>{}</div>
}
Reac(<Hello name="rajat"/>, document.getElementById('root'));
但是如果你的组件有一些内部状态怎么办？例如，像下面的计数器组件一样，它有一个内部计数变量，它在 + 和 - 键按下时发生变化。
具有内部状态的 React 组件
b) 基于类的组件
基于类的组件有一个额外属性 state ，你可以用它存放组件的私有数据。我们可以用 class 表示法重写我们的 Hello 。由于这些组件具有状态，因此这些组件也称为有状态组件。
class Counter extends React.Component {
// this method should be present in your component
render() {
return (
<div>
{this.}
</div>
);
}
}
我们继承了 React 库的 React.Component 类以在 React 中创建基于类的组件。在 这里 了解更多有关 JavaScript 类的东西。
render() 方法必须存在于你的类中，因为 React 会查找此方法，用以了解它应在屏幕上渲染的 UI。为了使用这种内部状态，我们首先要在组件
要使用这种内部状态，我们首先必须按以下方式初始化组件类的构造函数中的状态对象。
class Counter extends React.Component {
constructor() {
super();
// define the internal state of the component
= {name: 'rajat'}
}
render() {
return (
<div>
{.name}
</div>
);
}
}
// Usage:
// In your react app: <Counter />
类似地，可以使用 对象在我们基于类的组件内访问 props。
要设置 state，请使用 React.Component 的 setState()。 在本教程的最后一部分中，我们将看到一个这样的例子。
提示：永远不要在 render() 函数中调用 setState()，因为 setState 会导致组件重新渲染，这将导致无限循环。
基于类的组件具有可选属性 “state”。
除了 state 以外，基于类的组件有一些声明周期方法比如 componentWillMount()。你可以利用这些去做初始化 state这样的事， 可是那将超出这篇文章的范畴。
JSX
JSX 是 JavaScript Extended 的缩写，它是一种编写 React 组件的方法。使用 JSX，你可以在类 XML 标签中获得 JavaScript 的全部力量。
你把 JavaScript 表达式放在 {} 里。下面是一些有效的 JSX 例子。
<button disabled={true}>Press me!</button>
<button disabled={true}>Press me {3+1} times!</button>;
<div className='container'><Hello /></div>
它的工作方式是你编写 JSX 来描述你的 UI 应该是什么样子。像 Babel 这样的转码器将这些代码转换为一堆 React.createElement() 调用。然后，React 库使用这些 React.createElement() 调用来构造 DOM 元素的树状结构。对于 React 的网页视图或 React Native 的 Native 视图，它将保存在内存中。
React 接着会计算它如何在展示给用户的 UI 的内存中有效地模仿这个树。此过程称为 reconciliation 。完成计算后，React 会对屏幕上的真正 UI 进行更改。
React 如何将你的 JSX 转化为描述应用 UI 的树。
你可以使用 Babel 的在线 REPL 查看当你写一些 JSX 的时候，React 的真正输出。
使用Babel REPL 转换 JSX 为普通 JavaScript
由于 JSX 只是 React.createElement() 调用的语法糖，因此可以在没有 JSX 的情况下使用 React。
现在我们了解了所有的概念，所以我们已经准备好编写我们之前看到之前的 GIF 图中的计数器组件。
代码如下，我希望你已经知道了如何在我们的 playground 上渲染它。
class Counter extends React.Component {
constructor(props) {
super(props);
= {count: .start || 0}
// the following bindings are necessary to make `this` work in the callback
= .bind(this);
= .bind(this);
}
inc() {
({
count: .count + 1
});
}
dec() {
({
count: .count - 1
});
}
render() {
return (
<div>
<button onClick={}>+</button>
<button onClick={}>-</button>
<div>{.count}</div>
</div>
);
}
}
以下是关于上述代码的一些重点。
- JSX 使用 驼峰命名 ，所以 button 的 属性是 onClick，不是我们在HTML中用的 onclick。
- 绑定 this 是必要的，以便在回调时工作。 请参阅上面代码中的第8行和第9行。
最终的交互式代码位于 此处 。
有了这个，我们已经到了 React 速成课程的结束。我希望我已经阐明了 React 如何工作，以及如何使用 React 来构建更大的应用程序，使用更小和可重用的组件。
via:
作者： Rajat Saxena 译者： GraveAccent 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出
点击“了解更多”可访问文内链接