05. 从零开始创建React应用

准备工作

首先，新手阶段为了防止干扰，我们需要清理项目文件夹，先删除src文件夹里面所有不需要的文件。注意需要一直保留的是public文件夹里的index.html文件，它包含了一个重要的根元素，我们的React应用将在这里渲染。

创建入口文件

我们的第一步是在src里创建一个名为index.js的文件。这个文件名很重要，因为webpack（项目中使用的模块打包工具）默认将其作为入口点。

导入必要的库

在index.js中，我们需要导入两个核心库:

import React from 'react';
import ReactDOM from 'react-dom/client';

这些库是通过NPM安装的，使用ES6的导入语法将它们引入项目。这与在HTML文件中使用<script>标签导入库的方式不同，更加模块化和现代化。

创建应用组件

接下来，我们创建我们的第一个组件：

function App() {
  return <h1>Hello React!</h1>;
}

按照惯例，我们将主组件命名为”App”，但这不是强制性的。重要的是组件名称必须以大写字母开头，这是React的规定。

渲染到DOM

最后，我们需要将组件渲染到DOM中。在React 18中，我们使用以下代码：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

这段代码做了两件事：

1. 使用document.getElementById('root')选择HTML文件中id为”root”的div元素
2. 创建React根节点并在其中渲染我们的App组件

使用严格模式

为了使我们的应用更加健壮，可以使用React的严格模式：

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

严格模式在开发过程中会有两个主要好处：

• 组件会被渲染两次，有助于发现某些类型的bug
• React会检查我们是否使用了过时的API

现在，我们已成功从零创建了一个React应用！虽然这是一个简单的例子，但它展示了React应用的基本构建块。随着项目的发展，我们可以添加更多组件、状态管理和路由等功能。