【九月打卡】第11天 React零基础入门到实战，完成企业级项目简书网站开发 第一、二讲

课程名称： React零基础入门到实战，完成企业级项目简书网站开发

课程章节： 课程导学+React初探

主讲老师： Dell

课程内容：

今天学习的内容包括：
React.js 和vue.js对比：

1. React.js更加灵活；
2. Vue.js的api更多，较为简单

react设计理念：all in js （在js中可以引入css以及用jsx模块的方式编写代码）

react创建的项目中public文件夹下放置一些静态文件以及图片等

react创建的项目中src文件夹下放置项目的源码文件

registerServiceWorker 可以将用户浏览的网页保存在浏览器中，在中间断网的情况下可以继续访问网页

课程收获：

1.1 心得：

课程内容包括

1. 基础内容→环境搭建→基础语法→原理进阶→动画
2. Redux→Redux进阶
3. 实战项目→环境搭建→Header→首页→详情页
4. 登录校验→上线

2.1 心得：

React 16版本之后称之为 React Fiber
这么称是因为在React 16版本之后，在底层在事件循环中加入了优先级这样的概念，可以在循环的碎片事件可以执行高优先级的交互。

2.2 心得：

使用react有两种方式：通过script引入通过搭建脚手架 (creat react app

脚手架：辅助工具，帮助我们实现代码编译然后给浏览器执行
环境搭建：
方式一：（授课安装方式）

1. npm install -g creact-react-app
2. creact-react-app react-app
3. cd react-app
4. yarn start
   方式二：（官方文档推荐）
5. npx create-react-app react-app
6. cd react-app
7. yarn start
   (注：npx基于npm5.2+，如已全局安装create-react-app，需卸载，以保证安装的npx使用的create-react-app都是最新版本)

2.3 心得：

yarn.lock 或者package-lock.json :项目依赖安装包,版本号限制，无需动这个文件
gitignore有些文件不想放到git仓库里，可以写在gitignore里。

node_moudles 第三方依赖包
public–> favicon.ico 小图标

noscript 网页禁止script 容错

src/index.js是项目的入口文件

react–all in js 在js中可以引用css

reportWebVitals–PWA 用户浏览过网页，之后在没有网的情况下用户也可以看到之前浏览过的页面。

Pwa => progressive web application

manifest.json 配置 Pwa使用

App.test.js 自动化测试的文件

2.4 心得：

定义一个react组件，如下：

import React, {Component} from 'react';

class App extends Component {

    render(){

        return (

            <div>test</div>

        );

    }

}

render()函数返回什么 组件就展示什么内容

ES6的解构赋值

//import {Component} from 'react';

//等价于

//import React from 'react'

//const Component = React.Component

import React, {Component} from 'react';

ReactDOM的意义：把react生成的一些组件内容挂载到页面的某一个节点之下，让它显示出来

jsx语法：

并不是直接写App，而是以<App />标签的形式显示

ReactDOM.render(<App />,document.getElementById('root'));

注意：如果使用了jsx语法，那么一定要在对应文件引入react

（import React from 'react'）

在react之中，render函数之中的标签其实也是jsx语法，所以一定要引入react语法进行编译识别

组件中，render中定义内容，然后export default暴露render的类名；引用组件时，直接import 组件的相对位置，而后使用jsx语法，引用组件

挂载节点，使用ReactDom，把组件生成的内容，挂载到页面的（index.html）某个节点

2.5 心得：

jsx是基于js的，jsx不需要加引号，直接写标签即可

在jsx中使用自定义组件，组件必须以大写字母开头

在jsx中，以大写字母开头的一般都是组件，小写的是标签