用ipv6地址做网站访问,wordpress适合做企业站,个人网站可以做点什么,宁波网站建设报价初始化React脚手架
前期准备 1.脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置#xff08;语法检查、jsx编译、devServer…#xff09;2.下载好了所有相关的依赖3.可以直接运行一个简单效果 2.react提供了一个用于创建react项目的脚手架库…初始化React脚手架
前期准备 1.脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置语法检查、jsx编译、devServer…2.下载好了所有相关的依赖3.可以直接运行一个简单效果 2.react提供了一个用于创建react项目的脚手架库: create-react-app 3.项目的整体技术架构为: react webpack es6 eslint 4.使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
全局安装工具
首先要在全局安装create-react-app推荐使用yarn来安装因为react和yarn都是facebook出的。但是大部分人用的npm也是完全可以这里用npm演示
全局安装react脚手架工具
npm i -g create-react-appi代表installg代表global全局create-react-app代表react脚手架
安装后查看版本
D:\WebProject\ReactProjectnpm create-react-app -v
6.14.16我们依靠这个就可以在想要的目录下面创建react工程
安装脚手架
切换到想要创建脚手架的目录 使用命令create-react-app 工程名字 名字仅限英文不要用特殊字符
安装完毕之后可以看到React提示的四个命令
npm start 启动项目Starts the development server.npm run build 打包Bundles the app into static files for production.npm test 测试模式启动Starts the test runner.npm run eject 将隐藏的webpack配置文件显示出来Removes this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!我们可以查看配置文件package.json所有启动短命令已经配置好了 输入npm start启动项目
脚手架结构 这种项目也叫SPA项目
S–singleP–pageA–app
public ---- **静态资源文件夹**favicon.icon ------ 网站页签图标index.html -------- **主页面整个项目只有这一个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
作为整个项目里唯一一个html文件也是整个app的基点有必要详细解读一下
!DOCTYPE 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/!-- 苹果手机的Safari把网页添加到主屏幕后启动图标 --link relapple-touch-icon href%PUBLIC_URL%/logo192.png /!-- 将web套壳成为安卓或ios的安装包用应用加壳技术 --link relmanifest href%PUBLIC_URL%/manifest.json /!-- 网页tab的名字 --titleReact App/title/headbody!-- 如果客户端浏览器不支持JS的运行 --noscriptYou need to enable JavaScript to run this app./noscript!-- 根标签 --div idroot/div/body
/html src目录解析
App组件相关 webpack入口相关index.js 如果是用webpack打包那么默认情况下index.js就是入口文件 const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeApp //React.StrictMode
);**上下这两种写法是完全等价的**ReactDOM.render(App /,document.getElementById(root))React.StrictMode
这个React.StrictMode并不是ES5的严格模式而是React检查子组件是否有不合理的地方
比如ref字符串或者一些过时的写法来做一些检查React.StrictModeApp //React.StrictModereportWebVitals() 作为入口的最底下的方法是用来记录网页的性能检测 至于public里的index.html是如何被src的index.js找到的这个我们不需要关心是React用webpack配置好的。所以index.html的名字是不可以随便动的动了就找不到了。
我们写一个小应用只需要去关注index.html 主页面App.js App组件index.js 入口文件这三个就够了。
注意工程里import 进js和jsx都是不需要写后缀的
写一个小demo
1.我们保持public中的Index.html不变
2.修改src下面的APP.js以及index.js文件
App.js: 【注意创建好的组件一定要暴露出去】
//创建外壳组件APP
import React from reactclass App extends React.Component{render(){return (divHello world/div)}
}export default Appindex.js: 【主要的作用其实就是将App这个组件渲染到页面上】
//引入核心库
import React from react
import ReactDOM from react-dom
//引入组件
import App from ./AppReactDOM.render(App /,document.getElementById(root))这样在重新启动应用就成功了。 我们也不建议这样直接将内容放入App组件中尽量还是用内部组件。
我们在顶一个Hello组件
import React,{Componet} from reactexport default class Hello extends Componet{render() {return (h1Hello/h1)}
}在App组件中进行使用
class App extends Component{render(){return (divHello //div)}
}这样的结果和前面是一样的。
但是由于普通的Js和组件都是js所一最好组件使用jsx去展示。
样式模块化
前面会有一个问题当css和组件越来越多的时候如果css不分层不分级就会造成混乱的场景同时带来样式冲突难以管理。
当组件逐渐增多起来的时候我们发现组件的样式也是越来越丰富这样就很有可能产生两个组件中样式名称有可能会冲突这样会根据引入App这个组件的先后顺序后面的会覆盖前面的。
同名造成的冲突 传统的引入方式 修改后的引入方式
为了避免这样的样式冲突我们采用下面的形式
1.将css文件名修改 hello.css — hello.module.css css内部不用做出修改也就是以对象形式进行css导入
注意不要用{}套css对象这玩意只是个标记不是解构出来的 会如果套了会导致对象获取不到
2.引入并使用的时候改变方式
import React from react;
//引入css此时css都以对象形式存在hello中
import hello from ./hello.module.cssexport default class Hello extends React.Component{render(){return(// 以对象形式获取cssdiv className{hello.title}Hello world/div)}
}逆天导入方法
有些项目为了避免大量导入import时导致后面有一串路径就采用这种简写方式即每个文件夹下组件名和css名字都是 index的名字这种情况下导入的路径写到包就可以了因为如果不写最后的文件名默认就导入index 就会从这种具体到文件的导入
import Hello from ./component/Hello/hello.jsx
import Welcome from ./component/Welcome/welcome.jsx变成这种导入截止到包名后缀默认用index
import Hello from ./component/Hello
import Welcome from ./component/Welcome这种导入方法肯定是不推荐的但是有的公司可能就会用到这种所以要提一下
React插件推荐 可以快速帮助你创建模板 比如输入rcc自动根据文件名创建类组件 rcc:react class component
输入rfc自动根据文件名创建函数式组件 rfc:react function component 回车就自动生成类组件了函数式组件也是一样
等等一些其他的快捷键可以自己去查非常方便
组件化编码的流程
拆分组件: 拆分界面,抽取组件 页面拆组件的过程中如果拆完了不知道叫啥名字多半是没拆好实现静态组件: 使用组件实现静态页面效果实现动态组件 3.1 动态显示初始化数据(数据驱动页面变化) 3.1.1 数据类型 3.1.2 数据名称 3.1.2 保存在哪个组件? 3.2 交互(从绑定事件监听开始)
脚手架插件
nanoId
相比于uuid更加轻量化生成一个唯一id UUID生成唯一时间戳的库 npm i uuid 库比较大 npm i nanoid库小很快安装/ yarn add nanoid
用法
import {nanoid} from nanoid
//调用直接就可以生成一个随机ID
nanoid()PropTypes
脚手架本身并不自带这个需要自行安装完成类型的约束 用npm进行安装安装后即可进行操作对传入参数进行类型约束
npm install prop-typesstatic propTypes {addTodo: proptypes.func.isRequired,
};TodoList组件Demo总结
拆分组件、实现静态组件注意className、style的写法 动态初始化列表如何确定将数据放在哪个组件的state中
1某个组件使用放在其自身的state中2某些组件使用放在他们共同的父组件state中官方称此操作为状态提升
关于父子之间通信
1【父组件】给【子组件】传递数据通过props传递2【子组件】给【父组件】传递数据通过props传递要求父提前给子传递一个函数
注意defaultChecked 和 checked的区别类似的还有defaultValue 和 value 状态在哪里操作状态的方法就在哪里
兄弟之间的组件通信用Pub-Sub订阅机制实现后续会有
脚手架集成Axios
Ajax和Axios是啥就不多说了 React本身并不带这些插件所以需要额外去引入这些插件
前期安装插件
Axios官网 npm安装Axios npm install axios npm查看版本 npm list axios 查看package里的依赖
JSX内导入
安装完成后就可以使用这种方式在JSX内导入
import axios from axios;方法里面发起Get请求其他的用法可以看官网Axios请求官网例子 startAxios () {// 这里会先看自身有没有这个路径下的资源没有的话才会去转发给代理服务器axios.get(http://localhost:3000/api/test).then((response) {console.log(成功了, response.data);},(error) {console.log(失败了, error);});};请求发起后发生跨域问题 这个时候就需要代理来解决跨域问题跨域为什么要用代理是什么请自行搜索
请求实际上是已经到了server但是Ajax引擎不许跨域的值返回所以跨域给拦下来的本质是Ajax引擎把响应给拦住了 代理服务器与server是同一个域名端口上的 只完成一个转发功能代理服务器把请求转到Server上Server的内容还给代理代理上因为没有Ajax引擎就把返回来的数据还给Client由于代理与Client同源没有跨域限制也就解决了跨域问题
代理配置
package.json配置
可以叫做全局代理因为它直接将代理配置在了配置文件 package.json 中
proxy:http://localhost:5000
// proxy:请求的地址追加的配置文件
这样配置代理时首先会在在原请求地址http://localhost:3000/api/test上访问如果访问不到资源就会转发到这里配置的地址上去请求也就是http://localhost:5000/api/test如果这时候还没有就404
说明
优点配置简单前端请求资源时可以不加任何前缀。缺点不能配置多个代理。工作方式上述方式配置代理当请求了3000不存在的资源时那么该请求会转发给5000 优先匹配前端资源
修改了配置类的操作一定要重启
setupProxy.js配置
这里不用记会查会配即可但是要注意 http-proxy-middleware 与脚手架的版本兼容
一定在src目录下 第一步创建代理配置文件 在src下创建配置文件src/setupProxy.js编写setupProxy.js配置具体代理规则 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: }}))
}两个关键配置属性详解 changeOrigin 控制服务器收到的请求头中Host的值本次请求从哪来的 true:Origin是走代理的false:Origin不走代理是走代理前的host 。 一般都是true避免后端做奇奇怪怪的check
changeOrigin设置为true时服务器收到的请求头中的host为localhost:5000
changeOrigin设置为false时服务器收到的请求头中的host为localhost:3000
changeOrigin默认值为false但我们一般将changeOrigin值设为truepathRewrite
重写请求路径(必须) { 要被替换的路径: 替换成啥 }这里的规则是去掉了 /api1
相当于去掉了 /api1 对于后端来说不会有api1的前缀这只是前端区分请求走哪个代理的标识真正发起请求给后端要把这种标识干掉当然这种做法也不绝对也可以把重写的路径换成需要的东西灵活配置即可说明
优点可以配置多个代理可以灵活的控制请求是否走代理。缺点配置繁琐前端请求资源时必须加前缀。
setupProxy.js配置过程中遇到的坑
参考文档
因为const proxy require(http-proxy-middleware);这个中间件的版本不兼容导致无法启动项目具体现象是启动后台无报错但是页面无内容
要把第一句的中间件获取换成这个项目就可以正常启动了
const {createProxyMiddleware: proxy} require(http-proxy-middleware);例子
分别根据 /api1和 /api2 这两个前缀去到不同的server上面
代码如下 可以看到都是访问自己的前端端口如果当前资源没找到就会去找上面配置的代理路径如果配了多个url前缀就会根据url前缀去不同server
class App extends React.Component {getData1 () {axios.get(http://localhost:3000/api1/search/users2).then((response) {console.log(成功了, response.data);},(error) {console.log(失败了, error);});};getData2 () {axios.get(http://localhost:3000/api2/search/users2).then((response) {console.log(成功了, response.data);},(error) {console.log(失败了, error);});};render() {return (div classNametodo-containerbutton onClick{this.getData1}获取数据1/buttonbutton onClick{this.getData2}获取数据2/button/div);}
}
export default App;执行结果 两个node的Server也都正常执行了
兄弟组件传值Pub-Sub
之前可以看到不同的组件之间传值只能通过state的状态提升来进行传值但是很明显这么做在大量数据交互的时候会变得巨难管理所以我们要引入Pub-Sub.js来实现兄弟组件传值。 PubSub组件传值官网
npm安装命令
npm install pubsub-js版本查看
npm pubsub-js -v快速起步
import PubSub from pubsub-js //引入
PubSub.subscribe(用于识别的key, function(msg, data){ }); //订阅
PubSub.publish(用于识别的key, data) //发布消息注意 适用于任意组件之前的消息沟通 谁用谁接谁传谁发
特别注意
一定要先开启监听再发布要不然发半天没人听发了也没有用
发布消息publish
消息发布第一个参数订阅key后续订阅会用到第二个参数是值下面这两个都是完全可以的传值方式
PubSub.publish(MY TOPIC, hello world!);
PubSub.publish(MY TOPIC, { info: info });还有一种同步发布但是这种性能略强但是不推荐但有可能出现安全问题慎重。用上面那两个就够了
PubSub.publishSync(MY TOPIC, hello world!);比如这种就可以传入对象进去发布给obj-key的这个消息订阅方 注意这里传入对象不要用展开符
订阅消息subscribe
// msg是必须接受的如果实在不想接受可以传个占位符
// var mySubscriber function (_, data)
var mySubscriber function (msg, data) {console.log(msg, data);
};// 生成一个token是为了后续停止订阅用的有专门api来关闭订阅
var token PubSub.subscribe(MY TOPIC, mySubscriber);// 关闭订阅可以用在组件卸载这种
PubSub.unsubscribe(token);也可以用箭头函数这两种写法是完全等价的
var mySubscriber function (msg, data) {console.log(msg, data);
};// 生成一个token是为了后续停止订阅用的有专门api来关闭订阅
var token PubSub.subscribe(MY TOPIC, (msg, data){// 打印出来的msg就是订阅keyconsole.log(msg, data)
});在实际代码中加入发现token作用域出现问题了所以要改一下 用this修改一下再用箭头函数优化一下
代码示例 三个组件集成在一个文件里实现测试
import React from react;
import PubSub from pubsub-js;
import ./App.css;// 一定要先开启监听再发布要不然发半天没人听发了也没有用
class PublishInfo extends React.Component {publishInfo () {var obj { info: info };PubSub.publish(publish-key, obj);};render() {return (divbutton onClick{this.publishInfo}publishInfo(后开启发布)/button/div);}
}// 一定要先开启监听再发布要不然发半天没人听发了也没有用
class SubscriptInfo extends React.Component {subScriptInfo () {this.token PubSub.subscribe(publish-key, (msg, data) {// 这里只接受一个data也是可以的console.log(msg, data);});};unsubscribeBeforeUnmount () {// 模拟组件卸载前函数暂停监听。当然放在生命周期里面也可以console.log(tokenID:, this.token, PubSub.unsubscribe(this.token));};render() {return (divbutton onClick{this.subScriptInfo}subScriptInfo(先开启监听)/buttonbutton onClick{this.unsubscribeBeforeUnmount}模拟卸载组件(最后)/button/div);}
}
// 创建并暴露App组件
class App extends React.Component {render() {return (divSubscriptInfo /PublishInfo //div);}
}
export default App;极端场景 这种从F组件给C组件传值只要key是一样得就可以通信到所以跨组件传值非常方便
Fetch发送请求扩展
首先 fetch 也是一种发送请求的方式它是在 xhr 之外的一种我们平常用的 Jquery 和 axios 都是封装了 xhr 的第三方库而 fetch 是js官方自带的库也是XMLHttpRequest的升级版同时它也采用的是 Promise 的方式大大简化了写法
由于是js内置所以甚至可以在控制台运行
在代码里如何使用呢 fetch(https://api.github.com/users/ruanyf).then((response) response.json()).then((json) console.log(json)).catch((err) console.log(Request Failed, err));搞个按钮触发一下fetch就可以用了 它的使用方法和 axios 非常的类似都是返回 Promise 对象但是不同的是 fetch 关注分离它在第一次请求时不会直接返回数据会先返回联系服务器的状态在第二步中才能够获取到数据
我们需要在第一次 then 中返回 response.json() 因为这个是包含数据的 promise 对象response.json()是一个异步操作取出所有内容并将其转为 JSON 对象。再调用一次 then 方法即可获取到对象
但是这么多次的调用 then 并不是我们所期望的相信看过之前生成器的文章的伙伴已经有了想法。
我们可以利用 async 和 await 配合使用来简化代码
可以将 await 理解成一个自动执行的 then 方法这样清晰多了
async function getJSON() {let url https://xxx;try {let response await fetch(url);return await reasponse.json();} catch (error) {console.log(Request Failed, error);}
}最后关于错误对象的获取可以采用 try...catch 来实现
关于 fetch 的更多内容
强烈推荐阮一峰老师的博文fetch
