[译]5分钟学习React.js

本教程将通过构建一个非常简单的应用程序,让你对React.js有基本的了解。我会抛弃所有我认为不是核心的东西。

如果你喜欢我的教学风格,在我们即将推出免费的React.js课程时你想收到通知,可以在留下电子邮件。

设置

在开始使用React时,你应该使用最简单的设置:在html文件中使用script标签导入React和ReactDOM库,如下所示:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.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">
/*
在这里添加React代码
*/
</script>
</body>
</html>

我们还导入了Babel,因为React使用JSX来编写标签。 我们需要将此JSX转换为纯JavaScript,以便浏览器可以理解它。

我希望你注意到另两件事情:

  1. id为#root的<div>。 这是应用程序的入口点。 这是整个应用程序将要运行的位置。
  2. 正文中的<script type="text/babel">标签。 这是我们编写React.js代码的地方。

如果你想体验代码,看看这个Scrimba示例

组件

React中的所有内容都是一个组件,通常使用JavaScript的类来编写。 你可以扩展React-Component类来创建组件。 我们来创建一个名为Hello的组件。

class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}

然后定义组件的方法。 在我们的例子中,我们只有一个方法,它被称为render()。

render()方法返回你想要React在页面上展示的描述。 在上面的例子中,我们只是希望它显示带有文本Hello World的h1标签! 

为了让我们的小应用程序在屏幕上呈现,我们还必须调用ReactDOM.render():

ReactDOM.render(
<Hello />,
document.getElementById("root")
);

所以这就是我们将Hello组件连接到应用程序入口点(<div id="root"></ div>)的地方。 结果如下:

我们刚才看到的HTML'ish语法(<h1>和<Hello />)是我前面提到的JSX代码。 它实际上不是HTML,尽管你在那里编写的HTML最终会作为HTML中的标签。

下一步是让我们的应用程序来处理数据。

数据处理

React中有两种类型的数据:属性(props)和状态(state)。 两者之间的区别在一开始就有点棘手,所以如果你觉得有点混乱,请不要担心。 一旦开始使用它们,它会变得更容易。

关键的区别在于,state是私有的,可以在组件内部对它更改。 props是外部的,不受组件本身的控制。 它从更高级别的组件传递下来,控制数据。

组件可以直接更改其内部state。 它不能直接改变它的props。

我们先来仔细看看props。

Props

我们的Hello组件很静态,它始终呈现出相同的消息。 React的一大特点是可重用性,意味着可以编写一次组件,然后在不同的用例中重用它 - 例如,显示不同的消息。

为了实现这种可重用性,我们添加props。 这就是我们如何将props传递给组件(粗体字部分):

ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);

这个属性名称为message,值为"my friend"。 我们可以在Hello组件中使用this.props.message访问属性messag,如下所示:

class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}

它在屏幕呈现如下:

我们用花括号写{this.props.message}的原因是因为我们需要告诉JSX我们想添加一个JavaScript表达式。 这被称为转义。

所以现在我们有一个可重用的组件,它可以在页面上呈现我们想要的任何消息。哇噢!

但是,如果我们希望组件能够修改自己的数据呢? 那么我们必须改用状态state!

State

在React中存储数据的另一种方式是使用组件内的state。 与props不同 - 组件不能直接修改props - state可以。

因此,如果你希望修改应用程序中的数据(例如,基于用户交互),则必须将其存放在应用程序组件的状态中。

初始化状态

要初始化状态,只需在类的构造函数()方法中设置this.state即可。 我们的State是一个对象,在我们的例子中只有一个叫做message的键。

class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}

在我们设置状态之前,我们必须在构造函数中调用super()。 这是因为在super()被调用之前是未初始化的。

修改状态

要修改状态,只需调用this.setState(),传入新的状态对象作为参数。 我们将在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>;
}
}

注意:为了实现这个功能,我们还必须将关键字this绑定到updateMessage方法。 否则,我们不能在方法中访问到this。

下一步是创建一个按钮来点击,这样我们就可以触发updateMessage()方法。

我们在render()方法中添加一个按钮:

render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}

在这里,我们将一个事件监听器挂载到按钮上,监听onClick事件。 当这被触发时,我们调用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 (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
}

updateMessage方法会调用this.setState()来更改this.state.message的值。 当我们点击按钮时,如下所示:

恭喜! 你现在对React中最重要的概念有了非常基本的了解。


原文:Learn React.js in 5 minutes

版权声明:著作权归作者所有。

相关推荐

React Apollo入门

入门Apollo Client最简单的方法是使用Apollo Boost,它会给客户端配置推荐的设置。使用Apollo Boost创建app的内容包括缓存,本地状态管理以及错误处理。安装首先安装以下的软件包:npm install apollo-boost react-apollo graphql-tag graphq

GPU架构学习资源

这里收藏了gpu学习的网站,pdf等等资源:http://courses.cms.caltech.edu/cs179/http://www.amd.com/Documents/GCN_Architecture_whitepaper.pdfhttps://community.arm.com/graphics/b/bloghttp://cdn.imgtec.com/sdk-documentation/

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更