react初入学习笔记

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

回到顶部