React 学习第一天-2018-07-21

React 学习第一天

1.Dom 和虚拟Dom

Dom 是浏览器中实际存在的，虚拟Dom是框架中的，是利用JS代码来模拟DOM。

虚拟Dom 是实现页面的实时更新。

Dom树，一个网页的呈现过程，

1.浏览器请求，拿到代码，

2.浏览器在内存中解析DOM结构，并且在内存中渲染出一颗内存树

3.浏览器把DOM 树，呈现到页面上。

如何获取到新旧DOM 树，从而实现DOM树的对比。

1.浏览器中没有自带的相关API，

2.程序员可以手动模拟新旧两颗DOM树，这样就可以实现相关的对比，

用JS 对象模拟这个对象

//DOM叔

var div = {

tagName : 'div',

attrs : {

id : 'mydiv',

title : '说实话',

'data-index' : '0'

childrens : ['杰哥很帅'],

{

tagName :'p',

attrs : {},

childrens :['这个是P标签']

}

什么是虚拟DOM树：利用JS的对象形式，来模拟页面上DOM的嵌套关系，虚拟DOM是JS中的对象

程序员模拟的两颗新旧DOM 树，就是React 中DOM 树的概念，

React 中的虚拟DOM概念: 1. 本质，使用JS对象，来模拟DOM元素和相关嵌套关系，2.目的，实现页面元素的高效更新。

2.Diff 算法。different .对比前后相关的变化。before 和 after

2.1tree diff 新旧两颗DOM 树，逐层大体对比，

2.2 component diff 每一层中的组件对比，

2.3 element diff 每一层的元素对比

3.创建webpack 4.X项目

3.1 基本的相关流程

第一步：快速初始化一个项目，初始化命令：npm init -y 初始化一个项目，

第二步：建立相关文件夹和目录。src 源代码目录和dist 产品目录（发布好的产品放这个里面）

第三步：创建index.html

第四步：使用cnpm i webpack -D 安装webpack 4.2.0 注意版本。

第五步：还要安装 cnpm i webpack-cli -D 2.0.13

3.2 VS初始化一个html 页面。先输入！,然后按下tab键。

3.3 cnpm i wbpack -S -S 和 -D d

安装 cnpm . npm i cnpm -g 全局安装一个cnpm

3.4 直接运行webpack 打包命令，失败。原因是相关配置没有配置好。需要建立一个webpack.config.js 文件，进行相关的配置。

3.5 还是失败，因为是默认配置为index.js 我写的是main.js

3.6 webpack 4.X 提供了约定大于配置的概念。目的是为了减少这个配置文件的体积。约定了打包的入口文件是 ‘src/index.js ‘ ，打包的输出文件的 ‘dist/main.js’.但是是可以修改的。

3.7 webpack 4.X 中，新增了node 选项，主要是压缩还是不压缩，起到这工作。3.X中是没有这个功能的。

【注】

ES 6 代码可能暂时不能支持，但是需要配置babel 就能支持，建立一个bebelrc 文件就行。

4.运行一次就要重新打包一次，很麻烦，因此需要自动化打包，那么就安装webpack-dev-server 包，进行相关配置，自动化打包。

4.1 cnpm i webpack-dev-server -D

4.2 进行配置。package.json 中，在脚本中配置。

“dev” : “webpack-dev-server ”

这里还可以配置其他的：

"dev" : "webpack-dev-server --open --port 3000 --hot"

--open

--port

-- hot

-- host

--progress

--compress

4.3 main.js 已经托管到了内存当中，但是index.html 首页还没有托管到内存中，需要进一步完善。需要安装新的包。

4.3.1 cnpm i html-webpack-plugin -D

4.3.2 在webpack.config.js 中进行配置。

第一步，导入 const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

第二步，进行导入包的配置，

第一步，生成对象实例

const htmlPlugin = new HtmlWebpackPlugin ({

template : ’path.join()’ , //源文件地址.其中。path.join()用于进行路径拼接的，__dirname 表示当前路径的一个常数参数。

filename : ‘’ //目的路径地址，

})

第二步，然后到 module 中进行配置，plugins : [ htmlPlugin ]

5.React 学习。

5.1 安装包 cnpm i react react-dom -S -S 代表从开发到上线都需要用到的东西，

react 创建组件和虚拟DOM 的

react-dom 专门进行DOM 操作的，就是进行渲染，ReactDOM.render();

5.2 进行相关的配置。

//1.导入包名。

import React from 'react' //创建组件，创建虚拟DOM，生命周期的相关，

import ReactDOM from 'react-dom' //渲染到页面展示相关，

//2. 创建虚拟的DOM 元素，

//第一个参数，创建元素的标签类型，

//第二个参数是节点的属性，

//第三个参数是标签的子元素，或者内容

const h1= React.createElement('h1',{id : 'h1',title :'h'},'这个想试图创建一个H1');

//3.把虚拟DOM 渲染到页面上。

//第一个参数，渲染谁，

//第二个参数，渲染的容器，

ReactDOM.render(h1 ,document.getElementById('app'))

//第四步，页面中放一个DOM 元素

在React 中一切皆是用js 对象来表现的，

6.DOM 元素之间的嵌套，

把相关的标签元素当作子节点挂载在相关的标签上。

7.js 中写html 代码，不能解析，那么则需要安装babel 解析器。在js 中混合写入类似于html 的语法，叫做JSX 语法。符合XML 规范的JS 。

JSX 的本质，还是在运行的时候转换成了 createElement的形式，

第一步，配置beble 等包。

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

cnpm i babel-preset-react -D

第二步，在webpackconfig 中配置loader 配置项

module : { //webpack 默认只能处理 .js 后缀文件，其他的需要安装包loader进行处理，

rules :[ //第三方匹配规则，

{test : /\.js|jsx$/,use : 'babel-loader',exclude : /node_modules/}

//千万别忘记添加排除项

]

}

第三步、配置相关的.babelrc配置文件

{

"presets" : ["env","stage-0","react"],

"plugins" : ["transform-runtime"]

}

8.JSX 语法学习

//上面这个方式比较复杂，不人性化

//const h11= <div>这个是一个div</div>，但是不能解析，需要相关的包，需要使用bable 进行转换。

let a = 10 ///等价于 const a = 10

let str = '您好，刘送杰同学';

const h1 = <h1>这个是一h1</h1>

ReactDOM.render(<div>

{a}--<hr/>{str}

<hr/>{h1}

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

JSX 就是可以在JS 中运行HTML，相关变量用{}括号包裹起来，然后进行相关的运行。

并且React 中的相关元素标签必须是闭合的。

10.

11.

React 学习第一天-2018-07-21相关推荐

【跃迁之路】【531天】程序员高效学习方法论探索系列（实验阶段288-2018.07.21）...
@(跃迁之路)专栏 [跃迁之路]奖励金计划正式开始从2018.7.1起,[跃迁之路]奖励金计划正式起航,从今以后,每月1日,我会将自己个人上月收入的1%计入[跃迁之路]奖励金池,积累到足够金额后,将 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
网络爬虫学习第一弹：urllib库使用
小道之前有学过一点爬虫,但是面对越来越严峻的就业形势,为了提高自身竞争力,决定系统的学习一下爬虫.用的是崔庆才大大的书.写博作为自己的学习笔记,方便以后复习.欢迎高人补充赐教!小道感激不尽! 网络爬虫 ...
2018.07.19 仿优酷网页小项目
时间:2018.07.19 大一下学期暑假地点:成都-实习项目类型:HTML+CSS仿优酷网页制作时间:两天网页源码: <!doctype html> <html> & ...
RedHat6.5虚拟机架设Redis和Kafka伪集群（2018.8.21最新重要补充！）
架设Redis: 虚拟机架设,桥接模式下要保证实体机能上网,这样虚拟机才会分配到一个ip(这里是192.168.43.105),方便下面的集群配置每个节点ip,伪集群都设置成一个, 但要保证这个ip网 ...
react 学习路线_2018 React JS路线图
react 学习路线成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...
python学习第一天 -----2019年4月15日
第一周-第06章节-Python3.5-第一个python程序 #!/usr/bin/env python #-*- coding:utf-8 _*- """ @auth ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
2019 年 React 学习路线图
作者 | javinpaul 译者 | 无明之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发 ...

React 学习第一天-2018-07-21

React 学习第一天-2018-07-21相关推荐

最新文章

热门文章