文档章节

React初体验

LCINA
 LCINA
发布于 2016/08/05 09:55
字数 372
阅读 132
收藏 0
  1. 先下载官方初学者教程包;解压后在根目录创建名为hello.html文件,代码如下:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.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>

    在 JavaScript 代码里写着 XML 格式的代码称为 JSX;

  2. 也可以将这段JSX代码放在单独的文件夹里,创建src/hello.js文件,将JSX代码放入该文件夹,代码如下:

     ReactDOM.render(
       <h1>Hello, world!</h1>,
       document.getElementById('example')
     );

    然后在html文件中引用,代码如下:

    <script type="text/babel" src="src/hello.js"></script>

    PS:注意上面的type是"text/babel",然后在谷歌、欧朋浏览器等主流浏览器打开会出现问题,具体问题控制台那会告诉你,没有通过http服务。

  3. 将JSX代码转换成标准的JavaScript代码,首先安装命令行工具,命令如下:

    npm install -g react-tools

    接着将src/hello.js转换成标准的JavaScript文件,命令如下:

    jsx --watch src/ build/

    转换成功后,build/hello.js会自动生成,代码如下:

    React.render(
      React.createElement('h1', null, 'Hello, world!'),
      document.getElementById('example')
    );

    最后将代码更新如下:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <!-- 不需要JSXTransformer! -->
      </head>
      <body>
        <div id="example"></div>
        <script src="build/hello.js"></script>
      </body>
    </html>

    注意:在转换标准JavaScript代码的时候,要进入需转换文件的根目录!

  4. 具体查看中文教程:http://reactjs.cn/react/docs/getting-started.html

© 著作权归作者所有

共有 人打赏支持
上一篇: React之组件
下一篇: jQuery基础选择器
LCINA
粉丝 3
博文 29
码字总数 12202
作品 0
广州
程序员
私信 提问
初识react(五) 数据流终极解决方案 dva(零配置)

回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱 初识react(二) 实现一个简版的html+redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 初识react(四) react中异步解决方案之 ...

言sir
09/24
0
0
React Native初体验

混合开发一直都比较想接触的技术,所以这几天就学习了下React Native的配置及JavaScript的基础,体验一把混合开发的魅力。 一、React Native介绍 Learn once,Write anywhere 以下内容来自:...

Ruheng
2017/10/24
0
0
React Native 启动篇

开始学习ReactNative 简单的看了一天的javascript,javascript的代码实在看不惯,硬啃了下来。不算太熟,后面直接去看react native的示例代码了。首先从HelloWorld开始,使用的时sublime tex...

Chendj
2015/10/18
547
0
Meteor + React 初体验:Score Keep

具体代码可以参看我在 github 上的 score-keep 仓库 添加扩展 fourseven:scss: 安装 react: 安装第三方包: prop-types:Runtime type checking for React props and similar objects. Nu...

与蟒唯舞
2017/10/16
0
0
一套 React 语法规范的多端开发解决方案 - Taro

Taro - 用 React 写小程序,生成 H5、React Native 等多端引用 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。 Taro 是什么? Taro 是由京东 - 凹凸实验室打造的一套...

yuche
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 懒床是对冬天最起码的尊重

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @瘟神灬念 :分享daniwellP/桃音モモ的单曲《Nyan Cat》 《Nyan Cat》- daniwellP/桃音モモ 手机党少年们想听歌,请使劲儿戳(这里) @巴拉迪...

小小编辑
34分钟前
7
1
码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部