一、简介：

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1.1、React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

1.2、为什么使用 React?

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V（视图）。

我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

简单

仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。

声明式 (Declarative)

数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。

构建可组合的组件

React 都是关于构建可复用的组件。事实上，通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。

1.3、 React学习资源

React英文官网：https://reactjs.org/

React中文官网：https://react.docschina.org/

Github地址： https://github.com/facebook/react

极客学院：http://wiki.jikexueyuan.com/project/react/

菜鸟教程：http://www.runoob.com/react/react-tutorial.html

react.js 中文论坛：http://www.react-china.org

Webpack 和 React 小书 - gitbook：https://fakefish.github.io/react-webpack-cookbook/

1.4、AngularJS简介

AngularJS是一个前端MVVM框架。

angular的英文字面意思是：有角的; 用角测量的

AngularJS是协助搭建单页面工程（SPA）的开源前端框架。它通过MVC模式使得开发与测试变得更容易。

AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。

AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。

1.3版后不再支持IE8
1.3版后不支持全局控制器
2.0版 alpha

git仓库： https://github.com/angular/

官网： https://www.angularjs.org/

http://www.angularjs.cn/中文社区

http://www.apjs.net/ 中文网

a web framework for modern web apps

1.5、Vue.js

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API，作者是尤雨溪是中国人。

官网： http://cn.vuejs.org/

仓库： https://github.com/vuejs

易用
已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！
灵活
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能
17kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化

前端三大框架：

当前三大前端MVC框架的对比：

1.6、React入门示例

获取React

1、前往官网或者GitHub：http://react-cn.github.io/react/downloads.html

2、使用cdn

3、npm

npm install -g react-tools

1.6.1、声明式渲染

示例：

<!DOCTYPE html>
<html>
<head><title>Hello React!</title>
</head>
<body>
<div id="example"></div><script src="javascript/react.min.js"></script>
<script>React.render(//创建一个虚拟DomReact.createElement('h1', null, 'Hello, world!'),//把内容添加到example里document.getElementById('example'));
</script>
</body>
</html>

结果：

恭喜你，欢迎来到 React 的世界。

1.6.2、一个简单的组件

React 组件通过一个render()方法，接受输入的参数并返回展示的对象。

以下这个例子使用了 JSX，它类似于XML的语法

输入的参数通过render()传入组件后，将存储在this.props

示例：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一个简单的组件</title>
</head>
<body>
<div id="showMessage"></div><script src="javascript/react.min.js"></script>
<script>var HelloMessage = React.createClass({displayName: "HelloMessage",render: function() {return React.createElement("div", null, "你好， ", this.props.name);}});React.render(React.createElement(HelloMessage, {name: "汤姆先生"}), showMessage);
</script>
</body>
</html>

结果：

1.6.3、一个有状态的组件

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时间旅行</title>
</head>
<body><div id="timer"></div><script src="javascript/react.min.js"></script><script>var Timer = React.createClass({displayName: "Timer",getInitialState: function() {return {secondsElapsed: 0};},tick: function() {this.setState({secondsElapsed: this.state.secondsElapsed + 1});},componentDidMount: function() {this.interval = setInterval(this.tick, 1000);},componentWillUnmount: function() {clearInterval(this.interval);},render: function() {return (React.createElement("div", null, "经过的秒数: ", this.state.secondsElapsed," 秒"));}});React.render(React.createElement(Timer, null), timer);</script>
</body>
</html>

结果：

1.6.4、一个应用程序

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个应用程序</title>
</head>
<body>
<div id="mountNode"></div><script src="javascript/react.min.js"></script>
<script>var TodoList = React.createClass({displayName: "TodoList",render: function() {var createItem = function(itemText) {return React.createElement("li", null, itemText);};return React.createElement("ul", null, this.props.items.map(createItem));}});var TodoApp = React.createClass({displayName: "TodoApp",getInitialState: function() {return {items: [], text: ''};},onChange: function(e) {this.setState({text: e.target.value});},handleSubmit: function(e) {e.preventDefault();var nextItems = this.state.items.concat([this.state.text]);var nextText = '';this.setState({items: nextItems, text: nextText});},render: function() {return (React.createElement("div", null,React.createElement("h3", null, "TODO"),React.createElement(TodoList, {items: this.state.items}),React.createElement("form", {onSubmit: this.handleSubmit},React.createElement("input", {onChange: this.onChange, value: this.state.text}),React.createElement("button", null, 'Add #' + (this.state.items.length + 1)))));}});React.render(React.createElement(TodoApp, null), mountNode);
</script>
</body>
</html>

结果：

1.6.5、一个使用外部插件的组件

showdown.js下载：https://github.com/showdownjs/showdown

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个使用外部插件的组件</title>
</head>
<body>
<div id="mountNode"></div><script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/react.min.js"></script>
<script src="javascript/showdown.js"></script>
<script>var converter = new showdown.Converter();var MarkdownEditor = React.createClass({displayName: "MarkdownEditor",getInitialState: function() {return {value: 'Type some *markdown* here!'};},handleChange: function() {this.setState({value: this.refs.textarea.getDOMNode().value});},render: function() {return (React.createElement("div", {className: "MarkdownEditor"},React.createElement("h3", null, "Input"),React.createElement("textarea", {onChange: this.handleChange,ref: "textarea",defaultValue: this.state.value}),React.createElement("h3", null, "Output"),React.createElement("div", {className: "content",dangerouslySetInnerHTML: {__html: converter.makeHtml(this.state.value)}})));}});React.render(React.createElement(MarkdownEditor, null), mountNode);
</script>
</body>
</html>

结果：

1.6.6、渲染数据到表格中

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>React</title><style>table{text-align: center;}#showNowTime{text-align: center;}</style>
</head>
<body><div id="example"></div><div id="Goods"></div><table id="table"></table><script src="javascript/common/babel.min.js"></script><script src="javascript/common/react.development.js"></script><script src="javascript/common/react-dom.development.js"></script><script type="text/babel">/*当前时间*/function tick() {const element = (<div id="showNowTime"><h1>火火水果商店</h1><h3>当前时间: {new Date().toLocaleTimeString()}</h3></div>
            );ReactDOM.render(element,document.getElementById('example'));}setInterval(tick, 1000);(function showGood(){//定义数组const goods = [{id:1,name:'橘子',price:5,number:20},{id:2,name:'香蕉',price:3.5,number:10},{id:3,name:'梨子',price:6,number:10},{id:4,name:'西瓜',price:30,number:40},{id:5,name:'苹果',price:7,number:42},{id:6,name:'山竹',price:20.5,number:50}];const todoItems = goods.map((obj, index) =>// 只有在没有确定的 id 时使用<tr key={index}><td>{index+1}</td><td>{obj.name}</td><td>{obj.price}/斤</td><td>{obj.number}</td></tr>
            );/*渲染数据到table中*/ReactDOM.render(<table border="1" width="100%" cellPadding="0" cellSpacing="0"><tr><th>编号</th><th>名称</th><th>单价</th><th>数量</th></tr><tbody>{todoItems}</tbody></table>,document.getElementById('Goods'));})();
