Day 19 - React 什麼是React? 要怎麼用?

上一章簡單介紹了React跟如何建立專案

今天來把我們會用到的package都加進來吧

npm install react-router-dom

npm install reactstrap

npm install react-bootstrap

安裝完可以在package.json看到我們所安裝的東西

大家可能會疑惑怎麼有一個package-lock.json, 是不小心裝錯嗎!?

並不是喔, 這是在下install指令時就會自動生成

可以想像成是一個紀錄(Version Tree), 當你的安裝新的東西或版本有更新, 他會記錄具體的來源和版本號

安裝好後, 可以在專案底下發現多了App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

}

export default App;

在Terminal輸入啟動指令

npm start

執行後會自動開啟Browser並連到 localhost:3000

3000 port是現在前端默認的port, 就像後端都走8080一樣

Day 21 - React 什麼是Component? 生命週期?