因?yàn)閭€(gè)人是第一次接觸react,所以搭建環(huán)境就暈頭轉(zhuǎn)向。作為一個(gè)新人,我覺得走點(diǎn)彎路是值得的!以前接觸html的時(shí)候只需要在編輯器中寫好代碼然后一個(gè)運(yùn)行便能在網(wǎng)頁中看到實(shí)實(shí)在在的效果,所以一開始我就把這個(gè)思想給搬到學(xué)習(xí)react上面去了,結(jié)果,你懂得。。。
一開始的我就沒有能夠正確地搞清楚react, react.js, react-native,現(xiàn)在差不多搞清楚之后我倒覺得之前走的彎路并不是沒有價(jià)值的。在查閱許多資料和看了不少相關(guān)視頻之后,我終于成功地搭建好了react.js的環(huán)境!
本人菜鳥一枚,有錯(cuò)誤的地方請(qǐng)大神指正!
首先,下載好node.js,接著我們就可以開始啦。
因?yàn)槲沂褂玫氖莣indows操作系統(tǒng),所以按Win + R 鍵打開命令窗口,輸入下面的命令:
npm install -g create-react-app
接著輸入:create-react-app hello-react? ? 這條命令會(huì)幫我們構(gòu)建一個(gè)叫hello-react的工程,并且會(huì)自動(dòng)地幫助我們安裝所需要的依賴,現(xiàn)在只需要安靜地等待它安裝完。
額外的小貼士:如果有些同學(xué)安裝過程比較慢,那是很有可能是因?yàn)?npm 下載的時(shí)候是從國外的源下載的緣故。所以可以把 npm 的源改成國內(nèi)的 taobao 的源,這樣會(huì)加速下載過程。在執(zhí)行上面的命令之前可以先修改一下 npm 的源:
npm config set registry https://registry.npm.taobao.org
下載完之后我們就可以啟動(dòng)工程了,輸入:
cd hello-react
npm start
靜靜地等待一會(huì)兒就可以看到瀏覽器啟動(dòng)并跳出這個(gè)界面!
然后我們就可以按照上面的提示到src/App.js的文件中進(jìn)行相關(guān)的操作。比如,我們把<h2>中的Welcome to React!修改為Hello React,這是瀏覽器界面就會(huì)自動(dòng)改變。
學(xué)好學(xué)懂react還有很長的路要走,加油吧!騷年!