react学习之路

注意：react用ant-design,vue用element-ui
1.创建react项目：
    npx create-react-app <项目名>
    启动项目：cd <项目名>
            npm start
2.解读package.json：
    dependencies: 指定项目运行所依赖的模块，即：开发版和发布版都需要的依赖。
    devDependencies:指定项目开发所需要的模块，即：开发版需要但发布版不需要，
                    例如关于测试的、文档类的。
    npm install <package_name> --save 表示将这个包名及对应的版本添加到 package.json的 dependencies
    npm install <package_name> --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies
3.修改react项目的端口号：
(1).隐藏项目的配置下的操作：
    在node_modules文件夹里的可以看到react-scripts文件夹,在scripts下找到start.js,
    command+f 搜索3000,修改成想要的端口号
(2).暴露项目的配置下的操作：
    暴露项目配置：创建完成后(不可进行任何操作)进入目录下,npm run eject
    相比于隐藏项目配置，会多出来两个文件夹：config,scripts。
    在scripts下的start.js中可以修改端口号
4.在react中标签一定要闭合，否则会报错：Unterminated JSX contents
5.碰到一个警告，原因是有些标签嵌套某写标签是不符合规范的。例如：
 Warning: validateDOMNesting(...): <h1> cannot appear as a child of <h1>
6.(半解决)：react在<img/>的src下，相对路径正确，却无法引用图片。
百度原因：不支持在<img />标签内直接写图片的路径，即<img src="../images/photo.png"/>
百度一篇简书文章：https://www.jianshu.com/p/49e8dac4a5af
解决方案：只能把图片放在src目录下进行引用
引用方式有两种：一.import imgURL from './images/photo.png';
                <img src={imgURL} />
            二. <img src={require('./images/photo.png')} />
7.实践发现：定义一个class可以在.js文件中定义然后导出使用，也可以直接在index.js文件中定义使用
8.React 只更新它需要更新的部分
9.(实践)你同时在App.css设置body{background:blue;}和index.css设置body{background:green;}
index.html的body会显示蓝色，因为就近原则。
App.css组件样式   index.css全局样式
10(实践知识点).在APP.js中引用自己定义的组件，也需要使用'./'，例如：
import './Person/Person.js';
原因：加上'./'是为了和系统提供的进行区分。
11(实践知识点). {props.children}  得到父亲双标签下的内容
定义事件函数，加上()会自动运行函数，所以我们是不加()的。
改变state有两种方法：箭头函数，bind(这个经常用)
12.(实践知识点)不管父子组件中的哪个，绑定事件都要写{}，而不是''
父子组件函数触发：子组件的属性值等于父组件的属性==>可以实现双向数据绑定
13(踩坑点).import React from 'react';  React首字母必须大写
14(***).一定要仔细，不要把props中的属性名写错！如果某一行报错了，记得找父子组件通信传值.
Cannot read property 'XX' of undefined 这种报错，找XX的上一级.
15.(知识点). 有状态组件是一个类，拥有生命周期的函数。
            无状态组件是一个函数，没有生命周期的函数。
如果你想要存储一些数据，并且对这些数据进行增删改查，你需要使用有状态组件.
如果你只是单纯处理一些逻辑， 可以使用无状态组件。如果想用数值可以传递。
就实现了通过父级来管理子级。
有状态组件使用this.props来获得相应的数据，无状态组件不能使用this。
16.(快捷键) 输入rcc然后tab键,可以快速生成
17.(增长知识面):fetch 是浏览器内置对象，所以我们不用安装包，直接使用
使用流程
    fetch ...
        then => res.json()
        then => data
注意需要执行一次 res.json() 方法才能获取数据。我写成了res.json，导致有错误
18.(安装浏览器react调节工具).:
npm run build:extension:chrome 
并且会在你的项目目录中生成一个新的文件夹
react-devtools -> shells -> chrome -> build -> unpacked文件夹