react.js视频教程
This tutorial will give you a basic understanding of React by building a very simple application. I’ll leave out everything which I don’t think is core.
本教程将通过构建一个非常简单的应用程序使您对React有一个基本的了解。 我将忽略所有我认为不是核心的内容。
And then if it sparks your interest, and you want to learn more, you can check out our free React course on Scrimba.
然后，如果它激发您的兴趣，并且您想了解更多，可以查看我们在Scrimba上免费的React课程 。
But as for now, let's focus on the basics!
但是就目前而言，让我们关注基础知识！
设置 (The setup)
When getting started with React, you should use the simplest setup possible: an HTML file which imports the React and the ReactDOM libraries using script tags.
开始使用React时，应该使用最简单的设置：一个HTML文件，该文件使用脚本标签导入React和ReactDOM库。
It looks like this:
看起来像这样：
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>We’ve also imported Babel, as React uses something called JSX to write markup. We’ll need to transform the JSX into plain JavaScript, so that the browser can understand it.
我们还导入了Babel，因为React使用称为JSX的东西来编写标记。 我们需要将JSX转换为纯JavaScript，以便浏览器可以理解它。
There are more two things I want you to notice:
我想让您注意两件事：
The
<div>with the id of#root. This is the entry point for our app. This is where our entire app will live.ID为
#root的<div>。 这是我们应用程序的入口。 这是我们整个应用程序将要存在的地方。The
<script type="text/babel">tag in the body. This is where we’ll write our React code.<script type="text/babel">的<script type="text/babel">标记。 这是我们编写React代码的地方。
If you want to experiment with the code, check out this Scrimba playground.
如果您想尝试使用代码，请查看此Scrimba游乐场。
组件 (Components)
Everything in React is a component, and these usually take the form of JavaScript classes. You create a component by extending upon the React-Component class. Let’s create a component called Hello:
React中的所有内容都是一个组件，并且通常采用JavaScript类的形式。 您可以通过扩展React-Component类来创建React-Component 。 让我们创建一个名为Hello的组件：
class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}You then define the methods for the component. In our example, we only have one method, and it’s called render().
然后，您定义组件的方法。 在我们的示例中，我们只有一种方法，它称为render() 。
Inside render() you’ll return a description of what you want React to draw on the page. In the case above, we simply want it to display an h1 tag with the text Hello world! inside it.
在render()内部，您将返回要在页面上绘制React的描述。 在上述情况下，我们只是希望它显示带有文本Hello world！的h1标签。 在里面。
To get our tiny application to render on the screen, we also have to use ReactDOM.render():
为了使我们的微型应用程序在屏幕上呈现，我们还必须使用ReactDOM.render() ：
ReactDOM.render(
<Hello />,
document.getElementById("root")
);So this is where we connect our Hello component with the entry point for the app (<div id="root"></div>).
因此，这是我们将Hello组件与应用程序的入口点( <div id="root"></div> )连接的地方。
So we’re simply saying: Hey React! Please render the Hello component inside the DOM node with an id of root!
所以我们只是在说：嘿，React！ 请在id为root的DOM节点内呈现Hello组件！
It results in the following:
结果如下：
The HTML’ish syntax we just looked at (<h1> and <Hello/>) is the JSX code I mentioned earlier. It’s not actually HTML, it’s a lot more powerful. Though what you write there does end up as HTML tags in the DOM.
我们刚刚看过HTML语法( <h1>和<Hello/> )是我前面提到的JSX代码。 它实际上不是HTML，而是功能强大得多。 尽管您在那里写的内容最终会成为DOM中HTML标签。
The next step is to get our app to handle data.
下一步是让我们的应用程序处理数据。
处理数据 (Handling data)
There are two types of data in React: props and state. The difference between the two is a bit tricky to understand in the beginning, so don’t worry if you find it a bit confusing. It’ll become easier once you start working with them.
React中有两种类型的数据： props和state 。 两者之间的区别在一开始就很难理解，因此，如果发现它有点令人困惑，请不要担心。 一旦开始与他们合作，它将变得更加容易。
The key difference is that the state is private and can be changed from within the component itself. Props are external, and not controlled by the component itself. It’s passed down from components higher up the hierarchy, who also control the data.
关键区别在于状态是私有的，可以在组件本身内部进行更改。 道具是外部的，不受组件本身的控制。 它是从层次结构较高的组件传递下来的，这些组件也控制数据。
A component can change its internal state directly. It can not change its props directly.
组件可以直接更改其内部状态。 它不能直接更改其道具。
Let’s take a closer look at props first.
让我们先仔细看看道具。
道具 (Props)
Our Hello component is completely static. It renders out the same message no matter what. However, a big part of React is reusability, meaning the ability to write a component once, and then reuse it in different use cases. For example to display different messages.
我们的Hello组件是完全静态的。 无论如何，它都会呈现相同的消息。 然而，React的很大一部分是可重用性，即一次编写组件然后在不同用例中重用它的能力。 例如显示不同的消息。
To achieve this type of reusability, we’ll add props. This is how you pass props to a component:
为了实现这种可重用性，我们将添加一些支持。 这是将道具传递到组件的方式：
ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);This prop is called message and has the value “my friend”. We can access this prop inside the Hello component by referencing this.props.message, like this:
该道具称为message ，其值为“我的朋友”。 我们可以通过引用this.props.message ，在Hello组件内访问此prop，如下所示：
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}As a result, this is rendered on the screen:
结果，它呈现在屏幕上：
The reason we’re writing {this.props.message} with curly braces is because we need to tell the JSX that we want to add a JavaScript expression. This is called escaping.
之所以用大括号写{this.props.message}是因为我们需要告诉JSX我们要添加一个JavaScript表达式。 这称为转义 。
So now we have a reusable component which can render whatever message we want on the page. Woohoo!
因此，现在我们有了一个可重用的组件，该组件可以呈现我们想要在页面上显示的任何消息。 hoo！
However, what if we want the component to be able to change its own data? Then we have to use state instead!
但是，如果我们希望组件能够更改其自己的数据怎么办？ 然后，我们必须使用状态来代替！
州 (State)
The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.
在React中存储数据的另一种方式是处于组件的状态。 与道具(状态不能由组件直接更改)不同，状态可以。
So if you want the data in your app to change — for example, based on user interactions — it must be stored in a component’s state somewhere in the app.
因此，如果您希望更改应用程序中的数据(例如，基于用户交互的数据)，则必须将其存储在应用程序中某个组件的状态中。
初始化状态 (Initializing state)
To initialize the state, simply set this.state in the constructor() method of the class. Our state is an object which in our case only has one key called message.
要初始化状态，只需在类的constructor()方法中设置this.state即可。 我们的状态是一个对象，在我们的情况下只有一个称为message键。
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.
在设置状态之前，我们必须在构造函数中调用super() 。 这是因为， this是之前未初始化super()被调用。
改变状态 (Changing the state)
To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateMessage.
要修改状态，只需调用this.setState()，并传入新的状态对象作为参数即可。 我们将在称为updateMessage的方法中进行此updateMessage 。
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.
注意：为了使此工作有效，我们还必须将this关键字绑定到updateMessage方法。 否则我们将无法在方法中访问this 。
事件处理程序 (Event Handlers)
The next step is to create a button to click on, so that we can trigger the updateMessage() method.
下一步是创建一个单击按钮，以便我们可以触发updateMessage()方法。
So let’s add a button to the render() method:
因此，我们向render()方法添加一个按钮：
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}Here, we’re hooking an event listener onto the button, listening for the onClick event. When this is triggered, we call the updateMessage method.
在这里，我们将事件监听器挂在按钮上，监听onClick事件。 触发此操作后，我们将调用updateMessage方法。
Here’s the entire component:
这是整个组件：
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}/>Click me!</button>
</div>
)
}
}The updateMessage method then calls this.setState() which changes the this.state.message value. And when we click the button, here’s how that will play out:
然后， updateMessage方法调用this.setState()来更改this.state.message值。 当我们单击按钮时，将显示以下内容：
Congrats! You now have a very basic understanding of the most important concepts in React.
恭喜！ 您现在已经对React中最重要的概念有了非常基本的了解。
If you want to learn more, be sure to check out our free React course on Scrimba.
如果您想了解更多信息，请务必查看我们在Scrimba上的免费React课程。
Good luck with the coding :)
祝您编码顺利：)
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。
翻译自: https://www.freecodecamp.org/news/learn-react-js-in-5-minutes-526472d292f4/
react.js视频教程
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
