本文将分别从 React 脚手架和前端构建工具 vite 分别搭建一个简单的 React 项目!

1. 创建简单的 React 项目

1.1 使用 React 脚手架创建 React 应用

• 使用 create-react-app 创建 react 应用，创建项目并启动

# 全局安装
npm i -g create-react-app
# 切换至需要创建项目的目录 使用命令
create-react-app hello-react
# 创建项目 hello-react 并生成目录 hello-react
cd hello-react
# 启动项目 
npm start

本文后续搭建环境如上!

1.2 使用 Vite 搭建 React 项目

vite 给我的感觉就是快!

npm create vite@lastest my-vite-app  
cd my-vite-app  
npm install  
npm run dev  

yarn create vite # 选择配置项即可
yarn
yarn dev

1.3 hello-react 项目目录结构分析

这块瞅瞅就好 ~ 不过需要留意高亮行 ~

<!-- 忽略 node_modules 项目依赖包文件夹 --> 
┌── public                      // 公共资源文件
│   ├── favicon.ico             // 网站页签图标
│   ├── index.html              // 主页面
│   ├── manifest.json           // 编译配置文件（应用“加壳”）
│   └── robots.txt              // 爬虫协议文件
│
├── src                         // 项目的源码编写目录
│   ├── App.css                 // App 组件样式
│   ├── App.js                  // 入口组件（App组件）
│   ├── App.test.js             // 给 App 做测试
│   ├── index.css               // 公共样式
│   ├── index.js                // 入口文件
│   ├── reportWebVitals.js 	    // 页面性能分析文件 需要 web-vitals 库的支持
│   ├── setupTests.js           // 组件单元测试的文件 需要jest-dom库的支持
├── package-lock.json           // npm5 新增文件，优化性能
├── package.json                // 项目依赖包配置文件（node配置文件）
└── README.md                   // 项目说明文档

1.4 编写和分析 index.js

index.js 是作为项目的主入口文件

// 引入 React 核心库
import React from 'react';
// 引入 ReactDOM 核心库
import ReactDOM from 'react-dom/client';
// 引入 App 组件
import App from './App';

// 获取一个根容器，其返回一个 ReactDOMRoot 对象实例
const root = ReactDOM.createRoot(document.getElementById('root'));

// 相当于如下  
// ReactDOM.render(<App />, document.getElementById('root'))
// 但是 ReactDOM.render 在 React 18 不再长期支持 现在使用 createRoot 替代 

// 渲染根组件 App（开发环境下加上 React.StrictMode 比较好）
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1.5 编写和分析 App.js

• 编写 App 组件

// 类式组件写法
import React from 'react'; // 可以不用导入本行
// 引入 Hello 组件（默认引入 Hello/index.jsx）
import Hello from './components/Hello'
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello React</h1>
        {/* 可以写成自闭合标签 */}
        <Hello />
      </div>
    )
  }
}
// 默认暴露 App 组件
export default App;

1.6 编写 Hello 组件

• 推荐将 Hello.jsx 改为 index.jsx 可简写引入

export default class Hello extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello 组件</h1>
            </div>)
    }
}

• 此时访问 localhost:3000 即可看到 Hello React 和 Hello 组件 的标题文字！

结束语🔚

简单的 React 项目就大功完成!