React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

官网：http://facebook.github.io/react/

1、环境搭建

》》》普通的用法：需要三个文件。react.js核心文件、react-dom就是适应amd 、cmd 等进行的封装、bebel就是es6和jsx转译。上线之后就不用了。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="build/react.js"></script>

    <script src="build/react-dom.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      代码。。。。</script>

  </body>

</html>

》》》CommonJS 模式 browserify or webpack

// main.js

var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

);

2、hello ， world 例子

重点语法：先创建一个组件  var Hello = React.createClass({});  组件内定义render 并返回    ，使用组件渲染：ReactDOM.render(,)两个参数，一个是要渲染的组件。

                <div id="example"></div>

        <script type="text/babel">

            var Hello = React.createClass({

                render:function(){

                    return <h1>hello word</h1>

                }

            })

            ReactDOM.render(

              <Hello />,

              document.getElementById('example')

            );

        </script>

3、jsx 组件 单项数据绑定 虚拟DOM

》》》jsx   ： HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

》》》组件 ： React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。组件类的第一个字母必须大写，否则会报错。

》》》虚拟DOM ：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。

》》》单项数据绑定：不同于mvc，类似于php和html混写的写法

【01】react 之 hello world的更多相关文章

  1. React笔记01——React开发环境准备

    1 React简介 2013年由Facebook推出,代码开源,函数式编程.目前使用人数最多的前端框架.健全的文档与完善的社区. 官网:reactjs.org 阅读文档:官网中的Docs React ...

  2. React 也就这样 01——React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

  3. react 也就这么回事 01 —— React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

  4. 【视频合集】极客时间 react实战进阶45讲 【更新中】

    https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...

  5. Redux学习day1

    01.React介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具.随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多 ...

  6. React 实践记录 01 组件开发入门

    Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...

  7. React Native 开发之 (01) 配置开发环境

    一 React Native React Native 是由Facebook发布的开源框架,着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台.(Learn once, write an ...

  8. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  9. react学习笔记-01

    1. HTML模板 Jsx是react的语法糖,最终会被编译成js语法.因此需要第三方库browser将jsx转换成js. 由于react 0.14版本之后,将react和react-dom拆分,所以 ...

  10. react学习01

    react react render()函数返回只能是一个标签(里面可以包其他东西) state(状态) vs props(属性) state 改变,视图改变,state是一个组件里面的状态,然后pr ...

随机推荐

  1. Oracle 换行符 空格符 回车符

    ① 换行符 chr(10)② 回车符 chr(13) ③ 空格符 chr(9) 例1:效果对比.chr(10)在一个字段中换行显示一列数据,chr(13)同样是换行显示一行数据,chr(9)会显示一个 ...

  2. 用iTerm快速链接远程服务器

    通常情况下,iTerm2访问远程Linux使用ssh ssh <用户名>@<ip> 然后输入访问的密码即可.当然还有的时候需要指定访问端口. ssh -p <端口号> ...

  3. HDU 5971 二分图判定

    Wrestling Match Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. P3386 【模板】二分图匹配（匈牙利&最大流）

    P3386 [模板]二分图匹配 题目背景 二分图 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两个正 ...

  5. KNN算法python实现小样例

    K近邻算法概述优点:精度高.对异常数据不敏感.无数据输入假定缺点:计算复杂度高.空间复杂度高适用数据范围:数值型和标称型工作原理:存在一个样本数据集合,也称作训练样本集,并且样本集中每个数据都存在标签 ...

  6. 关于前后端日期处理 开发注意事项 jquery.tmpl()函数的使用

    1当后端将日期传到前段的时候 我们通常会需要将日期转为制定格式 除了平常我们使用的前段插件将日期转好 spring @datetimeFormat 注解 这些形式外 我们还可以在实体里通过get方法进 ...

  7. Active Directory 站点和服务

    Active Directory 站点和服务 更新时间: 2012年3月 应用到: Windows Server 2008, Windows Server 2008 R2, Windows Serve ...

  8. Shell脚本编程

    1.linux中的变量 linux中的变量分为环境变量和普通变量,其中环境变量可以理解为全局变量,在所有shell的子程序中都可以引用,普通变量只能在自己的shell程序中使用,程序结束后变量无法保留 ...

  9. HTTP-响应状态

    响应状态 有多种响应状态,如:200代表成功,301跳转,404找不到页面,502服务器错误 1xx消息 —— 请求已被服务器接收,继续处理 2xx成功 —— 请求已成功被服务器接收.理解.并接受 3 ...

  10. Leetcode 636.函数的独占时间

    函数的独占时间 给出一个非抢占单线程CPU的 n 个函数运行日志,找到函数的独占时间. 每个函数都有一个唯一的 Id,从 0 到 n-1,函数可能会递归调用或者被其他函数调用. 日志是具有以下格式的字 ...