React基礎學習（第一天）

概述 : 特點

基於元件

學習一次, 隨處使用

我們現在做的是web頁面 

=> ios/android殼子(前端**)

包管理器/工具 npm cnpm yarn

npm 最火的 + **映象

cnpm 國內 (demo => ok 專案=> cnpm 不要弄)

yarn : facebook

​ 使用前必須安裝 yarn 的執行模組npm i yarn -g

react 的基本使用

需求 :

"./node_modules/react/umd/react.development.js"

>
<
/script>
"./node_modules/react-dom/umd/react-dom.development.js"
>
<
/script>

// 引數1 : 元素名稱

// 引數2 : 屬性 (物件)
// 引數3+ : 內容
const h1 = react.
createelement
('h1',,
'我是h1'
)

準備乙個容器

"root"
>
<
/div>
// 3.2 開始渲染
// 引數1 : 需要渲染的react元素/react元件
// 引數2 : 指定頁面中的dom容器
reactdom.
render
(h1, document.
getelementbyid
('root'
))

// 引數1 : 元素名稱 , 表示要建立的標籤名稱 (html標籤)

// 引數2 : 屬性 (物件), 如果有就傳物件,沒有就傳null
// 引數3+ : 子節點 
// 1-文字節點 字串 
// 2-元素節點 react.createelement() 建立)
const h1 = react.
createelement
('div'
,null
,// span
react.
createelement
('span'
,null
,'我是span'),
react.
createelement
('p'
,null
,'我是p'
))

不推薦使用for, 而推薦使用 htmlfor

屬性推薦使用 駝峰命名

// for 在 label 上的使用

=>姓名<
/label>
"text"
/>

"list"

class
='red'
>
>
蘋果li
>
>
香蕉li
>
>
橘子li
>
ul>

安裝腳手架-初始化專案-01-npm

安裝腳手架-初始化專案- 02 - npx (官網推薦)

npx : 簡化了工具包中命令的使用方法

npx 內部執行的操作：

我們推薦使用這一種, 因為以後實際上開發,不可能每天都要初始化乙個專案, 而是從專案開始到結束只會初始化乙個專案而已

簡單演示 :

// 1 匯入 react 和 reac-dom

import react from
'react'
import reactdom from
'react-dom'
// 2 建立 react 元素
const h1 = react.
createelement
('h1'
,null
,'hello react cli'
)// 3 渲染 react 元素
reactdom.
render
(h1, document.
getelementbyid
('root'
))

const ul = react.

createelement
('ul',,
react.
createelement
('li'
,null
,'蘋果'),
react.
createelement
('li'
,null
,'香蕉'),
react.
createelement
('li'
,null
,'橘子'
))

const ul =

"list" classname=
'red'
>
蘋果<
/li>
香蕉<
/li>
橘子<
/li>
<
/ul>

為什麼要使用 jsx ？ : 爽

jsx 的基本使用和注意點

// 使用 jsx 建立 react 元素

const h1 =
"cls"
>hello jsx
!<
/h1>
// 渲染 react 元素
reactdom.
render
(h1, document.
getelementbyid
('root'
))

const h1 =

('cls'
> 我是div<
/div>
'cls'
> 我是div<
/div>
<
/div>
)

可以使用表示式

不能使用

注意點 :屬性內可以使用 {}

react學習第一天筆記

繫結屬性注意 class要變成classname for要換成htmlfor style要轉換成 我是紅色的div 行內樣式 其他的屬性和其他的寫法是一樣的 引入本地 import logo from assets images logo.jpg class news extends compone...

第一天接觸react

很明顯的感覺到它與vue的相似之處，但目前我發現一點不同，vue在改變其data中的值後立馬就能查到值的改變，而react是在render後其值才改變。在我了解最基礎的部分後，想著實踐一下，於是出現了以下 其功能是類似 的功能。其中有一點值得注意。在react中使用行內樣式時，如transform的...

python基礎學習第一天

python和c語言熟練 所有程式都是順序執行的 python開發規範，每一行不能超過80個字元 python 注釋與c語言差別較大 單行注釋 多行注釋 input預設接受的是字串 注意型別的轉換 條件語句 例子 猜年齡遊戲 usr bin env python coding utf 8 autho...