.NET Core與React組合開發技_第02天_調整React範本產生產品列表清單_JSX、元件狀態介紹

在此微調Home.js

來做測試

可在Home 元件進行建構子中state初始化

state(狀態)就像 ReactJS 組件的資料狀態暫存。

state management(狀態管理)只能在類組件(Class Component)中進行。

Function Components(功能組件)是stateless(無狀態)組件。

異動render達到react js中的 data bind

~\MyReact1\ClientApp\src\components\Home.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import React, { Component } from 'react'; export class Home extends Component { static displayName = Home.name; constructor(props) { super(props); this.state = { products: [ { title: "some product", description: "interesting" }, { title: "another product", description: "more" } ] }; } render() { return ( <div className="row"> {this.state.products.map(product => <div className="col-4"> <div className="card product-card"> <div className="card-body"> <h5 className="card-title">{product.title}</h5> <p className="card-text">{product.description}</p> </div> </div> </div> )} </div> ); } }

小叮嚀:

默認情況下所有class component都會被視為Stateful Component

一般習慣於元件建構子中進行state初始化設定

運行效果

在React中所寫的

return 程式碼

比如

1 2 3

return ( <h1>Hey there!</h1> )

其實會被SX 和轉譯器轉譯為

JSX 通過返回 HTML 來幫助創建虛擬 DOM。

1 2 3 4 5 6 7

return ( React.createElement( 'h1', null, 'Hey there' ) )

JavaScript XML (JSX) 是 JavaScript 語言語法的擴展。

在外觀上與 HTML 類似，JSX 提供了一種使用許多開發人員熟悉的語法

來構建組件呈現的方法。

換言之，這個 JSX 只是一個簡單的 javascript 表達式，它採用 XML 的結構使其看起來像 javascript 中的 HTML 格式。

JSX 更快，因為它在編譯期間執行優化，此外也屬於type-safe，因此有些相關錯誤都能在compile期間就捕獲到。

Babel 是一個 JavaScript 編譯器，用於將 ECMAScript 2015+ (ES6+) 代碼轉換為可以在舊版瀏覽器中運行的 ES5。React UI 是在 JSX 的幫助下設計的。但是 JSX 不能直接在瀏覽器中運行。所以我們需要一個轉譯器。

一些小語法叮嚀:

1. JSX 標籤主要組成有標籤名稱(tag name)、屬性(attributes)和子標籤(children)。
2. 如果屬性值用引號括起來，則該值是字符串。
3. 如果我們將值包裹在花括號(curly brackets { })中，那麼該值就是封閉的 JavaScript 表達式。
4. 您應該使用 className 和 htmlFor 作為 XML 屬性名稱而不是 class 和 for。

JSX Expressions

1. JSX 表達式需要用大括號 { } 括起來。
2. JSX 表達式不封裝條件構造(conditional constructs.)。
3. 可以使用三元（條件）表達式來做出決策。

JSX Styling

在JSX中允許使用inline style

在style命名習慣用camelCase(駝峰式大小寫)通常小寫開頭

一個綜合範例(通常React元件習慣用大寫開頭)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { var num = -5; var myStyle = { fontSize:35, color: 'navy' } return ( <div> <h1>Hello World</h1> <h3>This is my root component.</h3> <p>{10+20}</p> <p>{num > 0 ? "Positive": "Not Positive"}</p> <p style={myStyle}>Footer Here</p> {/* SIngle LIne Comment */} {/* LIne 1 Line 2 Line 3 */} </div> ); } } export default App;