12 react 脚手架

11/29/2021 react

# react 脚手架项目结构

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库的支持)  
  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹的路径 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!-- 开启理想视口,用于做移动端网页的适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定网页添加到手机主屏幕后的图标 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!-- 应用加壳时的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
		<!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
  • App.js

APP 组件

  • index.js

入口文件

# 基本项目结构

// index.js
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App组件
import App from './App'

//渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))
// App.jsx
//创建“外壳”组件App
import React,{Component} from 'react'
import Hello from './components/Hello'
import Welcome from './components/Welcome'

//创建并暴露App组件
export default class App extends Component{
	render(){
		return (
			<div>
				<Hello/>
				<Welcome/>
			</div>
		)
	}
}
// Hello.jsx / index.jsx
import React,{Component} from 'react'
// 模块化引用 css,避免与其它的 css 冲突
import hello from './index.module.css'

// 使用模块 css: hello.title
export default class Hello extends Component{
	render(){
		return <h2 className={hello.title}>Hello,React!</h2>
	}
}

使用 xxx.module.css 命名,标识模块化 css

/* Hello.css / index.module.css */
.title{
	background-color: orange;
}

# 功能界面的组件化编码流程(通用)

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

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

  3. 实现动态组件

    3.1 动态显示初始化数据

     3.1.1 数据类型  
     3.1.2 数据名称  
     3.1.2 保存在哪个组件?  
    

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

更新时间: Monday, November 29, 2021 21:38