為什么要使用React框架？
起初的前端，一個頁面可能要引用多個css樣式文件或者js腳本文件，但是由于樣式名稱或函數(shù)名可能存在重復(fù)术吝，而且樣式和函數(shù)都是全局變量，所以容易造成混亂茸苇，不利于頁面修改也不利于代碼復(fù)用排苍。
react框架通過用JS來寫HTML和CSS實現(xiàn)代碼組件化，消除了全局變量帶來的危害税弃，方便修改和代碼復(fù)用纪岁。
react install
- 首先確保電腦上安裝了node。
可以用如下方法測試是否安裝了node(windows環(huán)境)：
- 打開cmd则果，輸入
node -v,如果顯示了相關(guān)版本信息幔翰，說明node已安裝 - 在cmd中輸入
npm -v,如果顯示了相關(guān)版本信息，說明npm已安裝西壮。
- 安裝react
npm install -g create-react-app
3.新建react項目
create-react-app my-app
- 查看react是否正確安裝
cd my-app
npm start
ES6語法
- class 是ES6定義類的關(guān)鍵詞遗增。
- 當(dāng)要引用多個類或者函數(shù)時，除第一個類或函數(shù)款青，其余都寫在花括號內(nèi)
- extends 是ES6定義 繼承 的關(guān)鍵詞做修，后面跟著要繼承的父類。
- export 表示導(dǎo)出抡草，單個函數(shù)/類在文件尾部加上
export default（默認(rèn)導(dǎo)出）+ 類/函數(shù)名饰及；多個函數(shù)或類導(dǎo)出時，要用export {class1康震，class2}導(dǎo)出燎含，否則類/函數(shù) 不可被其他文件調(diào)用。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Hello React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
什么是JSX腿短？
JSX是JavaScript Xhtml 的簡寫屏箍。
Xhtml 相較于其他html，語法要求更為嚴(yán)格橘忱。
例如：所有標(biāo)簽必須閉合赴魁，單個閉合標(biāo)簽尾部必須寫/。
<h1> </h1>
<img />
JSX語法
- 所有標(biāo)簽必須閉合钝诚，單個閉合標(biāo)簽尾部必須寫/ 颖御；
- 由于html關(guān)鍵詞與JSX關(guān)鍵詞沖突，在JSX代碼中用className代替class凝颇，htmlFor代替for 潘拱；
- JSX代碼執(zhí)行規(guī)則：遇見<>時秉继，用html語法解析，遇見{ }用js語法解析 ;
- render表示渲染泽铛，render是Component下的方法，此處是重定義render方法 ;
- return 后的內(nèi)容必須寫在小括號內(nèi),括號里的內(nèi)容必須是一個閉合的標(biāo)簽 辑鲤。
- 在JSX中我們通常是通過 {} 的方式插入值盔腔，但是設(shè)置style屬性需要{{ }} ,否則系統(tǒng)會報錯。
import classes form './myCss.css'
{/*JSX 中的注釋方式*/}
{/*style屬性必須使用 {{}} */}
<div style={{width: 20px; height=30px}}>
{ props.text }
</div>
{/*html class屬性*/}
<div className="myClass"></div>
{/*html input標(biāo)簽, JSX中所有的標(biāo)簽都必須有閉標(biāo)簽*/}
<input type="text" />
{/*html label標(biāo)簽 */}
<label htmlFor="name" class="mayName"></label>
{/*調(diào)用.css 文件中的css屬性, mycss 為css文件中的類*/}
<div className={classes['mycss']}></div>
react語法
- React 要求class 類名首字母必須大寫月褥，否則無法渲染 ;
- Component 是React的組件弛随，所有自定義的React組件必須繼承Component ;
部署React應(yīng)用到python-django生產(chǎn)環(huán)境
- 運行
npm run build將會在 build 文件夾中創(chuàng)建一個編譯好的應(yīng)用， - 將
build文件夾下的static下的css和js添加進(jìn)django工程文件中的statics文件夾下宁赤； - 將
build文件夾下的index.htm文件復(fù)制到templates文件夾中舀透； - 在django
views文件夾下創(chuàng)建新的視圖函數(shù)并添加一個鏈接 ； - 在django settings文件下添加
STATIC_URL = '/statics/'設(shè)置讀取靜態(tài)文件的路徑决左。
在React中添加樣式
方法一：導(dǎo)入css文件
- import CSS文件
import "./App.css"; - 在React代碼中設(shè)置標(biāo)簽屬性來添加樣式愕够，屬性名為className ，屬性值為css文件中對應(yīng)的樣式名佛猛。
Html 塊級元素和行內(nèi)元素
區(qū)別：默認(rèn)在一行內(nèi)顯示的元素是行內(nèi)元素惑芭，默認(rèn)分行顯示的元素是塊級元素
轉(zhuǎn)換：在CSS樣式中，通過 display屬性進(jìn)行轉(zhuǎn)換继找，屬性值block表示塊級元素遂跟，屬性值inline表示行內(nèi)元素
import "./App.css";
class App extends Component{
render(){
return(
<div>
<h1>Hello {"Word"}</h1>
<form>
<input type="text" placeholder="name" className="button"/>
<input type="password" placeholder="password" className="button"/>
<input type="button" value="submit" className="button"/>
</form>
</div>
)
}
}
方法二：內(nèi)聯(lián)樣式
- 在類/函數(shù)的方法內(nèi)，創(chuàng)建一個新的dict變量婴渡，以key-value的形式保存樣式幻锁。
- 此dict變量名，必須用駝峰式命名边臼，不能用連字符哄尔。
- value值必須為字符串；
- 在同個類/函數(shù)的方法的return括號內(nèi)硼瓣，直接在<>內(nèi)引用樣式
style={button}
class App extends Component{
render(){
let button = {
display:"block",
border:"solid 2px red",
color:"white",
backgroundColor:"grey",
}
return(
<div>
<h1>Hello {"Word"}</h1>
<form>
<input type="text" placeholder="name" style={button} />
<input type="password" placeholder="password" style={button}/>
<input type="button" value="submit" style={button}/>
</form>
</div>
)
}
}
方法三：CSS in JS
- 安裝styled-components：
在cmd內(nèi)輸入npm install styled-components
(必須是局部安裝究飞，如果加上-g 全局安裝npm install -g styled-components，就無法找到這個模塊) - import sytled
import styled from "styled-components" - 在類/函數(shù)的方法內(nèi)堂鲤，用關(guān)鍵字
const直接定義一個常量亿傅，常量名首字母必須大寫，等號右邊styled.+ 標(biāo)簽名 + ```（一對反引號）瘟栖，在反引號內(nèi)直接寫css樣式代碼 - 在類/函數(shù)的return括號內(nèi)葵擎，直接以常量名作為組件來使用，可以在組件內(nèi)增加屬性（組件其實就是用JS寫的自定義標(biāo)簽）半哟。
import styled from "styled-components"
class App extends Component{
render(){
const Input = styled.input`
display:block;
border:solid 2px red;
color:red;
background-color:yellow
input:hover{background-color:blue}
`
let button = {
display:"block",
border:"solid 2px red",
color:"white",
backgroundColor:"grey",
}
return(
<div>
<h1>Hello {"Word"}</h1>
<form>
<input type="text" placeholder="name" style={button} />
<input type="password" placeholder="password" style={button}/>
<Input type="number" />
<input type="button" value="submit" style={button}/>
</form>
</div>
)
}
組件react和setState
- 在react中酬滤，屬性值不能修改签餐，要在類的頂部初始化
this.state的值
constructor () { //函數(shù)constructor()類同于django里的def __init__():{}
super() //The super keyword is used to access and call functions on an object's parent.
this.state = { isLiked: false } //以dict形式初始化this.state值。this類同于django里的self
}
- 方法中盯串，當(dāng)要修改this.state屬性值時氯檐，要用關(guān)鍵字
this.setState
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked // ‘！’表示邏輯“非”
})
}
- 三元表達(dá)式
function three(x){
if (x){
return 1
}else{
return 2
}
}
等同于
function four(x){
return x?1:2
}
React中props的用法体捏？
- 在React中冠摄，需要改變的值用this.state來定義；不需要改變几缭，只需要傳參的值用this.props來定義河泳。
- “this."是在ES6語法類中的定義，相當(dāng)于python中類中的“self”
- 調(diào)用React組件時年栓，要給組件傳參
<Ctable hea={hea} colu={colu} />
如何在React里跨文件調(diào)用組件拆挥？
- 在文件頂部
import要調(diào)用的組件及來自的文件。
例如：import Ctable from "./static/css_table.js" - 在組件內(nèi)引用外部組件時某抓，只需要以
< componentName 參數(shù)名稱={具體數(shù)據(jù)} />格式就可以
例如：<Ctable hea={hea} colu={colu} />
