前导介绍:

facebook、2013开源。官网:https://reactjs.org/

版本v16之后,对其底层的核心算法进行了重构,引入了底层的新引擎React Fiber(16版本以后的react)

可支持服务端渲染

生态丰富:React Router、React Native、React VR、Redux(状态管理)、Jest(测试相关开发)、TypeScript等

应用:支持前端开发、服务端开发、移动端开发、vr项目开发

优点:项目容易维护,使用了虚拟DOM、相较于直接操作dom来说性能更好。

特点:API比较少

环境安装:

1. 本机React开发环境安装。

npm安装命令:sudo npm i create-react-app -g

(mac版复制上述命令到全局命令行。window版去掉前边sudo关键字进行安装。下同)

创建项目(对应目录下执行命令):create-react-app 自定义文件夹名字

(在要创建react项目的目录下,开启命令行输入上述命令。)

观察命令行,create的过程中安装了三个东西:-

①. react:安装react

②. react-dom:此库用来渲染dom,如果没有他,我们的代码没有办法渲染到dom当中,所以需要引入,使用react,必须引入react-dom。

③. react-scripts:内置的webpack,有一些命令可以让我们去使用

安装完毕后,可以使用以下几个运行的命令:

值得注意的是,npm start 没有run,但是npm run build 就需要run。

另外,npm run eject是不可会退的,他会把你所有的依赖都移除,所以谨慎使用。

2. Chrome开发者工具安装。

  a. React Devloper Tools

  b. Redux DevTools

(需要安装以下两个,自行想办法去chrome商店安装。或者可以去插件相关github下载安装包,解压后打开这个地址chrome://extensions/拖拽到chrome进行安装)

模版目录:

react项目目录

如果学过vue,跟vue的目录基本一致

□ node_modules

□ public

□ src

□ package.json

□ .gitignore

□ readme.md

重点说下public和src文件夹

· public

favicon.icon

index.html

根目录文件

manifest.json

实现一个快捷图标,配合serviceWorker实现pwa

· src

App.css

App.js

主页面

App.test.js

实现自动化测试

index.css

index.js

主入口

logo.svg

serviceWorker.js

pwa技术使用,以写网页的形式写一个app应用。帮助我们实现一个网页应用

原理:

render函数及其作用
将jsx语法放到react中进行渲染。

render接收两个参数:

参数

含义

要进行渲染的元素

一个容器、通过原生js的id选择器选择了一个#root的根元素。此元素位于index.html中

将第一个参数渲染的元素放到第二个参数元素中

render的名字不可改,不过可以利用es6的as方法进行修改:


不过ReactDOM的名字随便更改:

【ps:这都是es6的模块导入与导出的知识点啊!】

React的名字不能改,是因为render函数内部有用到React这个变量。

JSX语法会利用babel进行转化,转化成React.createcreateElement函数。

此时就必须要用到React这个变量。

React.createElement函数:

React.createElement函数接收多个参数

参数

含义

示例

备注

type

元素类型

“div”

html中已有的标签即可

props

attrs属性

{id: 'gjf'}

无时可以传null占位

children...

子元素们

'标签内的文本'

React.createElement()

可以是文本、

也可以是另一个新的函数用于生成新的标签,

子元素可以有无数个一直延伸,props后边有几个参数就有几个子元素。

重写react.createElement方法

初步体验使用:不用JSX语法转译,而是通过React.createElement自己写一段Node对象来生成html

可见,JSX语法就是React.createElement函数的语法糖。

App生成的对象打印VNode节点对象:

React.createElement模拟实现:

不引入React,而是自己写一个React让其是一个对象,对象里边有createElement方法。

第一步:搭出大致框架

此时的打印结果如下:

第二步:深入细节

离胜利只差一步的时候被卡住了,怎么把得到的dom元素字符串化呢!

使用js自带的这些转化字符串的方法都不可用:

后来发现,我把createElement和render一起实现了,

createElement只是vNode对象并返回,并不是生成字符串形式的dom标签,

也不是只让render做把React.createElement返回的dom标签直接塞到根节点里的。

render函数才是将React.createElement生成的vNode渲染成html元素并插入到html当中的!

重写:第二步深入细节

修改后实现效果,打印vNode虚拟节点如下:

接下来就需要重写render函数!

重写react-dom.render函数

render(vNode,container)

参数

含义

备注

vNode

虚拟节点

container

容器

包裹虚拟节点生成的html元素

【重写render函数】根据虚拟节点vNode生成dom元素,并插入到container中~

2019-10-13  23:27:35


React - 入门:前导、环境、目录、原理的更多相关文章

  1. react入门之使用webpack搭配环境(一)

    react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...

  2. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  3. react 入门与进阶教程

    react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...

  4. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  5. react入门(3)

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  6. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

  7. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  8. react入门学习及总结

    前言 不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫. react简单介绍 官网及中文文档 https://re ...

  9. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. React 入门实例教程【转】

    Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...

随机推荐

  1. 使“Cmder Here”菜单在Tab页开新窗口

    Cmder是一个非常好用的的控制台命令行,我们在实际使用的时候,经常通过如下指令将其注册到右键菜单: Cmder.exe /REGISTER ALL 这样就可以在任意文件夹下快速打开Cmder,并且能 ...

  2. Oracle的创建表空间及用户

    学习笔记: 1.创建表空间 --创建表空间 create tablespace thepathofgrace datafile 'c:\thepathofgrace.dbf' size 100m au ...

  3. 获取PostgreSQL数据库中得JSON值

    在PostgreSQL数据库中有一列为JSON,要获取JSON中得数据可以用下面sql: select orderno as OrderNo ,amount as Amount ,ordertime ...

  4. 前端通过js获取微信公众号用户的唯一标识符openId

    微信公众号程序开发的时候,获取用户信息的时候,需要用到用户的openId,openId是微信用户的唯一标识符,这个操作可以后台实现也可以前端实现,之前项目里是通过后台来获取的,好像用到了一些三方的包, ...

  5. html5新增表单控件和表单属性

    表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...

  6. 开发技术--pandas模块

    开发|pandas模块 整了一篇关于pandas模块的使用文章,方便检查自己的学习质量.自从使用了pandas之后,真的是被它的功能所震撼~~~ 前言 目前所有的文章思想格式都是:知识+情感. 知识: ...

  7. nginx 反向代理时丢失端口的解决方案(转)

    今天,配置nginx反向代理时遇到一个问题,当设置nginx监听80端口时转发请求没有问题.但一旦设置为监听其他端口,就一直跳转不正常:如,访问欢迎页面时应该是重定向到登录页面,在这个重定向的过程中端 ...

  8. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

  9. electron项目中使用js web worker时,new worker(path)路径问题

    如题,在new worker时需要传入js文件路径,可是在electron环境中使用出现问.同目录下,recorder.jsworker.js recorder.js中调用 var path = '. ...

  10. android studio学习---菜单栏BUILD功能

    项目构建: 1.构建项目 2.重构项目 3.签名打包