本文转自：http://www.runoob.com/react/react-install.html

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/react/ 下载最新版。

你也可以直接使用 BootCDN 的 React CDN 库，地址如下：

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

使用实例

以下实例输出了 Hello, world!

React 实例

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

  </head>

  <body>

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

    <script type="text/babel">

      ReactDOM.render(

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

        document.getElementById('example')

      );

    </script>

  </body>

</html>
实例解析：

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

  • react.min.js - React 的核心库
  • react-dom.min.js -  提供与 DOM 相关的功能
  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
ReactDOM.render(     <h1>Hello, world!</h1>,     document.getElementById('example') );

以上代码将一个 h1 标题，插入 id="example" 节点中。

注意：

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

通过 npm 使用 React

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。

我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

更多信息可以查阅：http://npm.taobao.org/。

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下：

my-app/

  README.md

  node_modules/

  package.json

  .gitignore

  public/

    favicon.ico

    index.html

  src/

    App.css

    App.js

    App.test.js

    index.css

    index.js

    logo.svg

尝试修改 src/App.js 文件代码：

src/App.js

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

  render() {

    return (

      <div className="App">

        <div className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <h2>欢迎来到菜鸟教程</h2>

        </div>

        <p className="App-intro">

          你可以在 <code>src/App.js</code> 文件中修改。

        </p>

      </div>

    );

  }

}

export default App;
 

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：

 

笔记列表

 
  1. #1

    tianqixin

    429***967@qq.com

    参考地址

    create-react-app 执行慢的解决方法：

    在使用 create-react-app my-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那：

    fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch

    可以看到资源还是使用了 npmjs.org，解决方法是换成淘宝的资源：

    $ npm config set registry https://registry.npm.taobao.org
    
-- 配置后可通过下面方式来验证是否成功
    
$ npm config get registry
    
-- 或 npm info express

[转]React 教程的更多相关文章

  1. SAP官网发布的react教程

    大家学习React的时候,用的是什么教程呢?Jerry当时用的阮一峰博客上的入门教程,因为React使用的JSX语法并不是所有的浏览器都支持,所以还得使用browser.js在浏览器端将JSX转换成J ...

  2. 看完阮一峰的React教程后, 我写了一个TodoList

    看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...

  3. react教程 — 性能优化

    参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https: ...

  4. （私人收藏）React教程手册

    React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...

  5. React教程（一） React介绍与搭建

    React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用 spa(单页面应用) react 组件化模块化 开发模式 React通过对DOM的模拟(虚拟dom) ...

  6. React 教程

    React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html React 测试入门教程http://www.ruanyifeng.com ...

  7. 学习react教程

    网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...

  8. React教程：4 个 useState Hook 示例

    摘要: React示例教程. 原文:快速了解 React Hooks 原理 译者:前端小智 到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组 ...

  9. react入门（1）之阮一峰react教程

    阮一峰老师的github地址:React Demos React 入门实例教程 2.ReactDOM.render() // ReactDOM.render() 将模板转化为 HTML 语言 // 参 ...

随机推荐

  1. BitAdminCore框架更新日志20180519

    20180519更新内容 昨天更新的版本,早上自己下载下来发现创建项目不成功. 这个问题已经多次出现,主要是cookiecutter编码问题,项目引用大量外部js文件,部分文件在复制的时候编码较验不通 ...

  2. WPF窗口启动时最大化

    在xaml对应的后台代码文件的初始化方法中: public ShellView() { InitializeComponent(); #region 启动时串口最大化显示 Rect rc = Syst ...

  3. Android UI/UX 工具

    Zeplin 用于界面图片自动导出. 图标 : https://material.io/icons/

  4. （2019）OCP 12c 062考试题库出现大量新题-4

    4.Which four are true about creating and running a remote database scheduler jobs? A) A credential i ...

  5. python的super用法及含义

    注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3)    2.严谨sup ...

  6. iOS - 安全

    1. CheckList http://www.jianshu.com/p/d3cc2d5c177d a 数据安全.分为数据传输安全和数据存储安全 数据存储安全为保存在App中的数据安全.不允许明文存 ...

  7. 【9】JMicro微服务-发布订阅消息服务

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 1. JMicro消息服务目前实现特性 a. JMicro只支持发布订阅消息服务,不支持队列式消息服务: b. 不支持消息持 ...

  8. 直接插入排序实现(Java)

    直接插入排序介绍 直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中,从而得到一个新的.记录数增1的有序表.     怎么理解呢?就是将n个待排序的元素看成一个有序表和一个无序表,开始时有序 ...

  9. WebDriverAPI（10）

    操作Frame页面元素 测试网址代码 frameset.html: <html> <head> <title>frameset页面</title> &l ...

  10. openerp QWeb

    1.web 模块 注意,OpenERP 模块中 web 部分用到的所有文件必须被放置在模块内的 static 文件夹里.这是强制性的,出于安全考虑. 事实上,我们创建的文件夹 CSS,JS 和 XML ...