翻译:《5分钟入手React.js》

原文地址:[Learn React.js in 5 minutes](https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4)。
因为想撸一撸 React ,寻思着直接伸手应该比较愉快,就顺便翻译一篇国外的入门好啦。

5分钟入手 React.js ———— 超热门JavaScript库的快速指南

在这篇教程中,你会通过构建一个超简单小应用的方式对于 React.js 有一个基本的理解,我会把其中我个人认为不是特别核心的知识点暂且抛去不谈哈。

当你阅读这篇文章的时候,你也可以点击链接看一下发布在Scrimba的免费React课程,在那你可以通过48个互动视频来相对完整地学习这个库。

废话少说,整!

基础配置

刚开始使用React的时候,我们应该尽量使用最简单的配置来上手:比如像这样只是用<script />标签引入了ReactReactDOM的简单HTML文件:

    <html>
    <head>
    <script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
        
        /* 
        在此处写入React相关代码
        */
        
        </script>
    </body>
    </html>

译者:原作者使用的免费CDN加速是https://unpkg.com/,为了符合国情我全部替换成了https://www.bootcdn.cn/的同类文件,代码可以放心复制~

同时我们引入了Babel,因为我们在React相关代码中要使用一些用JSX语法来描述HTML内容的部分,此时我们需要将JSX来转化成普通的JavaScript,这样浏览器才能正常解析这段程序。

这里有两个地方需要注意一下:

  • 一个是我们标记了#root这个id的<div />标签。它是我们整个应用的根节点,我们程序的编译结果将出现在这个标签中;
  • 还有<script type="text/babel"></script>这个标签。这个标签是我们将要编写React.js代码的地方。

如果你想实验这段代码,可以查看Scrimba playground

译者:除了Scrimba网站,可以根据2016年10月的这篇文章了解下其他的在线编辑器以及特点。

组件

在React的世界里,一切都是组件,组件通常继承于一个JavaScript类。你可以通过继承React.Component类来创建组件,如下代码所示,我们来创建一个名为“Hello”的组件。

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

然后,我们可以定义组件的方法,不过我们的示例中只定义了一个render()方法。

render()方法中我们返回了一串希望React渲染到页面中的HTML代码,我们想让React把<h1>Hello world!</h1>代码渲染到根节点中。

然后我们调用ReactDOM.render()来给我们的小应用进行DOM渲染:

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

这段代码是我们让根节点与Hello组件产生关联的关键,结果请点击链接查看。

译者:点击这个CodePen地址查看这个例子。

刚刚出现的与HTML语法很相似的<Hello />就是我们刚刚提到的JSX。它并不是HTML,但是最终会转换成HTML来渲染。

下一步我们来学习数据绑定。

数据绑定

在React中有两种数据:Props 以及 State。最开始我们或许比较难以理解这两者的区别,不用太担心,在开始使用它们之后你就会更容易理解它们的具体意义。

State也可以称之为状态,它是组件所私有的、可以在组件内部修改的;而Props是外部传入的,不受组件本身控制。Props从可以控制数据的高层组件向低层组件传递。

一个组件可以直接地修改它的State,而不能直接修改它被传入的Props。

我们先看一下Props。

Props

我们的“Hello”组件是一个非常基础的组件,它无论如何渲染都智慧渲染出相同的数据。React中一个很重要的部分就是它的复用性,也就是说你可以只编写一次组件、却在各种不同的时候调用它——比如显示不同的信息。

为了给刚刚的组件增加复用性,我们来为它添加 Props 。下面的message="my friend"就是你使用 Props 将数据传递给组件的方式:

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

这个被命名为“message”的prop我们为他赋值为“老铁”,我们在组件内使用this.props.message的语法来调用它:

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

结果请点击链接查看。

译者:点击这个CodePen地址查看这个例子。

我们在代码中用一个大括号来包裹了{this.props.message}代码,这个大括号是用来进行转义操作的,它来标识这段大括号中的JSX为JavaScript表达式。

那么我们现在就有一个可以复用的组件了,它可以让我们给任何宾语喊“Hello”!真牛逼!

那我们该怎么让组件能够拥有自己修改数据的能力呢?那就要使用State了!

State

State是React中的另一种数据形式,它可以在组件内部由组件自己来直接修改,不需要外部传入。

所以你如果需要组件内部能够通过用户交互等形式让数据产生变化,你就需要把它存在组件的State里。

初始化状态

为了将状态进行初始化,我们需要在组件的constructor()方法中简单设置一下this.state参数。在我们的例子中,我们依然是只设置一个“message”属性。

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "State中的Message"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

在我们设置State的具体属性的时候,我们需要先在constructor(){}中调用super()方法,只有这样才能在继承父类的子类中正确获取到类型的this

更新 State 中的数据

想要修改State里面的值,最简单的做法是调用this.setState(),并把要更新的值放置其中。下面我们在组件中定义一个updateMessage()方法来更新数据。

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "State中的Message"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "更新过的State中的Message"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

这个时候要注意一下,我们在updateMessage()中胡作非为的时候,必须要确认this已经绑定到了组件方法中,不然我们无法访问到正确的this

下一步我们在render()中创建一个点击后就能触发updateMessage()的按钮:

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>点我更新State!</button>
     </div>   
  )
}

这样我们就在按钮上挂了一个事件监听器,来监听onClick事件。当事件触发时,组件就会调用updateMessage()方法。如下为完整组件代码:

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "State中的Message"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "更新过的State中的Message"
        });
    }    
    render() {
        return (
         <div>
           <h1>Hello {this.state.message}!</h1>
           <button onClick={this.updateMessage}>点我更新State!</button>
         </div>   
        )
    }
}

点击按钮后,updateMessage()方法就会调用this.setState(),并通过传值来修改其中的this.state.message。点击之后的效果点击链接查看。

译者:点击这个CodePen地址查看这个例子。

恭喜你!你已经对于React中比较重要的概念有了一个基本的认识啦!

译者:后面作者的感叹、广告、自我介绍都不翻译了,在DocsChina也有类似的React快速入门的中文文档,需要的小伙伴可以自取。

标签: none

添加新评论