發表文章

目前顯示的是 4月, 2017的文章

[筆記] React "Hello World" 快速上手

圖片
快速建立一個專案 https://github.com/facebookincubator/create-react-app npm install -g create-react-app create-react-app my-app cd my-app/ npm start -g 是 global 的意思 npm start 他會跑在 3000 port 來看看我們產生的  my-app 資料夾裡面有什麼: package.json 裡面會紀錄 npm 用到的套件 node_moudules 裡面會有套件內容,以及一些 binary 檔,這個資料夾留著自己用就好,要給別人 source code 或是放到 github 的話只需要上傳 package.json 以及 public 資料夾,src 資料夾以及 README 文件 接著我們來寫個 Hello world 吧~ public/index.html 看到 < body >      < div   id = "root" ></ div > </ body > 這是程式的進入點 所有東西產生出來都會在這個 <div> src/index.js import  React  from   'react' ; import  ReactDOM  from   'react-dom' ; import  App  from   './App.js' ; import   './index.css' ; ReactDOM . render (    < App   /> ,    document . getElementById ( 'root' ) ); 第三行 import App 是把 App.js 檔案內容匯入 下面的 render 負責顯示畫面,裡面有兩個參數 目前就是把 <App /> 的內容顯示到 document.getElementById('root') 畫面上 id =