React入门指南

发布时间：2020-12-15 04:51:33 所属栏目：百科来源：网络整理

导读：原文地址：React入门指南 React入门指南 JSFiddle 实验React最便捷的途径就是开始摆弄下面这个小例子:Hello World。入门示例下载示例开始体验：Download Starter Kit 0.13.3 在示例项目的根目录中，创建helloworld.html文件，并输入以下内容: !DOCTYPEhtml

原文地址：React入门指南

React入门指南

JSFiddle

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

入门示例

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

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="build/react.js"></script>
<scriptsrc="build/JSXTransformer.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="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,document.getElementById('example')
);

然后在helloworld.html中引用。

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

对JSX脱机转码

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

npminstall-greact-tools

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

jsx--watchsrc/build/

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

React.render(
React.createElement('h1',null,'Hello,world!'),255);">更新我们的HTML文件，不再需要JSXTransformer.js。 
<!DOCTYPEhtml><html>
<head>
<title>HelloReact!</title>
<scriptsrc="build/react.js"></script>
<!--无需引入JSX转换库-->
</head>
<body>
<divid="example"></div>
<scriptsrc="build/helloworld.js"></script>
</body></html> 
喜欢CommonJS？ 
如果你想结合browserify，webpack或者其他包管理工具来使用React，那就使用react npm包吧。此外，可以十分方便地把jsx构建工具整合到很多包管理系统中(不仅仅是CommonJS)。 
下一步 
通过新手工具包examples目录下的教程和例子来深入了解react。我们还建立了wiki，这里有来自社区贡献的各种工作流、界面组件、路由和数据管理实践等等。react欢迎你，并祝你好运。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!