2.react 基礎 - create-react-app 目錄結構 及 組件應用

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'));