启动问题

之前启动react-app：npm start是没问题的，可以跨域请求登录。但在写完Header组件时，就启动不了。后来研究一下，是在package.json加了代理。但我不加，有不能访问后端程序。

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

找到有人跟我一样，有两个办法。我直接是安装"react-scripts": “4.0.3”，但很多警告，不管（能运行就可以）

代理

同源政策，需解决ajax跨域请求问题。

react应用中，webpack-dev-server（打包代码到内存，启动服务器）同时实现了代理服务器，所以只需在package.json配置即可。在react中，我们是是向3000端口发生ajax，中途代理服务器转发给4000端口。

科普：无论是前台应用（react）还是后台应用（node.js）的运行都需要服务器的存在

Admin路由组件结构

Content这块区域展示二级路由组件

LeftNav组件

知识点一： 普通组件想要拿到当前路径

知识点二： 如果请求路径为'/'时，匹配一级路由后，匹配二级路由会重定向。此时LeftNav的render() 其实是调用了两次，但是defaultSelectedKeys属性只能被修改一次。所以Menu标签应该使用selectedKeys属性

知识点三： 当前路由为子菜单，需要展开父菜单。设置展开是在Menu标签，而菜单是在Menu标签里面的函数去遍历菜单列表时才得到的。

所以在render() 前，得到菜单数据，然后根据搜索，得到当前路径的主菜单（openKey）。此时this.menuNodes不是函数，而是菜单数据。

知识点4： 通过遍历菜单列表，动态生成菜单标签

return menuList.map(item => {if (!item.children) {return (<Menu.Item key={item.key} icon={item.icon}><Link to={item.key}>{item.title}</Link></Menu.Item>)} else {return (<SubMenu key={item.key} icon={item.icon} title={item.title}>{this.getMenuNodes(item.children)}</SubMenu>)}})

Header组件

静态页面

CSS三角形
flex布局
左右盒子各占 25% 和 75%

高德天气

申请key
天气查询地址

jsonp请求解决ajax跨域的原理：
1.只能解决GET请求，非ajax请求，属于一般的get请求。实际通过< script>请求js代码，浏览器接收到的是js代码，而不是数据信息。

2.因为不是在服务器中调用函数，所以把函数的调用写在字符串当中，并返回给客户端。而客户端加载完响应内容，会被当做js代码执行。

动态页面

所需数据：
用户——在内存中可得。

时间——Date.now()，需要格式化。启动循环定时器。

天气——jsonp请求（高德天气），通过回调函数来获得响应数据。处理异步时，统一使用promise对象。（可把数据传到组件）

所在菜单名——根据当前路径（包装为路由组件），搜索菜单列表。

退出功能——Modal对话框（antd）（清除数据、跳转链接。与后台无关），点击自定义的LinkButton按钮触发事件。

跟着做react项目（至P44）相关推荐

vue 关闭log_vue或react项目生产环境去掉console.log的操作
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了 ...
console react 去除_vue或react项目生产环境去掉console.log的操作
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了 ...
react项目中播放音频时扬声器图标动画效果
今天在做react项目时,一个小的功能需求:点击播放音频时扬声器图标要实现动画效果. 起初我做出来的效果是第一次点击播放音频时,音频图标会有动画效果,但继续点击动画效果却没有了. 后面我的做法如下: ...
react项目中遇到的几个问题
react项目中遇到的几个问题前言由于我之前有过react经验,同事之前做react项目时问了我一些问题,其中几个问题虽然常见,但时间长了还是容易忘记,这里简单总结一下问题一: 如何保证定时器( ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
从零开始搭建一个react项目
Nav logo 120 发现关注消息 4 搜索从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
React 项目----内联样式style的使用（12）
在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式首先我们来做一个简单的页面一个评论的列表模拟数据: commentLis ...

跟着做react项目（至P44）

导航