1. react-app 腳手架的 目錄結構
node_modules -d 存放 第三方下載的 依賴的包
public -d 資源目錄
favicon.ico - 左上角的圖標
index.html - 項目首頁模板
manifast.json - 如果是一個 app 定義 app 的圖標 網址 主題顏色等
src -d 項目所有的源代碼
index.js - 整個程序的入口 (react 的理念 all in js)
index.css - 初始化樣式
App.js - 項目
App.test.js - 自動化測試文件
App.css - 項目的樣式
logo.svg - 首頁 logo
serviceWorker.js - 將網頁存儲在瀏覽器內 如果突然斷網了 可以繼續訪問該網頁 (PWD progressive web application 借助寫來的 網頁 用來做 app)
.gitignore - 用 git 管理代碼 不想 傳到 git 上 可以使用
package.json - node 的包文件 和項目介紹 （ 命令行 命令 ） 等
README.md - 項目的說明文件
yarn.lock - 依賴的安裝包 （一般不用動）
2. react 組件
組件就是頁面上的一部分
可以把一個 大的網頁 組成 不同的組件
index.js 內
// 不能刪除 React 導入 否則會編譯失敗
import React from 'react'
// 用於 掛載 到 DOM 節點上
import ReactDOM from 'react-dom'
// 導入 一個 app 組件 從 App.js 文件
import App from './App'
// 渲染 暴露出的 App 組件 並 渲染到 id 為 root 的元素內
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, {Component} from 'react'
// import {Component} from 'react'
// 等價於
// import React from 'react'
// 和 const Compnent = React.Component
class App extends Component {
// 等價於 class App extens React.Component {
// 當 App 類 繼承了 React.Component 類 時 , App 即為 React 的 組件了
render(){
// render 函數 返回什么 就展示 什么內容
return (
// render 內的 return 的 標簽為 jsx 語法 必須引入 React 才能解析
<div> Hello React </div>
);
}
}
export default App; // 暴露 App class 用於 index.js 接受
// ReactDOM.render 將 App 組件 掛載到 id 為 root 節點下 （index.html 內的 id 為 root 的 div）
// <App /> 是使用 jsx 語法 所以 一定要引入 React 使用 React 語法
// render 函數內的 標簽 是 jsx 語法
ReactDOM.render(<App />, document.getElementById('root'));