React 教程

React 是一个用于构建用户界面的 JAVASCRIPT库。
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
React 特点
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
阅读本教程前,您需要了解的知识:
在开始学习 React 之前,您需要具备以下基础知识:
HTML5
CSS
JavaScript
React 第一个实例
在每个章节中,您可以在线编辑实例,然后点击按钮查看结果。
本教程使用了 React 的版本为 0.14.7,你可以在官网 http://facebook.github.io/react/ 下载最新版。
React 实例
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React 教程!I am ledon</h1>,
document.getElementById(‘example‘)
);
</script>

  • React 教程目录

React 教程
React 安装
React JSX
React 组件
React State(状态)
React Props
React 组件 API
React 组件生命周期
React AJAX
React 表单与事件
React Refs

时间: 2024-10-09 23:55:45

React 教程的相关文章

gulp 编译es6 react 教程 案例 配置

1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var SourceMapSupport = require('gulp-sourcemaps-support');

react教程(一)JSX语法、组件概念、生命周期介绍

JSX React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号.JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖. JSX的解析器会帮我们读取这种语法并加以处理. 下面是一个简单的例子. const element = <h1 className="greeting">Hello, world!</h1>; 其实相当于如下的代码: const element = React.create

React教程:JSX语法基础

1.基本概念: React 使用 JSX 来替代常规的JavaScript. JSX 是按照 XML 语法规范 的 JavaScript 语法扩展. JSX 语法的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的. 2. JSX 的优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化: 它是类型安全的,在编译过程中就能发现错误: 使用 JSX 编写模板更加简单快速. 3.JSX语法基础: JSX 注释:推荐使用

React教程:组件与组件属性

1.React组件化概念 1.1.组件的概念 React 应用都是构建在组件之上. 组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石.在React的组件构成中,按照状态来分可以分为有状态组件和无状态组件. 1.2.组件的特点 组件化的概念在后端早已存在多年,只不过近几年随着前端的发展,这个概念在前端开始被频繁提及,特别是在MV*的框架中. 前端中的"组件化"这个词,在UI这一层通常指"标签化

React教程:组件的生命周期

1.生命周期的概念 1.1.概念 在组件创建.组件属性更新.组件被销毁的过程中,总是伴随着各种各样的函数执行,这些在组件特定时期,被触发执行的函数,统称为组件的生命周期函数. 1.2.组件生命周期三个阶段 加载阶段(Mounting):在组件初始化时执行,有一个显著的特点:创建阶段生命周期函数在组件的一辈子中只执行一次: 更新阶段(Updating):属性和状态改变时执行,根据组件的state和props的改变,有选择性的触发0次或多次: 卸载阶段(Unmounting):在组件对象销毁时执行,

React教程:父子组件传值(组件通信)

1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <Child txt={this.state.message}/>

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

(转)React 入门实例教程

作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非

【转】react入门实例教程

作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https://github.com/ruanyf/react-demos 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场