本文转自：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. HTTP响应状态码说明

    当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(Server Header)用以响应浏览器的请求. HTTP状态码共分为五种类型: 1**:信息,服务器接收到请求,需 ...

  2. Nginx+IIS部署负载均衡的常见问题

    windows 下配置 Nginx 常见问题 一.  Nginx配置 找到 conf 目录里的 nginx.conf 文件,配置Nginx #user nobody; #指定nginx进程数 work ...

  3. ASP .Net Core路由(Route) - 纸壳CMS的关键

    关于纸壳CMS 纸壳CMS是一个开源免费的,可视化设计,在线编辑的内容管理系统.基于ASP .Net Core开发,插件式设计: GitHub:https://github.com/SeriaWei/ ...

  4. 记录.NET Core部署到Linux之.NET Core环境搭建(1)

    1.在安装.NET之前,您需要注册Microsoft密钥.注册产品存储库和安装所需的依赖项. 启动我们的虚拟机,输入以下命令: sudo rpm -Uvh https://packages.micro ...

  5. 微信游戏《全民炫舞》开发公司h3d2 engine和QQ炫舞2 布料系统技术介绍

    H3D公司开发的<全民炫舞>上线了. 蝉联IOS榜首很多天. 整理了一下过去公司游戏引擎开发的历史.有兴趣可以去看看 公司游戏引擎开发历史介绍: http://www.h3d.com.cn ...

  6. AJPFX的监管与执照

      AJPFX受到英国金融行为监管局(FCA)授权和监管. 英国FCA是目前世界上金融服务最完善.最健全的监管机构,英国FCA对所有在其境内注册的金融服务机构进行严格的监管. 英国金融行为监管局(FC ...

  7. STL在数组算法的使用

    find(a:起始位置 , b: 终止位置 , c: 要查找的内容)      ------>查找寻找内容的位置 count(a:起始位置 , b: 终止位置 , c: 要查找的内容)   -- ...

  8. Android之常用类库

    Android之常用类库 android.app :提供高层的程序模型.提供基本的运行环境android.content :包含各种的对设备上的数据进行访问和发布的类android.database ...

  9. 查看服务器CPU的个数、CPU的核数、多核超线程数、机器硬件型号

    这里有几个概念: 1.一台物理机的物理CPU的个数 2.一个CPU上的核数 3.一个核上面支持的线程数 有下面的计算公式: # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 ...

  10. Tomcat几种出错方法

    1.  Several ports (8005, 8089, 8009) required by Tomcat v8.0 Server at localhost are already in use. ...