准备工作

确保node和npm安装

创建项目

创建项目分为手动和自动, 手动创建项目可以帮助你更好的理解react的工作原理, 但是麻烦是真的. 熟悉之后进行自动创建更佳.

手动创建项目

为了更好的理解react创建项目的过程, 这里附带了手动创建的过程, 如果觉得没有必要可以转到自动创建项目.

1.项目初始化

在终端执行初始化命令npm init -y

2.安装依赖包

安装创建react应用所需要的包, 执行 npm i react react-dom react-scripts -s

react包含react的核心功能, 各种钩子

react-dom包含react对dom的操作

react-scripts用于创建react应用

3.目录结构

需要自己创建以下文件

todo
├─ package-lock.json
├─ package.json
├─ public
│  └─ index.html
└─ src
   ├─ App.js
   └─ index.js

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo</title>
</head>
<body>
  <!-- 将要挂载的节点, id为root要在index中获取root的原生节点 -->
  <div id="root"></div>
</body>
</html>

5.App.js

// 通过该函数的返回内容渲染到id为root的节点
function App() {
  return <h1>hello, react</h1>;
}

export default App;

6.index.js

// 创建react节点所需要的包
import ReactDOM from "react-dom/client";
// 渲染内容来自哪里
import App from "./App";

// 创建一个react节点, 参数为目标原生节点, 相当于一个原生节点到react节点的转换
const root = ReactDOM.createRoot(
  document.getElementById("root")
);

// 指定react节点要渲染的内容来自哪里
root.render(<App />);

7.运行项目

在项目/下打开终端, 执行npx react-scripts start

自动创建项目

1.全局安装create-react-app

执行npm install -g create-react-app

该命令为全局安装, 请确保自己的global目录在自己的掌控下.

2.创建项目

等待安装完毕,执行create-react-app todo_auto

create-react-app: 创建项目的命令

todo_auto: 项目名称, 可以自己替换为其他名字

3.运行项目

cd todo_auto, 进入项目根目录下.(这里的todo_auto为自己的项目名)

执行npm start

默认地址为localhost:3000

React初入门 - 创建react项目

准备工作

创建项目

手动创建项目

自动创建项目