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

发布于 2023-11-10  1324 次阅读


AI 摘要

该文章是关于如何快速搭建React函数式组件项目的。首先,文章介绍了如何创建一个名为primordial-react的项目,然后初始化项目并删除新项目中src文件夹下的所有文件。接着,文章指导读者在src文件夹下创建了index.js文件,并将一个名为Hello的函数式组件放入其中。随后,文章提到了创建了三个文件夹来组织项目架构,并将Hello组件移动到pages/Hello/Hello.js文件中。最后,文章说明项目标准化完成,并提供了其他说明。

 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博客