使用React Create App 快速建立React模板

• 開啟命令提示字元使用命令 "cd desktop" 將目錄移動到桌面
• 使用命令 md React-app建立新資料夾並取名 React-app,一樣使用cd "react-app"移動到資料夾內部
• 貼上React Create App的命令

npx create-react-app React(專案名稱)

• 創建完後輸入命令 yarn start (npm start)執行此模板。

筆記

include "react"

import React from "react";

React每一個js的檔案都需要include。

include 'react-dom'

import ReactDOM from 'react-dom';

include "react-dom"其目的是可以將js的設定顯示在指定的html物件中(id,class...)

include 其他(自己創建)的.js檔案

import (js檔案名稱) from '(絕對路徑)';

include 其他js檔案宣告的元件，需要輸入"絕對路徑"不然默認裝況下會在package.jsom中尋找導致造成找不到指定的檔案而引發錯誤。

其他檔案元件輸出

export default (js元件名稱 (class,function...));

將本文件的元件輸出出去，這樣才能讓index.js import到其他檔案的元件。

將js內容顯示在html中

ReactDOM.render(<Login></Login>,document.getElementById("root"));
ReactDOM.render((js物件),指定的html物件);

這邊使用Get id的方式將寫在js中的class指定給html中的物件，而若要將class顯示在html中，可以將class寫成html的"標籤"形式引入

使用jsx撰寫html

class Test extends React.Component
{
    var title = "Js Test";
    render()
    {
            return( 
            <React.Fragment>
                {title} //使用{]可以將js語法放進jsx中並顯示。
                
                <div> Test1 </div>
                <div> 
                    <a> Test2 </div>
                </div>
            </React.Fragment>
            );
    }
}

• 需要將要輸出的html放在return後面並加上括號，否則js會自動在return後面加上分號，導致跳離副程式
• 由於使用jsx語法會要求只能輸出"一個"元件，得將其他元件包括在這個元件中，若要使用兩個元件並列，可以加上<React.Fragment>，就可以使用多種html元件。

引入CSS

import "./css/style.css"

將撰寫好的css使用import的方式放在index.js中便可以將CSS樣式引入到html中。