聊城手机网站建设费用,黑龙江建设网网站一体化平台,wordpress企业官网主题下载地址,设计师网站大全一、使用脚手架create-react-app创建项目
react脚手架 xxx脚手架#xff1a;用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置#xff08;语法检查、jsx编译、devServe…#xff09;下载好了所有相关的依赖可以直接运行一个简单的效果 react提供了一个…一、使用脚手架create-react-app创建项目
react脚手架 xxx脚手架用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置语法检查、jsx编译、devServe…下载好了所有相关的依赖可以直接运行一个简单的效果 react提供了一个用于创建react项目的脚手架库create-react-app项目的整体技术架构为reactwebpackes6eslint使用脚手架开发的项目特点模块化、组件化、工程化 创建项目并启动 全局安装npm install -g create-react-app切换到想创建项目的目录create-react-app react-demo进入项目文件夹cd react-demo启动项目npm start注意创建项目下载依赖要是特别慢可以换源create-react-app使用yarn创建react项目 public文件夹index.html介绍
二、todoList案例相关知识点
拆分组件、实现静态组件注意className、style的写法动态初始化列表如何确定姜数据放在哪个组件的state中? 某个组件使用放在其自身的state中某些组件使用放在他们共同的父组件state中官方称此操作为状态提升 关于父子之间通信 【父组件】给【子组件】传递数据通过props传递【子组件】给【父组件】传递数据通过props传递要求是父提前给子传递一个函数 注意defaultChecked和checked区别类似还有defaultValue和value状态在哪里操作状态的方法就在哪里
案例 文件目录结构 App.js app.module.css: Hearder index.jsx index.css .search {width: calc(100% - 20px);padding: 10px;}List index.jsx idnex.css ul {list-style: none;margin: 0;padding: 0;
}Item index.jsx index.module.css .li-content{display: flex;justify-content: space-between;padding: 2px 5px;
}
.del {border: none;background: none;font-size: 18px;font-weight: bold;color: red;
}Footer: index.jsx index.module.css .footer {display: flex;justify-content: space-between;align-items: center;height: 50px;padding: 10px 20px;border-top: 1px solid #ccc;
}
.count{margin-left: 20px;
}
button {width: 150px;height: 40px;background-color: rgb(255, 0, 72);border-radius: 20px;color: #fff;cursor: pointer;
}8.运行效果
三、配置代理 代理到服务器的5000端口,前端端口是3000,请求时候http://localhost:3000/students 所有3000端口下没有的资源都会转发到http://localhost:5000,如果有则不转发 配置多个代理
四、消息订阅与发布(pubSub)
安装**yarn add pubsub-js**接收组件List/index.jsx // 一挂载好就订阅消息import PubSub from pubsub-jscomponentDidMount(){this.pub PubSub.subscribe(defClick, (_, data) {this.setState(data)})}// 取消订阅componentWillUnmount(){PubSub.unsubscribe(this.pub)}发布信息Hearder/index.jsx
import PubSub from pubsub-js
PubSub.publish(defClick, {val})
