美文网首页
React之HelloWorld

React之HelloWorld

作者: yanghanbin_it | 来源:发表于2017-06-06 17:53 被阅读0次

    第一个程序HelloWorld

    1. 先安装react,react-dom,babel
      在0.14版本发布后,react拆分为react,react-dom,同时弃用了react-tools 及 JSXTransformer.js,推荐使用babel(javascript编译器)来编译JSX。
    mkdir helloreact
    cd helloreact
    npm init --yes
    npm install react react-dom babel-standalone --save
    
    1. 新建hello.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello React</title>
        <script src="./node_modules/react/dist/react.js"></script>
        <script src="./node_modules/react-dom/dist/react-dom.js"></script>
        <script src="./node_modules/babel-standalone/babel.js"></script>
    </head>
    <body>
        <div id="app"></div>
    
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello World!</h1>,
                document.getElementById('app')
            );
        </script>
    </body>
    </html>
    
    1. 在浏览器中运行hello.html
    image.png

    相关文章

      网友评论

          本文标题:React之HelloWorld

          本文链接:https://www.haomeiwen.com/subject/fthnfxtx.html