React.js 小書 Lesson5 - React.js 基本環境安裝

zilu 發布于2019-08-21 17:32 / 3286人閱讀

摘要：工具地址在安裝之前要確認你的機器上安裝了環境包括。安裝好環境以后，只需要按照官網的指引安裝即可。所以可以把的源改成國內的的源，這樣會加速下載過程。接下來我們會探討的組件的基本寫法小書使用描述信息。

React.js 小書 Lesson5 - React.js 基本環境安裝

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson5

轉載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

安裝 React.js

React.js 多帶帶使用基本上是不可能的事情。不要指望著類似于 jQuery 下載放到標簽就開始使用。使用 React.js 不管在開發階段生產階段都需要一堆工具和庫輔助，編譯階段你需要借助 Babel；需要 Redux 等第三方的狀態管理工具來組織代碼；如果你要寫單頁面應用那么你需要 React-router。這就是所謂的“React.js全家桶”。

本課程不會教大家如何配置這些東西，因為這不是課程的重點，網上有很多的資料，大家可以去參考那些資料。我們這里會直接使用 React.js 官網所推薦使用的工具 create-react-app 工具。它可以幫助我們一鍵生成所需要的工程目錄，并幫我們做好各種配置和依賴，也幫我們隱藏了這些配置的細節。也就是所謂的“開箱即用”。

工具地址：https://github.com/facebookincubator/create-react-app

在安裝之前要確認你的機器上安裝了 node.js 環境包括 npm。如果沒有安裝的同學可以到 node.js 的官網下載自己電腦的對應的安裝包來安裝好環境。

安裝好環境以后，只需要按照官網的指引安裝 create-react-app 即可。

npm install -g create-react-app

這條命令會往我們的機器上安裝一條叫 create-react-app 的命令，安裝好以后就可以直接使用它來構建一個 react 的前端工程：

create-react-app hello-react

這條命令會幫我們構建一個叫 hell-react 的工程，并且會自動地幫助我們安裝所需要的依賴，現在只需要安靜地等待它安裝完。

額外的小貼士：

如果有些同學安裝過程比較慢，那是很有可能是因為 npm 下載的時候是從國外的源下載的緣故。所以可以把 npm 的源改成國內的 taobao 的源，這樣會加速下載過程。在執行上面的命令之前可以先修改一下 npm 的源：

npm config set registry https://registry.npm.taobao.org

下載完以后我們就可以啟動工程了，進入工程目錄然后通過 npm 啟動工程：

cd hello-react
npm start

終端提示成功：

并且會自動打開瀏覽器，就可以看到 React 的工程順利運行的效果：

這時候我們把 src/App.js 文件中的

標簽的內容修改為 Hello React，

Hello React

保存一下，然后戶就會發現瀏覽器自動刷新，并且我們的修改也生效了：

到這里我們的環境已經安裝好了，并且順利地運行了我們第一個例子。接下來我們會探討 React.js 的組件的基本寫法——《React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息》。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89647.html

React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態上面的結構和內容行為，組件的顯示形態和行為可以由數據狀態和配置參數共同決定。接下來我們開始正式進入主題，開始正式介紹。下一節鏈接直達小書基本環境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 評論0 收藏0
寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
2017-09-13 前端日報

摘要：前端日報精選中的垃圾收集，圖文指南十個免費的前端開發工具專題之遞歸如何在鏈中共享變量基于的爬蟲框架中文譯十六進制顏色揭秘掘金掘金小書基本環境安裝小書教程中間件對閉包的一個巧妙使用簡書源碼分析掘金組件開發練習焦點圖切換前端學 2017-09-13 前端日報精選 V8 中的垃圾收集（GC），圖文指南十個免費的web前端開發工具JavaScript專題之遞歸 · Issue #49 · m...

BWrong 2019-08-22 11:05 評論0 收藏0
React.js 小書 Lesson9 - 事件監聽

摘要：在不需要手動調用瀏覽器原生的進行事件監聽。沒有經過特殊處理的話，這些的事件監聽只能用在普通的的標簽上，而不能用在組件標簽上。的事件監聽方法需要手動到當前實例，這種模式在中非常常用。下一節中我們將介紹小書組件的和。 React.js 小書 Lesson9 - 事件監聽本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson9 轉載請...

yanbingyun1990 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作

摘要：多余的操作其實是代碼里面的噪音，不利于我們理解和維護。下一節中我們將介紹小書和容器類組件。 React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson21 轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huziketan...

Gemini 2019-08-21 17:34 評論0 收藏0