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. 前端小记2——移动web解决方案

    面向用户级移动web解决方案: 1.代码结构规范 2.字体设置 body{ font-family: -apple-system, BlinkMacSystemFont, "PingFang ...

  2. SummerVocation_Learning--java的线程死锁

    public class Test_DeadLock implements Runnable { ; static Object o1 = new Object(),o2 = new Object() ...

  3. select函数实例代码

    select函数简解: selct 称之为多路复用IO,使用它可以让程序阻塞在select上,而非实际IO函数上. int select(int nfds, fd_set *readfds, fd_s ...

  4. C/C++程序基础 （二）常用知识点

    使用宏实现max 注意括号在宏内的使用 #define MAX(x, y) ( ( (x) > (y) ) ? (x) : (y) ) 宏参数连接 a##e##b 转化为字符串 #a const ...

  5. 【Django】Django开发中的日志输出

    开发环境:Ubuntu16.04+Django 1.11.9+Python2.7 一:使用自定义函数输出日志到log文件: import time def print_log(log): file_o ...

  6. Linux下面自动清理超过指定大小的文件

    Linux下面自动清理超过指定大小的文件 思路:1)查找test目录下的所有的文件2)判断是否大于100M3)大于100M则清空 以byte为单位显示文件大小,然后和100M大小做对比. 100M换算 ...

  7. ATM-db-dnhandler

    import os,jsonfrom conf import settings def select(name): user_path = os.path.join(settings.BASE_DB, ...

  8. kubectl alias auto complete

    平时kubectl命令管理kubernetes,敲久了就觉得比较麻烦,想着使用alias k来代替kubectl,可是当输入k时没有了自动补全的功能 这里在 ~/.bashrc 添加如下配置后,可以自 ...

  9. PSTR、LPSTR等宏原型

    1.首先介绍char.wchar_t ,宽字符wchar_t和窄字符char. 窄字符char了,大家都很清楚,就是8bit表示的byte,长度固定.char字符只能表示ASII码表中的256个字符, ...

  10. Codeforces Round #459 (Div. 2)-A. Eleven

    A. Eleven time limit per test1 second memory limit per test256 megabytes Problem Description Eleven ...