阅读372 返回首页    go 阿里云 go 技术社区[云栖]

《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

最后更新：2017-05-19 15:02:53

  上一篇：go  ExecutorService-10个要诀和技巧
  下一篇：go  《ELK Stack权威指南 》导读