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

相关推荐
herogus丶2 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder6 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者9 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder9 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder10 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806924 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js