React 脚手架

一、安装脚手架

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里。

html 复制代码
<!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是创建函数式组件)

javascript 复制代码
//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>。具体实现如下图所示 :

6.效果实现截图(文字居中的样式是在app.css文件中设置的)

相关推荐
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
止观止9 小时前
React响应式组件范式:从类组件到Hooks
javascript·react.js·ecmascript
@大迁世界9 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙10 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
新酱爱学习10 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞10 小时前
把纸堆变数据流!Paperless-ngx让文件管理像打游戏一样爽:cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作