寫在前面
從這篇文章開始，我們重新來學習一下React的官網，本文從經典的Hello World示例開始，給大家介紹下react應用的創建，通過本文的介紹，我們學會新建一個react應用，
概述
React其實就是一個JS檔案庫，本質上跟我們的jQuery這些JS庫是一樣的，所以大家在開始的時候不要有任何的心理負擔，覺得它很難，其實它一點都不難，這篇文章我們先來新建第一個react應用，
專案demo地址
https://github.com/xuqwCloud/reactbasic
React使用方法
React使用方法有兩種，第一種就跟jQuery一樣，在我們的HTML頁面中通過<script>標簽引入；第二種是借助npm這個包管理工具，將它通過"npm install react"的方式安裝到我們的專案中，
在我們這個系列的文章中我們采用第二種方式來給大家介紹，因為第一種方法雖然說是行得通的，但是目前我們前端開發基本都是清一色的SPA單頁面應用，專案底層全部是采用webpack這些主流的打包工具來構建的，所以第一種方法在實際專案開發中用的不是很多，
React應用創建
采用第二種方式來創建一個react的專案應用的話，是需要在專案中配置一些webpack的簡單配置，還要配置babel這些轉義工具什么的，特別麻煩，如果你對這個程序感興趣的話，可以在我的博客分類【React進階】中查看《如何從零創建一個react應用》這一篇文章，里面有詳細的記錄，我們在此處就不耽誤時間來介紹這些東西，剛開始學習react的話這些東西大家可以先不用關注，把精力放在react上就行，
我們在這里創建react專案應用的時候直接使用react官方提供的一個腳手架工具，叫"create-react-app"，通過這個工具，我們可以使用一行命令就可以創建一個基礎的、配置好的、可以直接拿來就用的react專案，這個工具使用的前提是你的電腦上已經安裝了node環境，
我們新建一個檔案夾，然后進入此檔案夾之后鍵盤按住shift鍵并且滑鼠右擊，選擇"在此處打開Powershell視窗"，然后輸入命令"npx create-react-app reactbasic"來創建第一個react應用，如下：
Hello World撰寫
react應用創建完成之后，在命令列面板會提示我們通過命令"cd reactbasic"進入專案目錄，然后通過命令"npm start"來啟動專案，我們依次輸入這兩個命令來啟動專案，如果你看到如下所示的面板，說明我們的react應用創建成功，它會自動打開我們的瀏覽器并且監聽3000埠：
有了一個基礎的專案應用之后，我們接下來撰寫第一個react應用程式——Hello World，
我們先用代碼編輯器打開新建的專案，然后洗掉掉src目錄下除了index.js檔案以外的所有檔案，最后專案的檔案目錄及index.js檔案里的代碼如下：
index.js檔案代碼：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);然后我們將下面的代碼替換到index.js檔案中保存后，查看頁面，發現Hello World成功展示在了我們的瀏覽器頁面中：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<span>Hello World</span>, document.getElementById('root'));
至此，我們的Hello World應用撰寫成功，到目前為止，你肯定有一大堆疑惑：明明是一份js后綴的檔案，為啥里面可以寫<span>標簽？import導進來的React都沒有使用，為啥最上面這一行刪掉后會報錯？我代碼復制粘貼后按保存，瀏覽器頁面都沒有點擊重繪按鈕，頁面怎么自動重繪了？這些專案里我就改了改index.js這一個檔案，那其他檔案是做什么的……
如果你有上述的問題，請保留你的疑問，接下來的文章中我們會一一解答，本文就到此結束了，這一篇文章其實大家只需要知道react的兩種使用方式，并且學會使用"create-react-app"創建react應用即可，
CSDN認證博客專家
ECMAScript 6
WebPack
小程式
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/173771.html
標籤：java
上一篇：【leetcode】每日精選題詳解之陣列：啥？要移除我的元素？
下一篇：gulp自動生成精靈圖