04-React脚手架
1. react脚手架入门
1).脚手架的介绍
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置（语法检查、jsx编译、devServer…）
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库:
create-react-app - 项目的整体技术架构为:
react + webpack + es6 + eslint - 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
2).创建项目并启动
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start
3).react脚手架项目结构
a.public静态资源文件夹
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
①.index.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="#000000" />
<!-- 描述网站信息 -->
<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>
b.src源码文件夹
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.js ------- 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode> 用于监测规范APP组件及其子组件的代码书写格式
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
3). 功能界面的组件化编码流程
- 拆分组件: 拆分界面,抽取组件
- 实现静态组件: 使用组件实现静态页面效果
- 实现动态组件
- 动态显示初始化数据
- 数据类型
- 数据名称
- 保存在哪个组件
- 交互(从绑定事件监听开始)
- 动态显示初始化数据
2.脚手架基础使用
1).实现简单脚手架效果
-
编写
App.js父组件文件和index.js入口文件App.js
// 创建“外壳”组件App // {Component}不是解构赋值，是一个分别暴露的方法 import React, { Component } from 'react' // 创建并暴露App组件 export default class App extends Component { render() { return ( <div></div> ) } }index.js// 引入React核心库 import React from "react"; /* 创建虚拟DOM节点 */ // 引入ReactDOM import ReactDOM from 'react-dom' // 引入APP组件 import App from './App' // 渲染App到页面 ReactDOM.render( <App/>, document.getElementsByName('root') )新版React18的写法：
// 引入React核心库 import React from "react"; /* 创建虚拟DOM节点 */ import { createRoot } from 'react-dom/client'; //React 18 // 引入APP组件 import App from './App' // 渲染App到页面 createRoot(document.getElementById('root')).render(<App/>) -
创建一个
components文件，并在此文件中创建一个子组件的文件夹，然后在子组件的文件夹里编写js或者jsx组件文件和css样式文件
-
编写子组件的组件文件和样式文件
Hello.jsx 组件文件
import React, { Component } from 'react' // 引入样式文件 import './Hello.css' export default class Hello extends Component { render() { return ( <div> <h2 className='title'>Hello React</h2> </div> ) } }Hello.css 样式文件
.title{ background-color: orange; } -
将子组件引入到父组件App中
// 引入Hello组件 import Hello from './components/Hello/Hello' export default class App extends Component { render() { return ( <div> <Hello/> </div> ) }可以将
Hello.jsx和Hello.css文件重命名为index.jsx和index.css，这样引入组件文件或者时，就可以省略路径import Hello from './components/Hello'
3.脚手架配置代理——React ajax
1).前置说明
- React本身只关注于界面, 并不包含发送ajax请求的代码
- 前端应用需要通过ajax请求与后台进行交互(json数据)
- react应用中需要集成第三方ajax库(或自己封装)
2).跨域问题
当运行React脚手架时，webpack打包管理工具会创建一个本地的虚拟服务器来运行项目以此来模拟现实的开发环境。当在React应用中向某个服务器接口发送请求后，服务器接口返回的数据会被浏览器会抵挡，使我们不能读取到服务器接口返回的数据，具体原因是跨域原则。为了避免跨域问题，需要在React脚手架应用中配置一个代理服务器来解决网络请求跨域的问题
a.方式一：（简单版本）
在package.json中追加如下配置
"proxy":"http://localhost:5000"
说明：
- 优点：配置简单，前端请求资源时可以不加任何前缀。
- 缺点：不能配置多个代理。
- 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
b.方式二：（配置文件）
在
src文件夹中创建一个setupProxy.js文件（文件名不可自定义）
//新版规则
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/api1', {
target: 'http://localhost:5000',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/api1': '',
},
}),
createProxyMiddleware('/api2', {
target: 'http://localhost:5001',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/api2': '',
},
})
)
}
//旧版规则（自行选择版本）
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
changeOrigin: true, //控制服务器接收到的请求头中host字段的值
/*
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
changeOrigin默认值为false，但我们一般将changeOrigin值设为true
*/
pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
}),
proxy('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {'^/api2': ''}
})
)
}
//组件文件
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
getStudentData = () => {
axios.get('http://localhost:3000/api1/students').then(
response => { console.log('成功了', response.data); },
error => { console.log('失败了', error); }
)
}
getCarData = () => {
axios.get('http://localhost:3000/api2/cars').then(
response => { console.log('成功了', response.data); },
error => { console.log('失败了', error); }
)
}
render() {
return (
<div>
<button onClick={this.getStudentData}>点我获取学生数据</button>
<button onClick={this.getCarData}>点我获取汽车数据</button>
</div>
)
}
}
扫一扫
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
