使用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中。