单文件快速体验使用react输出hello

单文件快速体验使用react输出hello_world

看了下react官方的hello world教程, 感觉对新手很不友好.codepen虽然好用, 但是封装太多东西, 看起来
太抽象. 还是喜欢像学习jQuery那样, 直接在单文件中引入必要的js文件, 然后直接运行的那种感觉.

如果使用VS Code, 建议安装Sublime Babel, 来提供对react语法的代码高亮.

基础hello-world

直接复制以下代码, 粘贴自己的编辑器里, 打开即可运行.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
    <!-- 上面2个是引入react必要的js -->

    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <!-- 
    babel是1个JavaScript预编译器, 由于新版react使用了很多ES6新语法, 故很多浏览器
    不支持直接运行, 我试了下, 去掉这个babel预编译器, 使用chrome 60.0依旧无法正常运行.
    babel说白了就是把ES6语法翻译成向后兼容的ES5/3语法, 从而能够在绝大部分浏览器中运行. 
    -->

    <!-- 
        上述3个js文件的大小:
        react.min.js        23.04KB
        react-dom.min.js    130.29 KB
        babel.min.js        791.24KB 
    -->
</head>

<body>
<div id="root"></div>
<script type="text/babel"> // 注意这里 text/babel 不可省

    ReactDOM.render(
        <h1>Hello, world!</h1>, // 这是JSX语法
        document.getElementById('root') // 获取到root元素
    );

</script>
</body>
</html>

利用组件带参数输出hello-world

react中1个class定义1个组件, 每个组件都有1个render()方法来渲染页面.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用组件输出hello-world</title>
    <script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">

class HelloMessage extends React.Component {
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}

ReactDOM.render(
    <HelloMessage name="minecraft" />, 
    document.getElementById('root')
);

</script>
</body>
</html>