R

React 新手入门指南：7 天指南

2025-06-10

React 新手入门指南：7 天指南

我计划学习 React 已经有一段时间了，但是我已经推迟了太久了。😫

所以我决定在接下来的7 天里，我将：
a) 学习中级 React
b) 记录我的学习，并希望鼓励其他一直拖延的人与我一起学习。

我计划把我学到的一切写下来，并尽量用最通俗易懂的方式解释。如果一切顺利，希望本周末我能写出7篇文章。

但首先，是什么促使我学习 React 的？

a) 它具有可扩展性。Instagram 和 Netflix 等应用都是基于 React 构建的。b
) 它在就业市场上需求巨大。每个人都想雇佣 React 开发者。此外，Angular 的开发速度比几年前慢了很多。c
) 我读到过，它让设计高度复杂的动态应用变得更容易，而用普通的 HTML+JS 来设计这些应用通常会很麻烦（抱歉，队长！）。除非我深入研究，否则我无从得知 😉

让我们看看基础知识！

成分

组件是 React 的核心。你在网页中看到的每个元素都可以在 React 中表示为一个组件。
请看这张 DEV 主页的截图。

成分

每篇文章都是一个组件。文​​章标题、文章描述，以及文章组件内的图标，每个都是一个组件。
搜索栏是一个组件，右上角的所有图标都是组件。明白了吗？

状态

React 中的状态指的是数据。谈论组件的状态，简单地说就是谈论状态本身的数据。状态也可能指 UI 状态。

虚拟 DOM

如果你读过一些 HTML/JS 基础知识，你肯定听说过 DOM。它指的是文档对象模型 (DOM)，本质上是一种树状的 HTML 表示，其中节点代表 HTML 元素。

虚拟域

React 有一个称为虚拟 DOM 的东西。现在，每当我们对组件进行更改时，React 只需执行一个操作，diff并且只更新发生更改的组件（及其子组件），而不是重建整个虚拟 DOM。这个特性使得 React 即使很复杂也能保持快速运行。

你好，世界！👩‍💻

了解了一些基础知识后，让我们使用 React 创建一个入门应用程序。React 确实有 CLI，但由于大多数人都熟悉脚本导入，所以我们将从 CDN 导入 React。
在本系列的稍后部分，我们将介绍如何使用 React CLI 执行相同的操作。

现在，创建一个文件index.html并在你最喜欢的代码编辑器中打开它。
我使用 VSCode 运行，如果你也使用它，请安装以下几个扩展：
a) React Snippets——用于语法高亮、自动完成等
；b) Live Server——用于启动本地服务器，有助于快速开发。

我现在先展示代码。如果有些地方不明白，别担心，我稍后会解释清楚。

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                render() {
                    return (
                        <div>
                            <h1>Hi, I am Karan. React is ezpz!</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

除了熟悉的 HTML 语法之外，还可以从中学习以下几点：🕵️‍♂️🕵️‍♂️

a）前两个脚本导入用于核心 react 库和 react-dom 库（处理虚拟 DOM）

b) 要声明一个 React 组件，我们需要实例化一个扩展了 的类React.Component。这个类必须有一个render()函数，并且 render 函数必须返回一个元素<div>（在本例中是）。

c) 但是等一下，我们怎么才能在标签里写 HTML 呢？嗯，它不是 HTML，而是一种叫做JSX的<script>类似 HTML 的东西。JSX允许我们在 JavaScript 中编写熟悉的类似 HTML 的代码。

d) 浏览器默认无法识别 JSX。这就是为什么我们需要第三个 import-- 来导入Babel的原因。Babel是一个转译器，它基本上将 JSX 转换为浏览器可以理解的内容。此外，为了与 Babel 兼容，另一个修改是将脚本类型更改为'text/babel'。

e) 最后，我们需要告诉 React DOM 将函数渲染到网页上。这个render()函数与 b) 中的函数不同。它们分别来自 react 和 react-dom 这两个独立的库。这个函数接受两个参数，分别是渲染什么和渲染到哪里。

App我们使用自闭合标签来引用我们创建的类<App />。如果我们的组件名为SomeComponentName，我们会使用<SomeComponentName \>。第二个参数告诉它，我们希望使用 将其渲染到 div 标签中id=app。

要验证是否有效，请在编辑器中写下上面的代码片段。如果您使用的是 VSCode，则可以右键单击代码屏幕，然后单击“使用 Live Server 打开”（如果您安装了Live Server扩展）。您应该看到以下内容。

替代文本

希望您得到相同的输出。

添加状态

向我们的组件添加状态就像在我们的类中创建一个名为 state 的对象一样简单。

state = {
    name: 'Karan',
}
Enter fullscreen mode Exit fullscreen mode

完成后，我们需要能够在 JSX 内部访问状态。现在，要在 JSX 中使用 JavaScript 语句，我们需要将它们括在括号中。
例如，{this.state.name}

整个代码片段现在看起来是这样的：

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                state = {
                    name: 'Karan',
                }
                render() {
                    return (
                        <div>
                            <h1>My name is {this.state.name}. I just made a react app!</h1>
                            <h1>I can even execute normal JS stuff inside braces like {Math.ceil(9.3)}</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

在浏览器中加载该页面以查看其外观。

嵌套组件

嵌套组件顾名思义，就是嵌​​套在父组件中的子组件。它们可以帮助我们设计更复杂的组件。要创建和使用嵌套组件，只需声明一个新的类并将其放置在父组件中的任何位置即可。

在下面的代码片段中，我创建了一个名为的新组件Nested并将其放在组件（充当父组件）<h1>的标签之间。App

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class Nested extends React.Component{
                render() {
                    return (
                        <div>
                            <h6> I am wild nested component </h6>
                        </ div>
                    )
                }
            }
            class App extends React.Component{
                state = {
                    name: 'Karan',
                }
                render() {
                    return (
                        <div>
                            <h1>My name is {this.state.name}. I just made a react app!</h1>
                            <Nested />
                            <h1>I can even execute normal JS stuff inside braces like {Math.ceil(9.3)}</h1>
                        </ div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

该页面最终应如下所示：
替代文本


没错！我们一起成功掌握了 React 的基础知识。
不过等等！你以为我会让你不做任何作业就走吗？🙅‍♀️🙅‍♀​​️
你需要做的是：
--> 你需要设计一个 Facebook 帖子组件。--
> 供参考
--> 确保你理解组件的层次结构，并相应地设计子组件。

下一篇文章大概明天就能发布。
这是我第一次在 DEV 上写文章，如果你喜欢的话，请告诉我！

如果您真的非常慷慨，请在Twitter上关注我！

明天见😉

鏂囩珷鏉ユ簮锛�https://dev.to/unhexeddev/react-for-absolute-noobs-a-7-day-guide-4hn0
Devto 翻译
PREV
初学者 C++ 速查表 🔥
NEXT
Kubernetes 动手自学课程（免费）