安裝 React 及創(chuàng)建 app

本人部分內(nèi)容已過時(shí),詳見:https://zh-hans.reactjs.org/docs/create-a-new-react-app.html




1. 安裝 Node.js

下載地址:https://nodejs.org/en/

Windows 用戶推薦安裝 LTS 版本的 node,使用最新版在安裝工具時(shí)可能會(huì)不成功,這可能是 npm 的版本問題導(dǎo)致的

2. 使用 npm 安裝 React

$ npm i -g create-react-app@1.5.2

i 表示安裝,-g 表示全局,@ 后面是指定安裝版本號(hào)。

3. 創(chuàng)建第一個(gè) app

$ create-react-app react-app

注意,react-app 是創(chuàng)建的 app 的名字

4. 運(yùn)行 app

進(jìn)入到剛才創(chuàng)建的 app 根目錄

$ cd react-app

運(yùn)行:

$ npm start

這將會(huì)在本機(jī)的 3000 端口運(yùn)行 React 程序,我們?cè)跒g覽器打開:http://localhost:3000/ ,將會(huì)看到初始化的 React 頁面。

5. Hello World

我們看看新建的 React app 文檔結(jié)構(gòu),有三個(gè)文件夾:node-modulespublic,src。

我們把 src 文件夾里面的文件全部刪除,新建一個(gè) index.js 文件,寫入以下代碼:

import React from 'react';
import ReactDom from 'react-dom';

const element = <h1>Hello world!</h1>;
ReactDom.render(element, document.getElementById('root'))

刷新頁面,就能看到 Hello World! 頁面了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 好多人說rn好用,一直要推薦我用,我就不信了,來安裝玩一下試試效果。實(shí)踐出真知!安裝過程各種坑,工具太多了,太麻煩...
    AWeiLoveAndroid閱讀 2,452評(píng)論 0 12
  • Node.js第一天 1. 初識(shí)Node.js 1.1 Node.js是什么 Node.js? is a Java...
    再見天才閱讀 4,898評(píng)論 1 24
  • 竊國大盜·第一章 城郊戰(zhàn)場 高地上,將軍與他的幕僚們騎在馬背上,眺望著遠(yuǎn)處硝煙彌漫的戰(zhàn)場,雖然那里距此五里遠(yuǎn),但刺...
    新金山的烏鴉閱讀 359評(píng)論 0 1
  • 不能因?yàn)榕ΧУ羯畹牟糠郑ぷ髦皇菫榱烁玫纳?,什么時(shí)候都不要忘記生活的本身
    讀書文化人閱讀 221評(píng)論 0 0
  • 四分 一大早進(jìn)班,還沒來得及看看學(xué)生的情況,昨天值日的學(xué)生會(huì)一臉的無奈告訴我,我們班誰...
    樹上魚閱讀 406評(píng)論 0 4

友情鏈接更多精彩內(nèi)容