前端筆記4.React基本語法
- 上次課程回顧
通過react-native-cli構建react-native環境。
通過create-react-app構建react開發環境。
create-react-app專案名，必須為小寫字母，不許出現大寫。
啟動專案只需要進入到專案中，通過npm start即可啟動。
然後正常按照 ES6編寫專案程式碼即可。
開啟專案後，修改App.js中的程式碼即可改變裡面的內容。
2、本次課程內容
2.1、React基本語法 —— JSX
元素是構成 React 應用的最小單位
const element = <h1>Hello, world!</h1>;
要將React元素渲染到根DOM節點中，我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上：
|
const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('example') ); |
可以在 JSX 中使用 JavaScript 表示式。表示式寫在花括號 {}
React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設定內聯樣式. React 會在指定元素數字後自動新增 px
|
var myStyle = { fontSize: 100, color: '#FF0000' }; ReactDOM.render( <h1 style = {myStyle}>菜鳥教程</h1>, document.getElementById('example') ); |
標籤內部的註釋需要寫在花括號中{/*註釋...*/}
JSX 允許在模板中插入陣列，陣列會自動展開所有成員：
|
var arr = [ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); |
HTML 標籤 vs. React 元件
React 可以渲染 HTML 標籤 (strings) 或 React 元件 (classes)。
HTML 標籤小寫字母的標籤名； React 元件需建立一個大寫字母開頭的本地變數
|
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example')); |
|
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example')); |
些識別符號像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。
2.1.1、模組化
如果想使用React的語法，首先需要了解模組化的概念。
把一些通用的功能或介面上一樣的佈局等內容，封裝到一個js檔案裡，通過匯出的方式，讓其它的js可以使用。
|
class Timer { getTime() { return new Date().getTime(); } } let a = 10 ; function test() { console.log("Hello World"); } export default {Timer,a,test}; |
|
通過這種方式，可以匯出一個物件或者幾個物件供其他js使用 語法：export default {所有要匯出類、變數或方法} |
匯入
|
import Utils from './model/utils'; console.log(Utils.a); |
|
這裡import後可以跟任意名稱，後面是所要匯入的js檔案，之後就可以通過 物件.屬性的方式來使用了。 |
2.1.2、渲染內容到頁面上
在使用React進行開發時，所有的js必須匯入React的相關支援庫，裡面最重要的有兩個類。
ReactDOM、Component
ReactDOM可以把編寫的js中的頁面程式碼渲染到HTML中某個頁面元素中。
|
ReactDOM.render(<App />, document.getElementById('root')); |
|
Render方法就可以把一段HTML匯入到頁面的某個頁面元素中 第一個引數是某個頁面元件或React元件，第二個引數就是頁面元素。 |
這裡的元件就是類似於HTML中標籤的概念。
所有的React元件都是一個類，繼承了React中的Component物件，並覆寫了render()方法，來生成一段html頁面。
JSX語法，允許在js中編寫html程式碼，這些程式碼會變成一個變數來儲存。
|
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; let div = <div id="test_div"> <font color='red'>Hello World</font></div>; ReactDOM.render(div, document.getElementById('root')); |
注意，在HTML中，理論上標籤不區分大小寫，但是在JSX語法中，必須小寫，大寫會被認為是React的元件。
2.1.3、React元件
React中為了能夠將一些通用的內容可以反覆使用，會把一些JSX語法組成的內容封裝到一個Component裡，作為元件來使用。
1、我們可以使用函式定義了一個元件：
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
你也可以使用 ES6 class 來定義一個元件:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
const element = <HelloMessage /> 為使用者自定義的元件。
元件類只能包含一個頂層標籤，否則也會報錯。
元件的基本語法如下：
|
import React, { Component } from 'react'; import './title.css'; class TitleBar extends Component { render() { // 必須通過return返回需要的元素 return ( <ul> <li>首頁</li> <li>選單</li> <li>功能</li> <li>關於</li> </ul> ); } } export default TitleBar; |
如果我們需要向元件傳遞引數，可以使用 this.props 物件
|
function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="Runoob"/>; |
如果想讓元件實現一些變化，這裡React提供了props的屬性操作。
|
import React, { Component } from 'react'; import './title.css'; class TitleItem extends Component { constructor(props) { super(props); } render() { return ( <li>{this.props.value}</li> ); } } class TitleBar extends Component { constructor(props) { super(props); let arr = this.props.allValues.split(",") ; let itemArray = new Array(); for (let i = 0;i < arr.length;i++) { itemArray[i] = <TitleItem value={arr[i]}/> } this.itemArray = itemArray; } render() { // 必須通過return返回需要的元素 return ( <ul> {this.itemArray} </ul> ); } } export default TitleBar; |
|
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import TitleBar from './index/title'; import * as serviceWorker from './serviceWorker'; // let div = <div id="test_div"> // <font color='red'>Hello World</font></div>; ReactDOM.render(<TitleBar allValues="首頁,關於"/>, document.getElementById('root')); |
複合元件
我們可以通過建立多個元件來合成一個元件，即把元件的不同功能點進行分離。
|
function Name(props) { return <h1>網站名稱：{props.name}</h1>; } function Url(props) { return <h1>網站地址：{props.url}</h1>; } function Nickname(props) { return <h1>網站小名：{props.nickname}</h1>; } function App() { return ( <div> <Name name="菜鳥教程" /> <Url url="http://www.runoob.com" /> <Nickname nickname="Runoob" /> </div> ); } ReactDOM.render( <App />, document.getElementById('example') ); |
2.1.4、事件處理
這裡編寫的元件也可以通過onXxxx事件來進行互動。
但是，這個互動是無法影響頁面的顯示結果的，因為頁面是在開啟的時候，執行的render()來渲染，而呼叫事件時，預設時不重新渲染的。
這裡如果想重新渲染，需要通過修改state的屬性來實現。
|
import React, { Component } from 'react'; import './title.css'; class TitleItem extends Component { constructor(props) { super(props); this.state = {classValue:"not_selected"}; } changeColor = () => { // console.log("0--0------"); this.setState({ classValue:"selected" }); } changeColorOut = () => { this.setState({ classValue:"not_selected" }); } render() { return ( <li className={this.state.classValue} onMouseOut={this.changeColorOut} onMouseOver={this.changeColor} key={this.props.value}>{this.props.value}</li> ); } } class TitleBar extends Component { constructor(props) { super(props); let arr = this.props.allValues.split(",") ; let itemArray = new Array(); for (let i = 0;i < arr.length;i++) { itemArray[i] = <TitleItem key={i} value={arr[i]}/> } this.itemArray = itemArray; } render() { // 必須通過return返回需要的元素 return ( <ul> {this.itemArray} </ul> ); } } export default TitleBar; |
|
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import TitleBar from './index/title'; import * as serviceWorker from './serviceWorker'; // let div = <div id="test_div"> // <font color='red'>Hello World</font></div>; ReactDOM.render(<TitleBar allValues="首頁,關於"/>, document.getElementById('root')); |
嘗試完成百度首頁（使用React）
先實現左上角的天氣資訊
Src
--image
--index
--image.js