react 基礎入門

環境搭建

1.電腦裡必須裝node.js

2.全域性npm命令安裝react環境
3.建立react專案demo
(專案名)
4.啟動react專案
:npm start

目錄結構

.json 專案配置

2.public裡面存放公共內容，主要是index.html入口檔案

3.src裡面存放專案元件，樣式，和資源等，新建乙個專案以後，

可以在src目錄下，建立乙個components資料夾，存放元件js， 建立乙個assets目錄

，存放css、資源等。

建立乙個子元件和引用。 render()。 render()中return出去的部分是html**，在react中稱之為jsx。

import react,

from 'react'
;import
'../assets/css/child1.css'
;class
child1
extends
component
}export default child1;

import react,

from 'react'
;import
;// 引入子元件
import child1 from './components/child1'
;class
extends
component
}

變數宣告與在jsx中使用

在建構函式中宣告，建構函式中必須有super()方法，否則下面**無法執行。變數以物件的形勢，在this.state中定義。 在jsx中使用變數的時候用大括號括起來{}， 格式為

import react,

from 'react'
;import
'../assets/css/child1.css'
;class
child1
extends
component}}
render()
,今年歲了<
/p>
姓--<
/p>
名--<
/p>
<
/div>);
}}export default child1;

其他資料繫結

樣式class繫結， 不可以用class， 要用classname

內聯樣式要寫在雙括號內 ，格式和js的style樣式設定基本相同，style=}。

也可以以物件的方式定義在公共變數裡，那麼在使用的時候就是單括號引用了，style=

for要替換成 htmlfor

import imgurl from "../assets/images/1.png"

;} src=
alt=""/
>
>
} src=
alt=""/
>
} src=
"" alt=""/
>

可以有兩種方式，第一種在render中定義變數，對陣列進行map操作，然後賦值給變數。 在jsx**中引用變數， 第二種直接在**塊中對陣列/物件進行map函式操作

(注意: key一定要有， 且key值不可以重複)

import react from 'react'

;import
'../assets/css/child2.css'
;import imgurl from "../assets/images/1.png"
;class
child2
extends
react.component,,
,,]}
}render()
>
<
/li>})
return
("child2"
>
<
/ul>
>
<
/li>);
})}<
/ul>
<
/div>);
}}export default child2;

react入門基礎 名字之間的關聯

路由可視為組成應用的不同頁面，建立routes productsfile.js 如下圖 在router.js中配置路由表 加入紅框標出的兩行 如下圖 接下來，在此處來嘗試搞清楚眾多命名之間的關係。首先，建立的檔案名字要和路由中import引入的路徑名字一致，productsfile，如下圖 元件名字...

react 開發入門

三子棋遊戲 安裝react 建立本地伺服器 啟動執行 直接通過命令安裝 修改測試初始化 刪除src目錄下所有檔案 複製中的index.css和index.js檔案 啟動檢視npm start 增加互動 使用陣列將歷史資料儲存在最上層的game中，可以訪問歷史步驟，如下 import react fr...

React入門例項

react 的核心思想是 封裝元件，各個元件維護自己的狀態和ui，當狀態變更，自動重新渲染整個元件。理解 react首先值得拍手稱讚的是它所有的開發都基於乙個元件 component 元件和元件之間傳遞方法，而且每個元件都有乙個狀態 state 當方法改變了這個狀態值時，整個元件就會重繪，從而達到重...