# react js geting start

最新推荐文章于 2022-06-28 11:21:27 发布

BelindaBai

最新推荐文章于 2022-06-28 11:21:27 发布

阅读量585

点赞数 1

分类专栏：前端翻译学习笔记文章标签： react

学习笔记同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

翻译

1 篇文章 0 订阅

订阅专栏

学习React的最简单的方法就是跟着下面这两个 hello world 例子。
React JSFiddle
React JSFiddle without JSX

starter kit
Download the starter kit to get started.
Download Starter Kit 0.13.2
In the root directory of the starter kit, create a helloworld.html with the following contents.

 <!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>

初学者工具包
下载初学者工具包开始学习。在初学者工具包的根目录下，用以下内容创建一个 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 ，我们用<script type="text/jsx">并引入 JSXTransformer.js 去实现react 在浏览器中的转变。

外部文件
你的 react jsx 代码可以通过引入一个外部文件，创建一个如下的src/helloworld.js

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

然后在主文件中引用他

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

离线转化
首先需要安装一个命令行工具（要求有npm）

npm install -g react-tools

然后把src/helloworld.js转化为javascript代码，

jsx --watch src/ build/

无论你什么时候改变这个文件，他都会自动编译。

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>

BelindaBai

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# react js geting start

学习React的最简单的方法就是跟着下面这两个 hello world 例子。 React JSFiddle React JSFiddle without JSX starter kit Download the starter kit to get started. Download Starter Kit 0.13.2 In the root directory of
复制链接

扫一扫