</script>
</body>
</html>

结果：

在此愉快的学习过程就结束啦，咋们下期再见！

转载于:https://www.cnblogs.com/Best-Chen/p/10160622.html

React 10分钟快速入门相关推荐

Spring Boot 永远滴神！10分钟快速入门
为什么是 SpringBoot 因为目前开发 WEB 应用,Spring Boot 是启动 Spring 项目最快最流行的方式了.无论我们要构建一个什么样的应用,它都可以让我们尽可能快的启动运行起来. ...
mysql中日期相减_MySQL环境配置和10分钟快速入门
MySQLFrom:Datawhale作者:皮钱超,厦门大学,Datawhale原创作者本文约3000字,建议阅读9分钟审稿人:杨煜,Datawhale成员,就职于毕马威,从事数据分析工作.本文中介绍 ...
10 分钟快速入门海量数据搜索分析引擎 Elasticearch
作者:jeremyshi,腾讯 TEG 后台开发工程师 1. 背景随着移动互联网.物联网.云计算等信息技术蓬勃发展,数据量呈爆炸式增长.如今我们可以轻易得从海量数据里找到想要的信息,其中离不开搜索引 ...
Metabase的基本使用：10分钟快速入门
Metabase使用手册初始配置按提示一步步填写相关信息即可,注意第一个创建的账户默认即为管理员账户数据分析接下来就可以正式使用了,右上角各功能如下: 下面就以具体场景为例,分别解释各项功能, ...
（李兴华）【FANUC FOCAS1/2 Library 开发系列教程】-10分钟快速入门
准备工作 1.下载Focas开发包并解压 2.下载Visual Studio2015 社区版并安装以上具体的实现这里不做具体说明,我相信你完成这些非常容易~~ 确保网络及硬件没问题我是一枚苦逼的程 ...
UML类图10分钟快速入门
虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰原文地址:http://www.j ...
懒办法1篇文10分钟快速入门MySQL增删查改
作者简介作者名:1_bit 简介:CSDN博客专家,2020年博客之星TOP5,InfoQ签约作者,蓝桥签约作者.15-16年曾在网上直播,带领一批程序小白走上程序员之路.欢迎各位小白加我咨询我相关 ...
UML类图10分钟快速入门 - From 圣杰
虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 原文作者:圣杰原文地址:http://www.j ...
【工具篇】10分钟快速学会React图表搭建
10分钟快速学会React图表搭建本次紧着之前的antd,接着学习有关react图表以及富文本编辑器的搭建. 本次的功能实现基于上次的[工具篇]10分钟学会Ant Design of React用法 ...

React 10分钟快速入门