使用脚手架搭建开发环境
npm install create-react-app -g 下载全局的脚手架 create-react-app -V 查看版本号 create-react-app project(项目名字) 创建项目下载完后会有一个project文件夹,里面的结构目录如下:
进入project项目文件后,执行npm run eject可以暴露出react的相关配置文件
npm start启动项目
react中的组件 函数式组件 类组件 组件首字母必须要大写
函数式组件 创建的时候声明一个函数 必须返回一个虚拟dom在views 新建home文件夹→Home.js Me文件夹→Me.js 到App.js里:引入组件 打开页面查看,成功渲染出来:
类组件 创建一个类 继承React.Component类 自带一个render函数views下新建classComponent.js文件: 和函数组件一样的方式去使用,App.js里去引入并使用组件
注意事项
导出组件的时候不能加()小括号
每一个组件内部只能有一个最大的盒子
函数式组件 一个函数就是一个组件,return一份DOM 特点: ①没有生命周期,也会被更新并挂载,但是没有生命周期函数 ②没有this(组件实例) ③没有内部状态(state)
类组件 有this,有生命周期,有内部状态(state)
如果你的组件没有涉及到内部状态,只是用来渲染数据,那么就用函数式组件,性能较好