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文件中设置的)

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript