本文转自：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. SQL 取两日期的记录

    SELECT TOP 1000 [ID]      ,[SourcePageID]      ,[PlatformType]      ,[CreateTime]  FROM [home_sendor ...

  2. MSMQ理论+实践（上）

    关于MSMQ使用的文章,网上一搜一大把,为什么还要写呢?因为别人的终究是别人的,看一遍,只是过眼云烟罢了,还是要自己动手实践一下,才能把别人的变成自己的.再者就是网上大都是在一台电脑上写的demo,我 ...

  3. Spring Boot - Spring Data

    使用JPA 虽然JPA是一个标准,但spring中一般就是使用hibernate实现的 使用JPA(Java Persistence API,Java持久化API,是个规范,其实是借助Hibernat ...

  4. [UWP]爱恋动漫BT开发小记

    在七月和某个人相识,在七月又和这个人重回陌路,在这个伤感的七月,让我来水一篇博客. 已经很久没有写博客了,最近现在来写一篇,总结一下这个七月. 今年的暑假特别的长,大概六月中旬就考完试了,而开学一直要 ...

  5. .net生成条形码

    1..net 标准库(.net standard 2.0) Nuget添加引用:ZXing.Net生成条形码,ZXing.Net.Bindings.ImageSharp生成图片 public stat ...

  6. SmartUpload工具上传文件步骤

    上传文件的步骤1.实例化SmartUpLoad实例    SmartUpload smart = new SmartUpload();2.初始化上传操作    ServletConfig config ...

  7. 使用win10自带邮件应用发送文件

    之前的电脑装过邮件客户端,想发送文件给别人时,只需要“右键文件——发送到邮件”,就能把文件作为附件发送给对方.新电脑win10系统自带邮件客户端,所以就想直接用.但是右键发送到邮件没有关联上,用不了. ...

  8. 剑指offer五十一之构建乘积数组

    一.题目 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  9. Netty核心概念(6)之Handler

    1.前言 本节介绍Netty中第三个重要的概念——Handler,这个在前两节都提到了,尤其是Channel和Handler联系紧密.handler本身的设计非常简单,但是所起到的作用却很大,Nett ...

  10. Spring Security构建Rest服务-0702-个性化用户认证流程2

    登录成功后的处理AuthenticationSuccessHandler: 认证成功后,默认情况下spring security会继续访问之前访问的url,如果想自定义处理逻辑,用默认的就不行了.此时 ...