React JS   网页应用

React Native  原生应用

React VR  VR或全景视图

React Filber是指React16之后的版本对应的React框架，对底层的核心算法进行改良，引入了一些优先级的的概念、分片的概念，使React的代码更加流畅，尤其是处理一些复杂的动画的時候

React执行的入口文件是src/index.js

registerServiceWorker是一个pwa（离线页面的內容）

App.test.js用于自动化测试

//开发环境

node

npm

全局切换镜像源：npm config set registry http://registry.npm.taobao.org

查看镜像源使用状态：npm get registry

全局切换官方镜像源：npm config set registry http://www.npmjs.org

//创建新的 React 应用

npx create-react-app appname  //新建项目
cd appname
npm start    //在项目文件夹下启动

*nodejs全局安装包在其他盘Program Files下时文件夹 解析会出现空格导致包不能安装，需要更改全局安装包的安装路径

<li key={index}  onClick = {this.handledel.bind(this,index)}

constructor(props){

  super(props)

  this.state = {

     list:xxxx

  }

}

handledel(index){

      const list = [...this.state.list]

      list.splice(index,1)

      this.setState({

          list: list

      })

}

js基础：this指向

es6语法：class-constructor 扩展运算符

组件：网页的一部分

App.js 定义react组件（定义组件的语法看一下）

index.js 项目入口文件 引入组件，通过ReactDOM库把组件渲染到index.html上

import ReactDOM from 'react-dom';

ReactDom库 将组件挂载到页面的一个节点上

比如，将App组件渲染到public/index.html文件（项目的html文件）的root节点里

public/index.html：项目的html文件

1、下载nodejs：https://nodejs.org/en/

lts - long time support 同时npm包管理工具也下载下来

2、reactjs官网：https://reactjs.org/

点击docs

点击右侧 create a new react app - create react app 创建react项目的脚手架

创建项目的命令行：

npx create-react-app 项目名

cd 项目名

npm run start  - 自动启动初始化项目

课程内容：react + redux

名词解释

react：facebook开源框架

react js 网页应用

react native 原生应用

react vr 全景式图像应用

react fiber：react16.0之后的react版本（16.1 16.2 16.3.......），因为这些版本改良了底层的核心算法，引入优先级、分片概念，使react代码运行更加流畅，尤其是处理复杂动画。

什么是 jsx 语法？

      在定义的组件中：

       1.可以直接返回视图标签不报错。

       2.外层必须要有一个根标签包裹着

       3.根标签内部可以写 js 表达式，会自动编译，js 语句会报错

       4. index.js 中 render 中引用组件时，组件名写在标签符号内。

jsx标签语法中还可以通过{}来写一下js表达式，不能写语句

从项目入口、公共组件的作用、引入组件之后组件做了什么、怎么定义一个React组件，这四部了解整个项目的过程
1.项目入口在public/index.html

2.src/index.js中引入的组件库的作用（React、ReactDOM）
React：识别组件
ReactDOM：渲染组件

3.首先我们声明一个App组件（首字母大写）使得React库识别到我们声明的是一个组件；
使用  ReactDOM自带的函数render使得组件能够渲染到页面中

注意：这里有个观点：（点、面）

页面中的每个元素都可以是个组件（也可以理解成点）；

整个页面的形式是一个个点的累积而形成的面
render函数可以携带两个参数(a,b)

a：目标组件
b：目标DOM节点

4.定义组件的方式：

第一种：class类继承的方式
列子：
import React ,{ Component } from 'react'
// 声明组件 继承React.Component类 或者可以写成class App extends React.Component{}

class App extends Component{
    render(){

        return {

                //    组件内容
            }

    }

}
export default App; //导出组件，如果不导出 外部无法使用

第二种：函数声明

function App() {

  return (

      //  组件内容

  );

}

export default App;

this指向问题

1:展开运算符[...]（es6的写法）
2：setState()

1：jsx语法允许标签结构
2：{1+3}js的表达式不能写语句

1:reactDom 引入可以渲染内容 必须包含（render）
2：组件显示内容由render 导入， app导出

父组件通过属性的形式向子组件传递参数

子组件通过props接受props接受父组件传递过来的参数

子组件如果想和父组件通信，子组件要调用父组件传递过来的方法