小白學習React官方文檔看不懂怎么辦?1.起步


  最近在上React課程的時候,發現好多同學不會看文檔,所以在這里寫一篇文章,希望能給同學們一點點啟發。
  我們首先打開React官方網站——https://react.docschina.org/docs/getting-started.html,我建議各位從頭開始看,首先看到最右邊的導航欄里第一條是安裝,這肯定就是我們React學習的起步了:
  安裝里面點擊開始,這里面有好多選擇,可以供我們體驗React、在網站中添加React等,可以花一點時間在這里看看,看得懂作為了解,看不懂也無所謂,這里涉及到的概念比較多,沒必要剛開始就全消化掉,一口吃不成胖子,步子邁大了,咔嚓,容易扯着蛋。
    接下來我們在右邊導航欄安裝=>在網站中添加React,這些是在其中做了一個小demo讓你熟悉React。對照方案自己敲一下,接下來是我們要講的重點了。
    點擊核心概念,找到Hello,World,到這一步的時候好多同學就開始蒙了,我到底要引入幾個js文件,其實是需要我們引入三個,
 
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    要注意,順序不能錯,引入順序不對,也會導致錯誤另外上述引用的適用於生產環境(也就是被壓縮過)的代碼,然后我們將代碼寫成下述即可在頁面中的div#root中插入”Hello,World“的h1標簽
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello,World</title>
</head>
<body>
    <div id="root"></div>
    <!--注意這里有個div#root-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // 注意這里改成type="text/babel"
        ReactDOM.render(
            <h1>Hello,World</h1>,
            document.getElementById("root")
        )
    </script>
</body>
</html>
如果上述代碼成功,那么我們的React入門就算完成了。接下來,如果不希望用雲端的script,也可以保存到本地,比較快的辦法是,用瀏覽器打開上述頁面,然后頁面右鍵打開源代碼,在源代碼中找到我們引入的js,全選然后在本地新建三個對應名字的js文件分別粘貼進去即可。
 
 想繼續學習,請繼續查看下一篇文章
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM