react基於nodejs簡單的搭建與開發方法

2022-02-17 10:08:55 字數 2316 閱讀 6258

只需安裝babel命令,即可將react的jsx寫法轉換成瀏覽器認識的js寫法

2.cmd開啟命令列,cd進入在自己的資料夾下

執行命令:

npm install --global babel-cli

npm install babel-preset-react

若本機npm無法安裝完成,可以使用cnpm:如文:

3.執行完成後,將jsx寫法的react檔案進行轉換(此處已helloworld.js為例)

reactdom.render(

, document.getelementbyid('example')

);

在該檔案的目錄下執行命令:

babel --presets react helloworld.js --watch --out-dir helloworld

轉換後的js檔案將會生成在helloworld資料夾中。開啟後是這樣的:

reactdom.render(react.createelement(

'h1',

null

, 'hello, world!'), document.getelementbyid('example'));

4.react jsx寫法(babel轉換前):

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>hello react!

title

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

head

>

<

body

>

<

div

id="example"

>

div>

<

script type="text/babel"

>

reactdom.render(

<

h1>

hello, world

!<

/h1>,

document.getelementbyid(

'example')

);script

>

body

>

html

>

5.react js寫法(babel轉換後)

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>hello react!

title

>

<

script

src=""

>

script

>

<

script

src=""

>

script

>

head

>

<

body

>

<

div

id="example"

>

div>

<

script

>

reactdom.render(react.createelement(

'h1',

null

,

'hello, world!

'), document.getelementbyid(

'example

'));

script

>

body

>

html

>

基於nodejs 的微信 JS SDK 簡單應用

一 準備工作 二 開始編碼 大概需要4個步驟 1.獲取 access token 2.根據 access token 獲取 jsapi ticket 4.將資訊返回給前端 設定wx.config。由於獲取access token 和 jsapi ticket 的介面都有訪問限制,所以明確指出需要第三...

nodejs基於事件通訊

話說nodejs是非同步呼叫的,所以無法用return返回結果。有兩種解決方式 callback函式和事件。兩種方式相比起來事件的方式更加簡潔。nodejs裡的事件主要使用它的events模組,繼承eventemitter。這裡寫了乙個monitorevent類 var util require u...

NodeJS簡單例項

前提確保你的nodejs已經安裝成功。1.我在 d new project nodejs 2017 12 29 資料夾下建立了demo.js 放入一下面 2.win r,調出cmd,回車進入。1 輸入 上面路徑 cd d new project nodejs 2017 12 29 回車 2 再輸入 ...