react初入学习笔记

今天药忘吃喽~ 2022-02-19 10:57 264阅读 0赞

搭建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.多个组件使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
13.react数据循环（名称要与颜色对应）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]  
14.react的ajax请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 2]

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

[this.state.name]: http://this.state.name
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20220219/26c5fc549a6944eba5226472b44c50da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]: /images/20220219/61259ad3a2a64fff98ae772904f532ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 2]: /images/20220219/7e8af60fc0654eeeacb89f98f0bdf1a9.png