React之HelloWorld

第一個程序HelloWorld

  1. 先安裝react,react-dom,babel
    在0.14版本發(fā)布后,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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,944評論 1 18
  • JSX是React的核心組成部分,它使用XML標記的方式去直接聲明界面,界面組件之間可以互相嵌套??梢岳斫鉃樵贘S...
    可樂愛上咖啡閱讀 72,334評論 1 63
  • Yes, React is taking over front-end development. The ques...
    Transnet2014閱讀 1,050評論 0 2
  • 現(xiàn)在最熱門的前端框架,毫無疑問是 React 。上周,基于 React 的 React Native 發(fā)布,結果一...
    sakura_L閱讀 488評論 0 0
  • 1.建立thinkjs項目 thinkjs new think-demo //建立 thinkjs 項目 npm ...
    芹菜斯_嘉麗閱讀 2,483評論 2 2

友情鏈接更多精彩內容