react函数式组件项目快速搭建

 1.创建项目

在想要创建项目的位置下使用cmd命令行或使用idea终端输入以下命令(本人用的idea)

创建一个名为primordial-react的项目

npx create-react-app primordial-react

 输入y，导入该包（不是第一次搭建的话就没有该选项）

打开该项目primordial-react

输入以下命令(逐行输入)

npm install
npm start

 出现该页面说明脚手架安装成功，停止运行。

2.初始化项目

删除掉新项目中 src文件夹下的所有文件。（不要删除src文件夹）

在src文件下新建如下文件

index.js

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

const Hello = () => {
    return(
        <div>hello world</div>
    )
};

export default Hello;

// 将Hello组件放入public/index.html(初始的页面)里
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

运行该项目，效果如下

3.创建项目架构

如下创建三个文件夹（若有其他需要可以自行在src下创建新的文件夹）

• components 通用组件文件夹
• pages 如果有路由(React Router、NextJS等)，则有页面文件夹
• utils 需要复用的工具函数

 4.将项目标准化

将index.js文件里Hello那部分函数式放入pages/Hello/Hello.js

Hello.js

const Hello = () => {
    return(
        <div>hello world</div>
    )
};

export default Hello;

 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Hello from "./pages/Hello/Hello";


// 将Hello放入public/index.html里
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

该项目就初步搭建完成了

5.说明

(79条消息) css文件组件化（不需要再创css文件了）_️�あの的博客-CSDN博客