創(chuàng)建項(xiàng)目 函數(shù)組件（無狀態(tài)組件），負(fù)責(zé)靜態(tài)結(jié)構(gòu)展示 類組件（有狀態(tài)組件）,，負(fù)責(zé)更新UI,，讓頁面動(dòng)起來 函數(shù)組件綁定事件 通過類組件綁定事件 react事件對(duì)象 state基本使用 受控組件：其值受到React控制的表單元素 非受控組件，不推薦使用,，知道即可
執(zhí)行“nvm list”命令,，查看當(dāng)前所選擇node的版本，因?yàn)槲译娔X上有幾個(gè)不同的node版本,，所以需要確認(rèn)下,，版本是否是react腳手架要求的。
如果發(fā)現(xiàn)node版本不是我們想要的,，執(zhí)行“nvm use 版本號(hào)”命令即可,。
執(zhí)行“npx create-react-app react-component”命令，創(chuàng)建項(xiàng)目,。 執(zhí)行“cd react-component”命令,，進(jìn)入文件夾內(nèi) 執(zhí)行“npm start”命令，啟動(dòng)項(xiàng)目,，ok
無狀態(tài)組件（函數(shù)組件）,，負(fù)責(zé)靜態(tài)結(jié)構(gòu)展示import React from 'react';import ReactDOM from 'react-dom';
2,、創(chuàng)建函數(shù)組件,，這里有兩種方式。function Hello() { return (<div>這是我的第一個(gè)函數(shù)組件</div>)}
const Hello = () => (<div>這是我的第二個(gè)函數(shù)組件</div>)
ReactDOM.render(<Hello/>, document.getElementById('root'))
有狀態(tài)組件（類）組件,，負(fù)責(zé)更新UI，讓頁面動(dòng)起來class Hello extends React.Component { render() { return (<div>第一個(gè)類組件</div>) }}
ReactDOM.render(<Hello/>, document.getElementById('root'))
function App() { // 事件處理程序 function handleClick() { console.log('函數(shù)組件,，事件觸發(fā)') } return ( <button onClick={handleClick}>點(diǎn)我</button> )}
ReactDOM.render(<App/>, document.getElementById('root'))
class App extends React.Component { // 事件處理程序 handleClick() { console.log('類組件綁定事件,，觸發(fā)') } render() { return (<button onClick={this.handleClick}>點(diǎn)我</button>) }}
ReactDOM.render(<App/>, document.getElementById('root'))
class App extends React.Component { // 事件處理程序 handleClick(e) { // 阻止瀏覽器的默認(rèn)行為 e.preventDefault() console.log('a標(biāo)簽單擊事件觸發(fā)') } render() { return (<a onClick={this.handleClick}>百度一下</a>) }}
ReactDOM.render(<App/>, document.getElementById('root'))
// 2,、創(chuàng)建類組件class App extends React.Component { // 初始化state state = { count: 100} // 事件處理程序 onIncrement = () => { this.setState({ count : this.state.count - 1 }) } render() { return ( <div> <h1>計(jì)數(shù)器：{this.state.count}</h1> <button onClick={this.onIncrement}> -1 </button> </div> ) }}
ReactDOM.render(<App/>, document.getElementById('root'))
class App extends React.Component { state = { txt: '', content: '', language: 'java', isChecked: false } // 處理變化 handleForm = e => { // 獲取當(dāng)前DOM對(duì)象 const target = e.target // 根據(jù)表單類型獲取值 const value = target.type === 'checkbox' ? target.checked : target.value // 獲取name const name = target.name // 根據(jù)name屬性設(shè)置對(duì)應(yīng)state this.setState({ [name]: value }) } render() { return ( <div> {/* 文本框 */} <input type='text' name='txt' value = {this.state.txt} onChange={this.handleForm}/> <br/> {/* 富文本框 */} <textarea name='content' value={this.state.content} onChange={this.handleForm}></textarea> <br/> {/* 下拉框 */} <select name='language' value={this.state.language} onChange={this.handleForm}> <option value='java'>java</option> <option value='javaScript'>javaScript</option> <option value='c'>C</option> </select> <br/> {/* 復(fù)選框 */} <input name='isChecked' type='checkbox' checked={this.state.isChecked} onChange={this.handleForm}/> </div> ) } }
ReactDOM.render(<App/>, document.getElementById('root'))
class App extends React.Component { constructor(){ super() // 創(chuàng)建ref this.txtRef = React.createRef() } // 獲取文本框的值 getTxt = () => { console.log('文本框值為：', this.txtRef.current.value); } render() { return ( <div> <input type='text' ref={this.txtRef}/> <button onClick={this.getTxt}>獲取文本框的值</button> </div> ) } }
ReactDOM.render(<App/>, document.getElementById('root'))
組件的兩種創(chuàng)建方式：函數(shù)組件和類組件(注意首字母大寫) 無狀態(tài)組件（函數(shù)）組件,，負(fù)責(zé)靜態(tài)結(jié)構(gòu)展示 有狀態(tài)組件（類）組件,，負(fù)責(zé)更新UI，讓頁面動(dòng)起來 綁定事件注意this指向問題 推薦使用受控組件來處理表單
|
