React 脚手架

一位正在提升技术的HelloKitty

已于 2024-04-01 22:47:53 修改

阅读量1.8k

点赞数 34

文章标签： react.js 前端前端框架

于 2024-04-01 18:56:15 首次发布

本文链接：https://blog.youkuaiyun.com/hsyldw2000/article/details/137242762

版权

本文介绍了如何使用create-react-app搭建React项目，包括脚手架的结构、组件开发流程，以及在VSCode中使用插件。详细讲解了从全局安装、创建项目到编写HelloReact组件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装脚手架

1.全局安装：npm i -g create-react-app

2.创建项目：create-react-app hello-react

3.进入项目文件夹：cd 文件夹名称

4.启动项目：npm start / yarn start

二、脚手架结构（标红的为常用组件）

public ---- 静态资源文件夹

favicon.icon ------ 网站页签图标

index.html -------- 主页面

logo192.png ------- logo图

logo512.png ------- logo图

manifest.json ----- 应用加壳的配置文件

robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

App.css -------- App组件的样式

App.js --------- App组件

App.test.js ---- 用于给App做测试

index.css ------ 样式

index.js ------- 入口文件

logo.svg ------- logo图

reportWebVitals.js --- 页面性能分析文件(需要web-vitals库的支持)

setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)

三、编码流程

1. 拆分组件: 拆分界面,抽取组件

2. 实现静态组件: 使用组件实现静态页面效果

3. 实现动态组件

3.1 动态显示初始化数据

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个组件?

3.2 交互(从绑定事件监听开始)

四、vscode使用的插件

五、第一个react项目---Hello React

1.首先将项目中用不找的文件删除，如果不想删留着也没事。

2.index 页面：这个页面是固定版式，创建实际DOM原生，将来写的组件都会渲染到root里。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="第一个react项目"
    />
    <title>Hello world</title>
  </head>
  <body>
    <!-- 如果页面不支持javaScript语言就会显示这句话 -->
    <noscript>页面不支持javaScript语言</noscript>
    <div id="root"></div>
  </body>
</html>

3.创建component组件文件夹，这个是保存项目中使用的组件的。然后创建index.jsx和index.css文件。文件结构如下图所示：

4.在 Hello 的 index.jsx 中写编写hello React类式组件。在index.css文件中给hello类选择器加样式。如下代码所示。（快捷键：rcc是创建类式组件，rfc是创建函数式组件）

//js部分
import React from 'react';
import'./index.css' 


export default class Hello extends React.Component{
    render(){
        return  <h2 className='hello'>Hello React!</h2>
    }
}

//css部分 
.title{
    background-color: yellow;
}

5.如果写法跟我一样，Hello文件夹下都是index命名的文件，那么会出现属性覆盖的问题。解决方法有两种，1.不要用index命名。2.将css文件模块化；将css文件名改为index.module.css,在index.js文件中引入 import hello from './index.module.css' ，在渲染时 <h2 className={hello.title}>Hello React!</h2>。具体实现如下图所示：