初探react(一)
我们学习react首先是要了解react是什么,以及他的特点。
React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网站,
拥有较高的性能,代码逻辑非常简单,React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React的特点有:1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
使用 create-react-app 快速构建 React 开发环境


在浏览器中我们就可以看见

我们修改app.js里面文件如下

我们再看看浏览器会出现什么

我们还可以通过直接引用cdn的方式来进行开发
其中react.min.js - React 的核心库,react-dom.min.js - 提供与 DOM 相关的功能,babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我
们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以
让源码的语法渲染上升到一个全新的水平。

但是需要注意的是
在浏览器中使用 Babel 来编译 JSX 效率是非常低的。我们需要使用 JSX,则 标签的 type 属性需要设置为 text/babel
初探react(一)的更多相关文章
- 初探React,将我们的View标签化
前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...
- 初探react
知道这个框架有一段时间了,可是项目中没有用到,也懒得整理,最近两天比较清闲,又想起了它.好了,废话不多说了,都是干货. react是个什么框架? 为什么用react? react 的原理 react有 ...
- 初探React与D3的结合-或许是visualization的新突破?
自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- React事件初探
作者:朱灵子 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序 ...
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- Python爬取CSDN博客文章
0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.win ...
随机推荐
- Python_函数的镶嵌和作用域链_26
def max(a,b): return a if a>b else b def the_max(x,y,z): #函数的嵌套调用 c = max(x,y) return max(c,z) pr ...
- last individual reading task 12061183叶露婷
http://www.cnblogs.com/yltyy/p/4025426.html 1.Different people deserve different tasks; Once team ro ...
- Linux内核分析作业第八周
进程的切换和系统的一般执行过程 一.进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用sch ...
- <四则运算>第二次冲刺
这一次冲刺的主要内容是完善我们的界面,是我们的APP界面更规划更标准一点, 然后还要添加一些新算法. 距离客户的需求已经一半了. 代码正在完善中,稍后上传...
- hadoop伪分布式安装之Linux环境准备
Hadoop伪分布式安装之Linux环境准备 一.软件版本 VMare Workstation Pro 14 CentOS 7 32/64位 二.实现Linux服务器联网功能 网络适配器双击选择VMn ...
- Rabbitmq vs. kafka
https://mp.weixin.qq.com/s/2i_9TWoF3TsJvG6Dj_75vw http://www.cnblogs.com/valor-xh/p/6348009.html htt ...
- Java的Spring内实现的mini版内存"计数器"功能
工期紧急,不让用Redis,自己实现了一个Spring内的mini版内存"计数器"功能,很简陋,和业务耦合太紧密,需要改进. public Long getCreationCoun ...
- Appium学习笔记3_Genymotion模拟器安装
如果你已经配置好了安卓的运行环境,也配置好了自带的模拟器AVD,而且也launch了你的安卓模拟器,那么我相信你是不再愿意launch安卓模拟器第二次了,因为实在是太卡了(当然如果你电脑的配置够高,你 ...
- 使用DataContext和ItemsSource将数据源绑定到ListView上的区别
在最近的一个项目中,将DataView类型的数据源绑定到ListView控件时,发现当DataView的内容发生变化时,前台的ListView控件的内容并没有发生改变,在这里我先贴出前台要绑定数据源的 ...
- (String)强制转换、toString()和String.valueOf()的区别
String:毫无疑问,这种就是强转形式,简单方便,效率高.java程序员可能看到效率高或许有些激动,但是它有他的不好,那就是局限性.在java的世界里没有什么东西是没有缺点的,总有一些好的方面同时也 ...