react開發環境

2022-06-25 03:42:10 字數 1052 閱讀 9418

1、引用檔案方式

2、腳手架環境(三個包)

[yarn add react

yarn add react-dom

yarn add babel-standalone

]1、 umd包—>react.develoment包放到自己資料夾

2、yarn add react-dom (安裝第二個包,用於網頁開發)

將react-dom develoment檔案匯入到js檔案下

3、新建test.html,將上面兩個檔案引入,核心包放在最上面reactdom.render("hello,,world",掛載(document.getelementbyid('box')))

3、安裝babel(es5=>es6) 將檔案放入 js中引入

1、是一種語法糖,js擴充套件的意思,相當於js+xml

2、jsx的原理是:

react.createelement(標籤,屬性,內容)

(不是必須的,但是可以提高可開發效率)

3、注意事項

1、物件不能直接渲染

2、陣列可以直接渲染

3、標籤內的class需改成classname

4、繫結事件首字母大寫onclick=}

5、react的插值表示式是乙個{}

4、行內樣式的書寫

var a =

兩個大括號,

第乙個屬於插值表示式,

第二個表示為乙個物件

5.建立的節點都放在記憶體中,虛擬dom中,渲染時才會從記憶體中調出

1.yarn 和npm 命令對比**

2.腳手架自帶的伺服器是webpack-dev-server

專案的目錄/node_modules/react-scripts/scripts/start.js

改埠 const default_port = parseint(process.env.port, 10) || 5000;

本章主要介紹react的環境搭建,jsx的簡單實用,jsx的原理

react 搭建react開發環境

搭建react開發環境有兩種 1 必須要安裝nodejs 注意 安裝nodejs穩定版本 2.安裝腳手架工具 單檔案元件專案生成工具 只需要安裝一次 3.建立專案 可能建立多次 找到專案要建立的目錄 4.cd 到專案裡面 cd reactdemo npm start yarn start執行專案 n...

React開發環境搭建

一 準備環境 1 必須安裝nodejs 注意 安裝nodejs穩定版本 2 安裝cnpm用cnpm替代npm 安裝命令 npm install g cnpm registry 警告提示版本問題,可以忽略。3 用yarn替代npm yarn的安裝 第一種方法 參考官方文件 第二種方法 cnpm ins...

react的開發環境

react 一 開發環境 兩種方式 1 引用檔案方式 2 腳手架環境 三個包 yarn add react yarn add react dom yarn add babel standalone 1 umd包 react.develoment包放到自己資料夾 2 yarn add react do...