电子商务网站建设实验总结,wordpress外部调用插件,微信小程序搭建平台有哪些,全屋定制一般多少钱04-React脚手架 1. react脚手架入门
1).脚手架的介绍
xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置#xff08;语法检查、jsx编译、devServer…#xff09;下载好了所有相关的依赖可以直接运行一个简单效果 react提供了一个用于创建rea…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 langenheadmeta charsetutf-8 /!-- %PUBLIC_URL% 代表public文件夹的路径 --link relicon href%PUBLIC_URL%/favicon.ico /!-- 开启理想视口用于做移动瑞网页的适配 --meta nameviewport contentwidthdevice-width, initial-scale1 /!-- 用于配置浏览器页签地址栏的颜色仅支持安卓手机浏览器 --meta nametheme-color content#000000 /!-- 描述网站信息 --metanamedescriptioncontentWeb site created using create-react-app/!-- 用于指定网页添加到手机主屏幕后的图标 --link relapple-touch-icon href%PUBLIC_URL%/logo192.png /!-- 应用加壳时的配置文件 --link relmanifest href%PUBLIC_URL%/manifest.json /titleReact App/title/headbody!-- 若浏览器不支持js则展示标签中的内容 --noscriptYou need to enable JavaScript to run this app./noscriptdiv idroot/div/body
/htmlb.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.StrictModeApp //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.cssexport default class Hello extends Component {render() {return (divh2 classNametitleHello 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 (divHello//div)}可以将Hello.jsx和Hello.css文件重命名为index.jsx和index.css这样引入组件文件或者时就可以省略路径 import Hello from ./components/Hello3.脚手架配置代理——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:5000changeOrigin设置为false时服务器收到的请求头中的host为localhost:3000changeOrigin默认值为false但我们一般将changeOrigin值设为true*/pathRewrite: {^/api1: } //去除请求前缀保证交给后台服务器的是正常请求地址(必须配置)}),proxy(/api2, { target: http://localhost:5001,changeOrigin: true,pathRewrite: {^/api2: }}))}//组件文件
import React, { Component } from react
import axios from axiosexport 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 (divbutton onClick{this.getStudentData}点我获取学生数据/buttonbutton onClick{this.getCarData}点我获取汽车数据/button/div)}
}
