比较了半天VUE、Angular、React，最终选择React，下面从几个例子开始React的学习，先从单个的index.html，引用react.js开始

一.最简单的纯JS的代码

<!DOCTYPE html>

<html>

  <head>

    <title>react直接引用js</title>

    <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  </head>

  <body>

    <div id="root"></div>

      <script type="text/javascript">

        window.onload = function() {

          var h1 = React.createElement("h1", null, "hello REACT!");

          ReactDOM.render(h1, document.getElementById("root"));

        };

      </script>

  </body>

</html>

二、使用JSX的语法

JSX是React提供的语法，React会把JSX编译成JS，这个编译器使用了一个组件babel

<!DOCTYPE html>

<html>

  <head>

    <title>react直接引用js</title>

    <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <!-- 生产环境中不建议使用 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

  </head>

  <body>

    <div id="root"></div>

    <script type="text/babel">

      window.onload = function() {

        ReactDOM.render(

          <h1>Hello, REACT!</h1>,

          document.getElementById("root")

        );

      };

    </script>

  </body>

</html>

三、通过组件的方式添加元素

<!DOCTYPE html>

<html>

  <head>

    <title>react直接引用js</title>

    <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <!-- 生产环境中不建议使用 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

  </head>

  <body>

    <div id="root"></div>

    <script type="text/babel">

      class Welcome extends React.Component{

        render(){

          return <h1>Hello, REACT!</h1>

        }

      }

      window.onload = function() {

        ReactDOM.render(<Welcome />,

          document.getElementById("root")

        );

      };

    </script>

  </body>

</html>

四、给组件添加属性功能

<!DOCTYPE html>

<html>

  <head>

    <title>react直接引用js</title>

    <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <!-- 生产环境中不建议使用 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

  </head>

  <body>

    <div id="root"></div>

    <script type="text/babel">

      class Welcome extends React.Component{

        render(){

          return <h1>Hello, {this.props.name}!</h1>

        }

      }

      window.onload = function() {

        ReactDOM.render(<Welcome name='react16.3'/>,

          document.getElementById("root")

        );

      };

    </script>

  </body>

</html>

react-01的更多相关文章

  1. [React] 01 - Intro: javaScript library for building user interfaces

    教学视频: http://www.php.cn/code/8217.html React 教程: http://www.runoob.com/react/react-tutorial.html 本篇是 ...

  2. [Full-stack] 快速上手开发 - React

    故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...

  3. [React] 08 - Tutorial: evolution of code-behind

    有了七篇基础学习,了解相关的知识体系,之后便是系统地再来一次. [React] 01 - Intro: javaScript library for building user interfaces ...

  4. [Code::Blocks] Install wxWidgets & openCV

    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...

  5. Top 20 JavaScript Projects of 2017

    https://www.youtube.com/watch?v=SUMn8y3pi28 20. AngularJS 1 19. Passport 18. Pug 17. Socket.IO 16. J ...

  6. 本人SW知识体系导航 - Programming menu

    将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...

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

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

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

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

  9. React Native 学习-01

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

  10. react学习笔记-01

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

随机推荐

  1. 必做作业3：短视频编辑app原型化系统

    本app立足于打造短视频分享交流社区,app不仅有视频编辑的功能,还有视频的分享和收藏功能.系统有登录.注册.找回密码的功能,可以进行账号资料管理,并可以管理自己的视频.分享和收藏.系统可以对视频进行 ...

  2. TinkPHP框架学习-03模型类

    1-----数据访问 2-----数据查询 3-----数据添加 4-----数据修改 5-----数据删除 创建一张nation表并写入三条测试数据 create table nation( `co ...

  3. python中线程的知识点

    什么是线程? 程序的执行线路.每个进程默认有一条线程.线程包含了程序的具体步骤. 多线程就是一个进程中有除主线程(默认线程)外还有多个线程. 线程与进程的关系(进程包含线程,而线程依赖进程存在) 1. ...

  4. ssh服务简介及应用与服务的进程的类型

    SSH ,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利 ...

  5. shell 启动和停止脚本

    启动脚本 start_kmeans_v3.sh #!/bin/bash #用于kmeans_data_v3_hadle启动 ps -ef | grep kmeans_data_v3_hadle.py ...

  6. windows上不能启动Apache，遇到错误的方法之一

    最近在2008服务器上安装apache,出现了No installed ConfigArgs for the service "Apache2.4"这个错误. 启动不了,重装了一样 ...

  7. Excel VBA ——字典实用技巧

    最近写了一些小功能,对字典有了进一步的理解,太强大了! 个人最近用过的字典应用有这么几个,写下来防止自己忘~同时方便大家 一.查找重复行 [原理]利用字典的exist方法,将数据加入字典时判断一下,如 ...

  8. step_by_step_Angularjs-UI-Grid使用简介

    了解 Angularjs UI-Grid 起因:项目需要一个可以固定列和表头的表格,因为表格要显示很多列,当水平滚动条拉至后边时可能无法看到前边的某些信息. 以前在angularjs 1.x 中一直都 ...

  9. python之全局变量与局部变量

    全局变量: -   在书写中顶格开始: -   一旦定义完毕在整个文件生效: -   在函数内如果定义了同名全局变量名,会“覆盖”掉全局变量: -   在函数中同名的变量,当在函数退出后消失,全局的同 ...

  10. fuchsia 内核

    1 内核zircon 是c++写的,system call是重写的,不兼容POSIX https://fuchsia.googlesource.com/zircon/+/HEAD/docs/conce ...