使用React开发订单列表页及其评价模块开始时间 20181028，结束日期 20181028 在线演示地址: https://jiangjiesheng.gitee.io/react-demo-orderlist/一、创建工程1.1 使用脚手架创建工程npx create-react-app react-demo-orderlistSuccess! Created react-demo-orderlist at F:\workspaces\sublime3\react-demo-orderlist\react-demo-orderlistInside that directory, you can run several commands:mo 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 Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing: cd react-demo-orderlist npm startHappy hacking!直接使用npm start来启动一下项目特别注意设置ssh后还提示需要密码记得不要少了(设置ssh需要在git bash中执行，windows的cmd环境不支持ssh-keygen命令)ssh-add ~/.ssh/id_rsa ssh-add -l #仍然没有解决问题二、规划目录及开发2.1 操作步骤创建src/components文件夹创建src/components/Header文件夹创建src/components/Header/index.js文件创建src/components/Header/style.css文件在index.js中输入rcc，快速创建出react基本代码结构并将组件名重命名为Header继续创建App、OrderList、OrderItem文件夹目录【可以把OrderItem放在OrderList文件夹下】将App.css、App.js、App.test.js 都移动到App文件夹中并将App.css、App.js重命名为style.css、index.js修改启动src/index.js中的引用路径并删除import * as serviceWorker from './serviceWorker';根据浏览器中的报错提示修改页面中引用路径2.2 OrderItem以及OrderList组件开发使用BEM方式命名css解析绑定字段从父组件传递属性字段字段判断绑定OrderList中使用数组的map方法遍历注意绑定key 以及代码注释语法src/components/OrderList/index.js中引用OrderItem组件src/components/App/index.js中引用OrderList组件2.3 Header开发src/components/App/index.js中引用Header组件2.4 模拟ajax请求json资源放在public文件夹下在OrderList的componentDidMount () 钩子周期函数中调用apicomponentDidMount (){ fetch('/mock/orders.json').then(res => { //Promise对象 // console.log(res) if(res.ok){ // 包装对象中的值,不是api中的字段 res.json().then(orderList=>{ this.setState( { orderList } ); }) } }) }2.5 评价功能的样式代码在OrderItem组件中2.6 评价功能的点击代码在OrderItem组件中使用es6的箭头函数保证函数中的this执行当前组件的实例注意子组件OrderItem向父组件OrderList传值# 子组件OrderItem |
有任何疑问或技术合作都可联系我
微信：yanfahezuo 【推荐】
QQ：596957738
加我微信
