文档章节

React初体验

LCINA
 LCINA
发布于 2016/08/05 09:55
字数 372
阅读 131
收藏 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

© 著作权归作者所有

共有 人打赏支持
LCINA
粉丝 3
博文 29
码字总数 12202
作品 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
初体验react的状态机

一、什么是状态机 状态机可归纳为4个要素,即现态、条件、动作、次态。这样的归纳,主要是出于对状态机的内在因果关系的考虑。“现态”和“条件”是因,“动作”和“次态”是果。详解如下: ...

fir01
2016/03/03
425
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部