react初入学习笔记
搭建react运行环境 (先装node.js)
命令提示符(cmd)
1.安装命令react:npm install -g create-react-app
2.用cd切换到已创建的文件夹下,(例:g: 回车 cd 001/react 这样)
3.创建react项目文件名 create-react-app demo01(这个是文件名,随便取)
4.然后再demo01这个项目文件下按住shift+右击 选择“在此处打开命令窗口” 输入npm start(或者其他,例如:npm run dev之类的)
5.这样就可以运行项目了,运行后页面自动跳出来
项目文件含义
Node_modules 用于存放项目的依赖包,也就是构建这个react项目可能会用懂啊的工具
Public 文件夹中是index.html存放目录,react根页面的所在地
Src中用于存放js文件
Package.json用于记录项目信息,配置信息
学习react
1.React的index.html中,
div的id要和index.js文件中的document.getElementById(‘div1’)的id对应;
2.Js文件引入import xxx from ‘./文件名.js’ ReactDOM.render(,document.getElementById(‘div1’))对应(浅绿色要对应) 在react中,xxx的首个字母要大写(浅绿色都要)
3.在该文件名.js中,class xx extends Component{render(){return (
)}}与export default xx 要对应(红色对应)
4.在该文件名.js中,用import ‘./css文件名’引入css样式文件
5.在该文件名.js中,要给标签使用class,必须要把class改为className
6.在该文件名.js中,要使用图片,先import 随便取一个名 from ‘./图片名.jpg’ 引用图片,然后再img的src={随便取一个名} 注意:src后面不能使用””双引号,直接使用{},然后花括号里放import的名称
7.在该文件名.js中,render中的return下只能有一个父元素,其他都要被包裹在里面
8.Constructor(){}里面要先放置一个super();不然会报错(super未初始化)
9.Constructor(){}里面的this.state={name:”tom”}是在设置数据,是一个对象,在return中使用{this.state.name}就可以在页面上显示tom数据
10.注意:如果ReactDOM.render(,document.getElementById(‘div1’))这个放在该文件名.js下,那么就要class xxx extends Component对应(红色) 要与2 3区分 在</>里,首个字母要大写,不然会报错(is unrecognized in this browser)
11.标签要使用事件(例如点击事件),那么必须要在Constructor(){}里面写一个this.绑定名=this.绑定名.bind(this),这样this才能在回调函数中使用,不然会报错(cannot read property “setState” of undefined),有多个就要声明多个
12.多个组件使用
13.react数据循环(名称要与颜色对应)
14.react的ajax请求
以上是 react初入学习笔记 的全部内容, 来源链接: utcz.com/z/383900.html