什么是React？咱們在這不闡述，有關于這方面的介紹可以查閱官網或者互聯網上相關的教程。愛掏網 - it200.com咱們今天來學如何寫一個React組件。愛掏網 - it200.com對于像我這樣初次接觸React的人而言，總感覺React非常的神秘，也無法入手。愛掏網 - it200.com最近也看了一些相關的教程，開始自己嘗試寫一個簡單的React組件。愛掏網 - it200.com
對于現在的前端，配置環境已不是什么新課題，但要完全整明白，還是略要一定的時間。愛掏網 - it200.com@胡子大哈老濕的《React.js小書：基本環境安裝》和@博倫老濕的《從零學習React技術棧: npm的安裝配置和React開發環境配置》兩篇文章都介紹了怎么配置React的環境。愛掏網 - it200.com今天我也是來嘗試一下兩位老濕在文章中介紹的Create React App來創建React項目。愛掏網 - it200.com對于生手而言，Create React App讓我們不再需要考慮怎么來配置React的環境，比如說怎么配置Webpack呀，ES6的編譯環境之類。愛掏網 - it200.com可以專心的去寫React項目。愛掏網 - it200.com
要運行Create React App需要有一個NodeJS的環境，我想現在的前端，電腦中都安裝了NodeJS吧，如果沒有的話，你可以在命令行中執行：
npm i -g npm
這樣就可以了。愛掏網 - it200.com在此基礎上，我們安裝Create React App：
npm i -g create-react-app
執行完命令之后，在你的終端能看到一坨的東西。愛掏網 - it200.com如果你和我一樣，不想了解到底安裝了些什么，可以忽略不計。愛掏網 - it200.com到這為止，你的電腦上已經成功了安裝了create-react-app。愛掏網 - it200.com接下來就可以通過它來創建React項目。愛掏網 - it200.com是不是比其他的省心多了。愛掏網 - it200.com
有了Create React App的環境之后，我們就可以通過它來創建React的項目了。愛掏網 - it200.com
首先打開你的命令終端，進入到你平時工作的環境之下。愛掏網 - it200.com我這里把React項目都放置在了一個react-app目錄下，所以我直接進入到這個目錄下。愛掏網 - it200.com然后通過create-react-app命令來創建一個React項目。愛掏網 - it200.com如下：
create-react-app example-app
執行完這個命令之后，在你的命令終端可以看到像下圖一樣的一坨東西：
這里安裝一些React項目要的依賴，比如react、react-dom和react-scripts之類。愛掏網 - it200.com最后，終端提示你可以執行一些命令：
-
npm start：開始開發服務器（一般本地服務器） -
npm run build：將應用程序捆綁到靜態文件中，以供發布到生產中 -
npm test：啟動測試程序 -
npm run eject：刪除此工具并復制構建依賴項，配置文件和腳本文件到app目錄中。愛掏網 - it200.com如果你這樣做了，是無法回退的
這個時候你其實就已經通過create-react-app創建了一個名為example-app的React項目。愛掏網 - it200.com在example-app自動創建了一些文件夾和文件，其目錄結構類似下圖：
更讓你感到驚喜的是，create-react-app直接在package.json文件中添加好了項目需要配置的項以及相關的依賴關系。愛掏網 - it200.com