webstrom自动格式化代码
命令
js框架 MVC 安装 npm install create-react-app -g 生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/) create-react-app 项目名字 查看全局安装目录 npm root -g文件
public 存放的是当前项目的HTML页面(单页面应用放index.html即可) html 导入的地址应该写成绝对路径 %PUBLIC_URL% public的文件夹 不能用相对路径 src 项目结构最主要的目录,后期的js,路由组件都放这里 index.js 是当前目录的入口文件 react-scripts 是webpack的所有配置 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } 执行命令 npm run start /yarn startReact脚手架的深入剖析
暴露webpack配置项 为了结构的美化,把所有的webpack配置等都隐藏到了node_modules中(react-script) yarn eject 首先会提示确认是否执行eject操作,操作是不可逆转的,一旦暴露出来配置项,就无法再隐藏回去了 报错信息 Remove untracked files, stash or commit any changes, and try again. 如果当前的项目基于git管理,在执行eject的时候,如果还没有提交到历史区内容,需要先提交历史区,然后再eject才可以,否则报错 * 需要在vcs 里面commit 进行git操作 再进行 yarn eject 之后多个两个文件夹 config 存放的是webpack的配置文件 webpack.config.dev.js 开发环境下的配置项(yarn start) webpack.config.prod.js 生产环境下的配置项(yarn build) scripts 存放的是可执行脚本的js文件 start.js yarn start执行的就是这个js build.js yarn build 执行的就是这个就是 配置less yarn add less less-loader less 开发和生产都需要改 参考 https://www.cnblogs.com/esofar/p/9631657.html https://www.cnblogs.com/jayxiangnan/p/9116663.html set HTTPS=true&&npm start 开启HTTPS协议模式 set PORT=63341 修改端口号 配置sass yarn add node-sass sass-loader -D 如果yarn不能安装就用cnpm less类似一样的 { test:/\.scss$/, loaders:['style-loader','css-loader','sass-loader'], },去掉webstorm 报灰色线
Editor -> Colors & Fonts -> General , 在Errors and Warnings里把Wadk Warning里的 两项勾选去掉。
撤销工作区的修改
已修改，未暂存（撤销工作区的修改）
git reset --hardreact & react-dom
渐进式框架 我们应该把框架的功能进行拆分,用户想用什么,让其自己自由组合即可 全家桶 渐进式框架N多部分的组合 VUE全局桶(vue-cli/vue/vue-router/vuex/axios(fetch)/vue element(vant)) REACT全家桶: create-react-app/react/react-dom/react-router/redux/react-redux/axios/ant/sage/mobx react:REACT框架的核心部分,提供了Component类可以共我们进行组件开发,提供了钩子函数(生命周期函数) 所有的生命周期函数都是基于回调函数完成的 react-dom :把JSX语法(REACT特有的语法)渲染为真实DOM(能够展示的结构都叫真实的DOM) * 不推荐jsx的容器是body * 只能出现一个根元素 * 给元素设置样式类用的是className而不是class * style={{}} * jsx元素设置属性 ,属性值对应大括号中 对象,函数都可以放(也可以放js表达式) 将数据嵌入jsx中,可以嵌入变量或者直接的数据值 let; ReactDOM.render(<div> <h1>{name}</h1> <h2>{'haha'}</h2> </div>) 不能嵌入对象(代指: {} /^$/ 日期对象 函数 数据中的某一项是前面也不行) 可以嵌入基本类型值(null/undefined/布尔值都是空元素,也就是不显示任何内容) 把JSX(虚拟DOM) 变为真实的DOM(不太理解)--(8,9) 循环创建jsx元素需要设置标识key,并且在当前循环的时候,这个key需要唯一 let, data=[{id:1,title:'xxx'},{id:2, title: 'xxx'}]; ReactDOM.render(<ul style={{color:'red'}} className={'box clearfix'} OnClick={(ev)=>{ console.log(ev); }}> {data.map((item,index)=>{ return <li key={index}> {item.id} {item.title} </li> })} </ul>,root); 使用三元运算符解决判断操作(if和swich是不可以的)React是如何把jsx元素转换为真实的DOM元素并且添加到页面中
基于babel/babel-loader: 把jsx语法编译为react.create-Element这种模式
create-Element 至少有两个参数,没有上限
第一个: 标签名(字符串)
第二个:属性(没有给元素设置null)
其他:当前元素的所有子元素内容
执行create-Element 把传递的参数最后处理成为一个对象
React 组件
组件/模块管理 ,就是把一个程序划分为一个个组件来单独处理
优势
有助于多人协助开发
提高复用性
React创建组件有两种方式
函数声明式组件
基于继承component类来创建组件
src->component 这个文件夹存放开发的组件