本文转自：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. AspNetCore Mvc 自定义中间件认证

    AspNetCore Mvc 自定义中间件认证 实现控制器访问验证和拦截. 1.注册政策. 例如: services.AddAuthorization(options => { options. ...

  2. 关于margin:-10000px;padding:10000px;的理解

    原文链接: 内外补丁负值法是指通过内外补丁的设置来解决一些我们通常方法不能实现的效果.例如:可以通过改变盒模型的样式来使几列div由内容撑开高度但几列div与最高的一栏等高的问题.但是为什么会出现这样 ...

  3. EFCore 2.0引用标量函数

    参考文档:https://www.cnblogs.com/CreateMyself/p/8485697.html 1.添加nuget包:EntityFramework.Functions,在上下文类M ...

  4. openvswitch 源码分析 OVS_ACTION_ATTR_HASH action

    1.在ovs_dp_process_packet中查找kernel缓存流表,查到后执行ovs_execute_actions->do_execute_actions,其中有个actions是OV ...

  5. bhp 阅读笔记 OSX 下 setuptools pip 安装

    安装 python-setuptools python-pip 尝试 brew install python-setuptools 失败 brew update 失败 $ cd `brew --pre ...

  6. fluentd 推送 mariadb audit log

    说明: mariadb audit log是 mariadb 的审计日志 目的是把日志拆分成 tab 键分隔的字段 直接附上 fluentd 配置文件 <system> log_level ...

  7. linux 服务器性能监控（一）

    这篇文章主要介绍一些常用的linux服务器性能监控命令,包括命令的常用参数.指标的含义以及一些交互操作. 几个问题 命令本身并不复杂,关键是你对操作系统基础知识的掌握和理解,先来看看下面几个问题: C ...

  8. 浅谈Express的put与del

    假设有一个景区价格列表页,显示当前的价目表. 价目表存放在express应用的数组中: var tours = [ {id:0,name:'Hood River',price:99.99}, {id: ...

  9. python3模块: uuid

    一. 简介 UUID是128位的全局唯一标识符,通常由32字节的字母串表示.它可以保证时间和空间的唯一性,也称为GUID. 全称为:UUID--Universally Unique IDentifie ...

  10. laydata 点击日期闪现

    因项目需求需要多个日期,然后点击日期就会出现闪现的情况,导致选择不了日期 html代码 <table class="form"> <tr> <th c ...