React 第一天

第一天 从webpack到babel再到React.js

Vue是如何实现组件化的:

通过.vue文件，来创建对应的组件:

·template 结构

·script 行为

·style 样式

React如何实现组件化:

React中有组件化的概念，但是，并没有像vue这样的模板文件。

React中一切都是以JS来表现的;因此要学习React，JavaScript要合格。

为什么要学习React

1. React设计很优秀，一切基于JS并且实现了组件化开发的思想;

2.开发团队实力强悍，不必担心断更的情况;

3.社区强大，很多问题都能找到对应的解决方案;

4.提供了无缝转到ReactNative上的开发体验;

5.很多企业中，前端项目技术选型采用的是React.js

React中的核心概念:

虚拟DOM:

DOM:浏览器中提供的概念;通过浏览器解析html标签(浏览器将html文档解析为document对象 即document object model。)，对象表示页面上的元素，并提供了操作元素的API

虚拟DOM:是框架中的概念，开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系的

+本质:用JS对象，来模拟DOM元素和嵌套关系;

+目的:就是为了实现页面元素的高效更新;

Diff算法:

 tree diff:

新旧两颗DOM树，逐层对比的过程，就是Tree Diff;

 component diff:

在进行Tree Diff的时候，每一层中，组件级别的对比，叫做component diff

·如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新;

·如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上

 element diff:

在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做Element Diff;

创建webpack4.x项目

1.运行npm init -y 快速初始化项目

2.在项目根目录创建'src'源代码目录和'dist'产品目录

3.在src目录下创建`index.html`

4.使用npm安装webpack, 运行 npm install webpack  webpack-cli -g

5.注意:webpack 4.x提供了一些约定:目的是为了尽量减少配置文件的体积

·默认约定了;

·打包的入口是src -> index.js

·打包的输出文件是dist -> main.js

在命令行中输入webpack,就会进行默认的打包的操作。

1.webpack-dev-server模块的使用:

npm install webpack --save-dev

npm install webpack-dev-server --save-dev

npm install webpack --save-dev

npm install webpack-cli --save-dev

运行的是webpack的dev服务器

也可以这样操作

npm run dev

通过访问localhost:8080/main.js可以看到这个打包后的文件。但是webpack-dev-server打包好的js是托管到内存中，所以在项目根目录中看不到，（可能是通过路由等操作实现的访问），我们可以认为在项目根目录中有一个看不见的main.js

*服务器会在内存中托管打包生成s，没有在物理磁盘中生成。

*不会在项目的根目录下(磁盘中)看到这个文件。

2.html-webpack-plugin插件的使用

npm install html-webpack-plugin --save-dev

https://www.npmjs.com/package/html-webpack-plugin

然后再npm run dev

React入门

1. 运行 npm install react react-dom --save

·react:专门用于创建组件和虚拟DOM，同时组件的生命周期都在这个包中。

·react-dom:专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

React.createElement 和 ReactDOM.render的使用

index.js:

//1、这两个导入的时候，接收的成员名称，必须这么写

import React from 'react' //创建组件、虚拟DOM元素、生命周期

import ReactDOM from 'react-dom' //把创建好的 组件和 虚拟DOM 挂载到页面上

//2、创建虚拟DOM元素

//参数1:创建的元素的类型，字符串，表示元素的名称

//参数2:是一个对象或null，表示当前这个DOM元素的属性props

//参数3:子结点(包括其他虚拟DOM获取文本子节点)

//参数n:其它子结点

//<h1 id="myh1" title="this is a h1">这一个大大的H1</h1>

const myh1 = React.createElement('h1',{id:'myh1',title:'this is a h1'},'这是一个大大的子结点');

const mydiv = React.createElement('div',null,'这是一个div',myh1);

//3.使用ReactDOM把虚拟DOM 渲染到页面上

//参数1:要渲染的那个虚拟DOM元素

//参数2:指定页面上的DOM元素，当作容器

ReactDOM.render(mydiv, document.getElementById('app'));

如果每次都用

React.CreateElement(<T>,props,childNodes..)，

ReactDOM.render(reactobj,element)这种写法就太复杂了,要是能像HTML标签一样书写就好了，于是React出了JSX语法, const a = <h1>Hello world<h1>,

能像写XML一样去书写元素。jsx通过使用babel转换，生成react对象。

JSX语法

1. 如何启用jsx语法?

1.安装babel插件

·运行npm install

babel-core    //babel核心

babel-loader  //babel loader

babel-plugin-transform-runtime  --save-dev

//babel转换插件运行时

·运行npm install

babel-preset-env //preset env

babel-preset-stage-0 --save-dev //preset stage-0

·安装能够识别jsx语法的包babel-preset-react //preset react

运行npm install babel-preset-react –save-dev

2.添加.babelrc配置文件

{

“presets”:[“env”,“stage-0”,“react”],

“plugins”:[“transform-runtime”]

}

3.添加babel-loader配置项

module:{

rules:[

{

test:/\.js|jsx$/,

use:’babel-loader’,

exclude:/node_modules/}

]

}

16.在JSX中书写JS代码

结论:变量要用{ }包裹起来

17.将普通字符串数组，转为jsx数组并渲染到页面上

结论:通过map来输出

index.js:

import React from 'react'

import ReactDOM from 'react-dom'

let a = 10;

let str = '你好，中国';

let bool = true;

let title = '999';

const h1 = <h1>红火火恍恍惚惚</h1>

const arr = [

<h2>这是h2</h2>,

<h3>这是h3</h3>

];

const arrStr = ['毛利兰','柯南','小五郎','灰原哀']

// 数组的 map 方法

const res = arrStr.map(item=> <h3>{item}</h3> );

//1.看到这个标签把它想象成是一个对象，而不是一个标签

//XML要比HTML严格多了，标签必须闭合

//什么情况下需要使用{}呢?当我们需要在JSX控制的区域内，写JS表达式了，

//则需要把JS代码写到{}中

ReactDOM.render(<div>

{ a+2 }

<hr/>

{ str }

<hr/>

{ bool ? '条件为真' : '条件为假' }

<hr/>

<p title={title}>这是p标签</p>

{ h1 }

<hr/>

{ arr }

<hr/>

{ res }

<hr/>

</div>,document.getElementById('app'));