《React官方文档》之Getting Started

简介:

JSFiddle

开始React最简单的方法就是遵循JSFiddle的Hello World例子:

  • React JSFiddle
  • React JSFiddle without JSX
  • 入门包

    如果你刚刚起步,你可以下载Starter Kit。Starter Kit包含为浏览器预制的React和React DOM,以及帮助你开始的示例。

     

    在Starter Kit的根目录下创建一个 helloworld.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,查看JSX语法可以学习更多。为了将它翻译成普通的JavaScript ,我们使用 <script type="text/babel">并且包含 Babel来在浏览器中实现真正的翻译。从浏览器打开这个html你就能看到这句问候了!

    独立的文件

    你的React JSX代码可以在一个独立的文件中。创建如下的 src/helloworld.js

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

    然后从helloworld.html引用它:

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

    注意到一些浏览器(比如Chrome)将会加载失败除非它通过HTTP服务.

     React+npm或Bower

    你可以使用npm或Bower来管理React 包。你可以在我们的包管理 章节学习到更多相关知识。

    下一步

    查看我们的教程和其他Starter Kit的examples 目录下的例子来学习更多。

 转载自 并发编程网 - ifeve.com

相关文章
|
前端开发 安全 JavaScript
React 正式推出全新官方文档!
React 正式推出全新官方文档!
365 0
|
前端开发 JavaScript
错误边界(精读React官方文档—16)
错误边界(精读React官方文档—16)
334 0
错误边界(精读React官方文档—16)
|
前端开发 JavaScript UED
无障碍辅助功能(精读React官方文档—13)
无障碍辅助功能(精读React官方文档—13)
416 0
无障碍辅助功能(精读React官方文档—13)
|
JSON 前端开发 API
React哲学(精读React官方文档—12)
React哲学(精读React官方文档—12)
257 0
React哲学(精读React官方文档—12)
|
前端开发 JavaScript C++
组合VS继承(精读React官方文档—11)
组合VS继承(精读React官方文档—11)
179 0
组合VS继承(精读React官方文档—11)
|
前端开发 JavaScript 算法
列表&Key(精读React官方文档—08)
列表&Key(精读React官方文档—08)
143 0
列表&Key(精读React官方文档—08)
|
前端开发 JavaScript 算法
元素渲染 (精读React官方文档—03)
元素渲染 (精读React官方文档—03)
143 0
元素渲染 (精读React官方文档—03)
|
存储 前端开发 JavaScript
深入 JSX(精读React官方文档—21)
深入 JSX(精读React官方文档—21)
310 0
|
前端开发 JavaScript
与第三方库协同(精读React官方文档—20)
与第三方库协同(精读React官方文档—20)
309 0
|
设计模式 前端开发 JavaScript
高阶组件(精读React官方文档—19)
高阶组件(精读React官方文档—19)
173 0