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. mbstring未安装

    yum install php55w-mbstring.x86_64 把php版本换成自己的就ok

  2. NOIP2018 全国热身赛 第二场 (不开放)

    NOIP2018 全国热身赛 第二场 (不开放) 题目链接:http://noi.ac/contest/26/problem/60 一道蛮有趣的题目. 然后比赛傻逼了. 即将做出来的时候去做别的题了. ...

  3. 网站动态加载JS脚本

    Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for ...

  4. 【PHP】详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI、SCRIPT_NAME、PHP_SELF区别

    实例:1.http://localhost/index.php/Home/Home/index.html $_SERVER['QUERY_STRING'] = ""; $_SERV ...

  5. vscode运行C/C++程序及配置

    安装vscdoe,安装tdm-gcc-64编译器,这样可以自动把mingw的目录添加到环境变量中,其实安装其他编译器本版都可以,只要手动添加环境变量即可.平台win10-64位.此文参考了哔哩哔哩的配 ...

  6. HDU：4417-Super Mario（离线线段树）

    Super Mario Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...

  7. datetime模块详解

    时间运算 >>> datetime.datetime.now() #当前年月 时间datetime.datetime(2018, 2, 13, 16, 12, 6, 850532)& ...

  8. 42、通过ontouch检测expandableListview的单击、长按、列表滚动

    一.在model定义变量: public boolean isExpandableListviewScroll = false;//这个是 首先监听expandableListview的滚动: Exp ...

  9. MFC定时关机程序的实现1

    写个定时关机程序自用,界面简单实用,最终界面如下 第一步,新建一个MFC对话框应用程序,拖几个控件过来, 界面如下: 然后给下拉列表框,复选按钮绑定变量,以方便进行操作. CComboBox m_co ...

  10. cegui 编译过程详解(cegui-0.8.2)

    cegui配置整了好长时间了,在一位大牛帮助下终于搞定了,网上的教程大多是老版本的,cegui-0.8.2版的配置寥寥无几,现在总结一下,献给正在纠结的小白们. 准备工作 第一步,先下载cegui-0 ...