【React基础】基本环境搭建-白红宇

【React基础】基本环境搭建

阅读量：625 次

发布时间：2019-03-13

本文共 650 字，大约阅读时间需要 2 分钟。

react的基本概念

React是Facebook开发出的一款JS库 Facebook认为MVC无法满足他们的扩展需求

特点：

react不使用模板

react不是一个mvc框架

响应式

react是一个轻量级的js库

原理：

虚拟DOM react把DOM抽象成为一个JS对象

diff算法

1.虚拟DOM确保只对界面上真正发生变化的部分进行实际的DOM操作

2.逐层次的来进行节点的比较

react 2013年发布

react 开发环境的搭建

引入:

react.js 核心文件

react-dom.js 渲染页面中的DOM 当前的这个文件，必须依赖于react核心文件，引入位置位于react.js之后

babel.js （把浏览器不认识的语言转换为认识的语言） ES6转换为ES5 JSX语法(浏览器不认识)转换成JavaScript 方便当前浏览器进行代码的兼容

第一步：

下载

1.react 核心包    npm i react --save  2.react-dom      npm i react-dom --save  3.babel          npm i babel-standalone --save

npm init -y 生成 package.json 文件

在这里插入图片描述

第二步：

引入文件到.html文件

在这里插入图片描述

第三步：

1.创建dom根节点

2.在根节点下写上

注意: type=“text/babel” 一定要写上，防止报错

效果：

在这里插入图片描述

转载地址：http://cxjaz.baihongyu.com/

你可能感兴趣的文章

netty 主要组件+黏包半包+rpc框架+源码透析

Vue过渡 & 动画---vue工作笔记0014

Netty 异步任务调度与异步线程池

Netty 的 Handler 链调用机制

Netty 编解码器和 Handler 调用机制

Netty 编解码器详解

Netty 解决TCP粘包/半包使用

Netty 调用，效率这么低还用啥？

Netty 高性能架构设计

Netty+Protostuff实现单机压测秒级接收35万个对象实践经验分享

Netty+SpringBoot+FastDFS+Html5实现聊天App详解(一)

netty--helloword程序

netty2---服务端和客户端

Netty5.x 和3.x、4.x的区别及注意事项（官方翻译）

netty——bytebuf的创建、内存分配与池化、组成、扩容规则、写入读取、内存回收、零拷贝

netty——Channl的常用方法、ChannelFuture、CloseFuture

netty——EventLoop概念、处理普通任务定时任务、处理io事件、EventLoopGroup

netty——Future和Promise的使用线程间的通信

netty——Handler和pipeline