zoukankan      html  css  js  c++  java
  • React入门指南

    原文地址:React入门指南

    React入门指南

    JSFiddle

    实验React最便捷的途径就是开始摆弄下面这个小例子:Hello World。

    入门示例

    下载示例开始体验:Download Starter Kit 0.13.3
    在示例项目的根目录中,创建helloworld.html文件,并输入以下内容:

    <!DOCTYPE html>
    <html>
      <head>
        <script src="build/react.js"></script>
        <script src="build/JSXTransformer.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/jsx">
          React.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>

    JavaScript脚本中嵌入的类xml代码我们称作JSX;通过 JSX语法 文档来深入了解它吧。要在浏览器中把JSX代码转化为清香的Javascript,我们需要使用<script type="text/jsx">标签并引入JSXTransformer.js库。

    独立脚本文件

    你的JSX代码可以放入单独的文件中。创建src/helloworld.js,如下:

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

    然后在helloworld.html中引用。

    <script type="text/jsx" src="src/helloworld.js"></script> 

    对JSX脱机转码

    首先安装命令行工具(依赖npm):

    npm install -g react-tools

    之后就可以把helloworld.js翻译为纯javascript了。

    jsx --watch src/ build/

    修改JSX的同时,会被自动翻译为javascript。

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

    更新我们的HTML文件,不再需要JSXTransformer.js。

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <!-- 无需引入 JSX 转换库 -->
      </head>
      <body>
        <div id="example"></div>
        <script src="build/helloworld.js"></script>
      </body>
    </html>

    喜欢CommonJS?

    如果你想结合browserify,webpack或者其他包管理工具来使用React,那就使用react npm包吧。此外,可以十分方便地把jsx构建工具整合到很多包管理系统中(不仅仅是CommonJS)。

    下一步

    通过新手工具包examples目录下的教程和例子来深入了解react。我们还建立了wiki,这里有来自社区贡献的各种工作流、界面组件、路由和数据管理实践等等。react欢迎你,并祝你好运。

  • 相关阅读:
    【转载】用XML和XSLT来生成静态的HTML页面
    【转载】Lambda表达式(Lambda Expressions)
    [转]打领带的十种方法
    读书笔记
    【转载】用手机的朋友进来看看吧,终身受益啊!!!
    SQL查询出重复出现的数据
    技巧三:字符串格式化
    【Vegas原创】页面自动跳转代码收集
    【Vegas原创】我写的一个安装windowsService的BAT
    【Vegas原创】ASP.NET读取Excel,并以邮件正文方式和附件方式发送实例
  • 原文地址:https://www.cnblogs.com/Betree/p/react-getting-started.html
Copyright © 2011-2022 走看看