5 分钟学会 React JS — 初学者教程

AWS GenAI 直播！

本教程将通过构建一个非常简单的应用程序，帮助您对 React 有一个基本的了解。我会省略所有我认为非核心的部分。

如果它激发了您的兴趣，并且您想了解更多，您可以查看我们在 Scrimba 上的免费 React 课程。

但现在，让我们集中讨论基础知识！

设置

当开始使用 React 时，您应该使用尽可能简单的设置：一个使用脚本标签导入库的ReactHTML文件。ReactDOM

它看起来像这样：

<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>

我们还导入了 Babel，因为 React 使用一种叫做 JSX 的语言来编写标记。我们需要将 JSX 转换为纯 JavaScript，以便浏览器能够理解。

还有两件事我希望你注意：

id<div>为的#root。这是我们应用的入口点。我们的整个应用都将驻留在此。
<script type="text/babel">主体中的标签。我们将在这里编写 React 代码。

如果您想试验代码，请查看这个 Scrimba 游乐场。

成分

React 中的所有内容都是组件，这些组件通常采用 JavaScript 类的形式。您可以通过扩展该类来创建组件React-Component。让我们创建一个名为的组件Hello：

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

然后，定义组件的方法。在我们的示例中，只有一个方法，名为render()。

在里面，render()你将返回一段关于你希望 React 在页面上绘制的内容的描述。在上面的例子中，我们只是希望它显示一个h1包含文本Hello world! 的标签。

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

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

所以这就是我们将Hello组件与应用程序的入口点连接起来的地方（<div id="root"></div>）。

所以我们只需说：嘿，React！请在 DOM 节点内渲染id 为root的Hello组件！

其结果如下：

我们刚才看到的 HTML 语法（<h1>和<Hello/>）就是我之前提到的 JSX 代码。它实际上不是 HTML，但功能强大得多。不过，你写在那里的内容最终会以 HTML 标签的形式出现在 DOM 中。

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

处理数据

React 中有两种类型的数据：props和state。两者之间的区别一开始可能有点难以理解，所以如果你觉得有点困惑也不用担心。一旦你开始使用它们，一切就会变得更容易。

关键区别在于，state是私有的，可以在组件内部更改。props是外部的，不受组件本身控制。props 由更高层次的组件传递，这些组件也控制数据。

组件可以直接改变其内部状态。它不能直接改变其 props。

让我们先仔细看看道具。

道具

我们的Hello组件是完全静态的。无论如何，它都会渲染相同的消息。然而，React 的一大特点是可复用性，这意味着只需编写一次组件，就可以在不同的用例中复用它。例如，显示不同的消息。

为了实现这种可重用性，我们将添加 props。以下是将 props 传递给组件的方法：

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

这个 prop 被调用message，其值为“my friend”。我们可以在 Hello 组件内部通过引用来访问这个 prop this.props.message，如下所示：

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

结果，屏幕上呈现的内容如下：

我们之所以{this.props.message}使用花括号，是因为我们需要告诉 JSX 我们想要添加一个 JavaScript 表达式。这叫做转义。

现在我们有了一个可复用的组件，可以在页面上渲染任何我们想要的消息。哇哦！

但是，如果我们希望组件能够更改其自身的数据怎么办？那么我们必须使用状态！

状态

在 React 中，另一种存储数据的方式是将数据保存在组件的 state 中。与 props（组件无法直接更改）不同，state 可以。

因此，如果您希望应用程序中的数据发生变化（例如，基于用户交互），则必须将其存储在应用程序中某个组件的状态中。

初始化状态

要初始化状态，只需在类的方法this.state中设置即可constructor()。我们的状态是一个对象，在本例中，它只有一个名为的键message。

class Hello extends React.Component {  

    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
    }  

    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

在设置状态之前，我们必须调用super()构造函数。这是因为在调用this之前它尚未初始化。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 中最重要的概念已经有了非常基础的了解。

如果您想了解更多信息，请务必查看我们在 Scrimba 上的免费 React 课程。

祝你编码顺利:)

感谢阅读！我叫 Per，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想与我保持联系，请在Twitter和Instagram上关注我。

文章来源：https://dev.to/scrimba/learn-react-in-5-minutes-3bnd

5 分钟内学会 React JS — 初学者教程 AWS GenAI LIVE！