react 之 Hello Horld!

時間 2019-11-09

標籤 react hello horld 欄目 React 简体版

原文原文鏈接

Hello world!javascript

其實這是我第一次寫文章，好緊張 - -html

下載react.js
點這個就是地址了
或者用npm install react
注意找出react.min.js 和JSXTransformer.jsjava

而後各位少俠請先新建一個HTML文件，什麼名字無所謂吧react

<!DOCTYPE html>
<html>
  <head>
    <title>react start</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="react.min.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );   
    </script>
  </body>
</html>

很順利頁面就輸出了 Hello, world! 我懶得截圖了 - -git

而後咱們開始分析了github

<script type="text/jsx">

爲蝦米 type = text/jsx
這時候咱們把npm

<script src="JSXTransformer.js"></script>

註釋掉
發現頁面裏面什麼都沒有了 - - 這就對了
會想下script標籤加上text裏面內容就變成了文本了不執行了~
那剛纔怎麼輸出呢，確定和JSXTransformer.js有關咯
哼，我但是過了四級呢！！一看我就明白了這個是個JSX轉換器咯.把jsx類型的文本轉換成正常的js
輸出 plain javascript對吧嘿嘿～spa

這時候把script 的 type去掉 js執行看看code

!!報錯了什麼鬼orm

確實js這麼寫語法都不經過了

JSX是facebook本身定的協議經過JSXTransformer.js轉換就正常執行了.
好了着時候開始吐槽了!
我明明是來學react 寫一個hello world的爲何多出來一個JSXTransformer啊？
一點心理準備都沒有啊！你叫我學我就學？這不在我計劃以內啊，我想一步步來弄啊～。
能不能只用react.js寫一個hello world啊!

能

<!DOCTYPE html>
<html>
  <head>
    <title>react start</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="react.min.js"></script>
<!--    <script src="JSXTransformer.js"></script>-->
    <script>

        var Hello = React.createClass({
            render: function(){
                return (
                    React.createElement('div',{},'Hello world!')
                )
            }
        })
        React.render(
            React.createElement(Hello),
            document.getElementById('example')
        );

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

仍是用JSX吧雖然一開始讓我用我是拒絕的，但寫了兩天發現也習慣了，何況人家是大公司對吧他們這麼用必定有他們的道理，之後項目作大，天然會領悟其中的道理。

1. 【01】react 之 hello world
2. react native 之hello world
3. React-Native之Hello World
4. react-native-----hello word！
5. react Hello World！-----jsx
6. react "hello world!"
7. React 系列一：Hello React
8. react學習系列之Hello Mr World
9. react文檔 Hello World
10. React學習Hello World！
更多相關文章...
• Docker Hello World - Docker教程
• Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。