初探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 ...
随机推荐
- vue-cli中的check-versions.js配置文件包括semver,chalk,shell插件的解释
本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检测node和npm版本的 直接上代码加注释 // 下面的插件是chalk插件,他的作用是在控制台中输 ...
- 【2016.3.16】作业 VS2015安装&单元测试(1)
首先说下本机配置. CPU:Intel Atom x5-z8300 @1.44GHz 内存:2GB 操作系统:Windows10 家庭版 32位 硬盘:32GB 然后开始怒装visual studio ...
- 个人阅读作业——软件工程M1/M2的总结
临近学期末,本学期的软件工程课也已经结束了,在此我对软件工程课中,我们团队M1和M2开发阶段中,我做的工作做一个总结 我是DEV,主要工作是等着上级给我分配任务,但是很多时候如果这个活我不干,其他人就 ...
- #个人博客作业week2——结对编程伙伴代码复审
General 1.程序能够顺利地运行.程序通过命令行输入,能够向对应的文件中输出符合要求的题目和答案.程序能够根据用户的不同选择,进行题目的生产或答案的校验,生成出的题目符合参数要求和项目的查重等各 ...
- 第七周 linux如何装载和启动一个可执行文件
潘恒 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.实验内容 1.预处理. ...
- 集美大学1414-团队作业2:需求分析&原型设计分数发布
1.评分标准 检查项 分数 编号 调研文档或截图 1 1 软件需求分析说明书 2 2 NABCD 2 3 描述每个成员具体分工 1 4 原型设计 2 5 编码规范 1 6 推广视频 1 7 ...
- 安装虚拟环境和Flask
一.Flask 使用前准备 一. 安装及创建虚拟环境 1. 安装虚拟环境 win + R -> cmd -> pip install virtualenv -> 出现 Success ...
- Show tree of processes in linux
pstree(1): tree of processes - Linux man pagehttps://linux.die.net/man/1/pstree How to view process ...
- PowerShell一例
(Get-WmiObject -query ‘select * from SoftwareLicensingService’).OA3xOriginalProductKey
- nodefs模块的使用demo
为什么要使用递归?因为stat本身就是一个异步的函数所有存在异步问题不能够进行循环遍历. 在使用该种方法时候需要注意的一点是必须要在箭头标记处进行数据数组的存取.否则会由于异步问题导致输出空或者其他问 ...