Reactjs官方文档(1)

最新推荐文章于 2022-09-23 16:31:08 发布

陶雷

最新推荐文章于 2022-09-23 16:31:08 发布

阅读量840

点赞数

文章标签： react js

这篇博客介绍了如何开始使用React，包括通过JSFiddle的Hello World例子，下载Starter Kit，理解JSX语法，并将React JSX代码分离到单独的文件中进行线下转换。此外，还提到了如何在更改文件后自动转换和使用CommonJS。最后，鼓励读者探索更多React实例和社区资源。

摘要由CSDN通过智能技术生成

第一章开始

JSFiddle

最快开启React之门的方法就是使用JSFiddle hello world例子:

React JSFiddle

React JSFiddle without JSX

Starter kit

从下载Starter kit开始

在starter kit根目录。创建一个包含以下内容的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语法学习更过关于它的知识。为了能够在javascript中使用JSX，我们使用<script type=”text/jsx’>并引入JSXTransformer.js在浏览器中进行真正的转换。

分离文件

你的React JSX可以在分离的文件中执行。创建src/helloword.js文件，内容如下。

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

然后在helloworld.html中关联它

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

线下转换

首先安装命令行工具（需要npm安装）

npm install -g react-tools

之后，将你的src/helloworld.js转换成纯的javascript

jsx --watch src/ build/

无论何时你更改文件，bulid/helloworld.js都会自动执行转换

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

像下面一样更新你的HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- No need for JSXTransformer! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

想要CommonJS？

如果你想要在React中使用browserify、webpack，或者别的公共组件，只需要使用react npm包。除此之外，jsx构建工具可以十分简单的集成大多数打包系统（不仅仅是CommonJS）.