【React】热热身:Hello World

引入React

可以使用Bower下载React

bower install react

引入react(.min).js和JSXTransformer.js。在React组件中可以不使用JSX,但建议使用 JSX。引入 JSXTransformer.js 库是来实现在浏览器里的代码转换,上线之后最好把JSX代码转换成正常的js代码,然后去掉JSXTransformer.js的引用。

JSX代码写在<script type=”text/jsx”>中,注意type是text/jsx。

JSX -> JSnpm install -g react-toolsjsx –watch src/ build/

一旦src中的JSX文件修改了,,就会自动转换到build文件夹中。

Hello World

一个最简单的React组件。

html文件

<!DOCTYPE html><html lang=”zh-CN”><head><meta charset=”UTF-8″><title></title></head><body><div></div><script src=”bower_components/react/react.min.js”></script><script src=”bower_components/react/JSXTransformer.js”></script><script src=”js/main.js” type=”text/jsx”></script></body></html>

main.js文件

var HelloWorld = React.createClass({render: function () {return <h1>Hello {this.props.name}</h1>;}});React.render(<HelloWorld />, document.getElementById(‘helloworld’));

逆境磨练人、逆境是老师、逆境之苦可变甜。

【React】热热身:Hello World

相关文章:

你感兴趣的文章:

标签云: