React

React

https://ithelp.ithome.com.tw/articles/10214942

Step 1 : 安裝npm

npm是「套件管理系統」。

簡單來說，它像是一個能把寫好的程式碼放在上面供別人使用的平台。

========

非Unix系統，到這裡進行下載Node.js並安裝
npm會一起被安裝
安裝完請務必重新開機。

Step 2 : 安裝「一次安裝並設定好react、babel、webpack」的create-react-app

跟PowerPoint裡面有提供簡報範本一樣。react官方有在npm上提供我們已經設定好webpack、babel和react的範本程式，也就是create-react-app。

npm安裝套件的方式是透過指令，用 npm install 套件名稱 或 npm i 套件名稱 就能在目錄下安裝指定套件。套件原始碼會存放在目錄底下自動生成的 node_module資料夾內。

Step 3: IDE(文字編輯器)的安裝和設定 - vscode (可跳過)

vscode是由微軟推出，這幾年急速竄紅的文字編輯器 & 搜尋並安裝 JS JSX Snippets

====

簡介專案結構(可省略)

(.vscode) (如果你有設定vscode的debugger)
|____ (launch.json)

build (如果你執行過npm run build)

public
|____ index.html
|____ favicon.ico
|____ manifest.json

src
|____ index.js
|____ index.css
|____ App.js
|____ App.test.js
|____ App.css
|____ service-worker.js
|____ logo.svg
    
node_modules
package.json
package-lock.json
README.md
(.gitignore)

• .vscode(預設隱藏):
  設定vscode的debugger。
• build:
  經preprocessing之後用來部署的檔案，npm run build後出現。
• public:
  放打包前html檔的地方，favicon.ico 和 manifest.json 是跟預設的icon有關。
• src:
  在preprocessing前的程式碼，我們大部份都會編輯這個資料夾內的程式碼。
• node_modules:
  開發者用 npm/yarn 所載下來的套件會放在這裡。
  ( 如果套件出了問題，可以試著把這個資料夾砍掉之後執行npm i )
• package.json:
  和設定打包工具(webpack)有關，前面提到的指令也設定在裡面。
• package-lock.json:
  專案資訊。主要是用來紀錄你在這個專案用 npm/yarn 載了哪些套件。因為node_modules很大，一般如果要和別人一起開發專案，我們不會把node_modules傳給協作者，而是把package-lock.json傳給協作者後，協作者執行npm i(或yarn)就能載到相同的套件。
• .gitignore(預設隱藏):
  設定在使用版本控制軟體git時，哪些東西不能被add (例如: node_modules)，執行git add --all時會自動忽略這些檔案。

https://zh.wikipedia.org/wiki/React

React（有時叫React.js或ReactJS）

是一個為資料提供彩現為HTML視圖的開源JavaScript 庫。React視圖通常採用包含以自訂HTML標記規定的其他組件的組件彩現。React為程式設計師提供了一種子組件不能直接影響外層組件（"data flows down"）的模型，資料改變時對HTML文件的有效更新，和現代單頁應用中組件之間乾淨的分離。

如下是一個在HTML中使用React的基礎的代碼範例，使用了JSX和JavaScript。

<div id="myReactApp"></div>

<script type="text/babel">
  function Greeter(props) {
    return <h1>{props.greeting}</h1>;
  }
  let App = <Greeter greeting="你好，世界！" />;
  ReactDOM.render(App, document.getElementById('myReactApp'));
</script>

代碼中的 Greeter 函式是一個React組件（component），接受一個名為 greeting 的屬性。變數 App 是 Greeter 組件的一個實例，其中的 greeting 屬性被設定為 '你好，世界！'。而後 ReactDOM.render 方法彩現在ID為 myReactApp 的DOM元素中彩現了這個組件。 彩現後的HTML代碼應為：

<div id="myReactApp">
  <h1>你好，世界！</h1>
</div>