腳手架工具

選用react官方推薦的腳手架工具create-react-app

安裝npminstall create-react-app -g

專案初始化步驟

1、在github上建立一個專案倉庫：首頁 > new

2、將github上建立的倉庫clone到本地：git clone [email protected]:startjcu/react-demo.git

3、使用腳手架工具初始化專案：create-react-app react-demo

4、進入專案，進行初始化提交：cd react-demo/、git add .、git commit -m 'react initial'

5、將原生代碼推送到遠端倉庫：git push

專案結構

public > index.html主頁

src > index.js程式入口

registerServiceWorker，用來實現PWA，Progressive Web App漸進式網頁應用，初次訪問後，斷網也能訪問

public > minifest.json用來定義實現了PWA的網頁當作App使用時的展示樣式等內容

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

React中的元件

元件：頁面上的一部分，將一個大的網頁拆分成很多小的部分，前端元件化

import React, { Component } from 'react'
//JSX語法
 
，必須使用React才能實現編譯
class App extends Component {
    render() {
        return <div>hello world</div>
    }
}

export default App

將元件掛載到DOM節點下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
 

JSX語法基礎

JavaScript+ XML

直接在JS檔案中寫H5標籤；可用標籤寫自定義元件，必須以大寫字母開頭。

在JSX中寫JS程式碼，用{}包裹，在頁面中實現邏輯操作；寫註釋：{/**/}。

標籤屬性與JS關鍵字衝突處理：用className代替class，用htmlFor代替for。
dangerouslySetInnerHTML={{__html:item}}屬性用於將輸入的html標籤進行轉義。