React學習筆記（一）使用Create React App快速構建一個React項目並創建一個登陸頁面

首先安裝nodeJs，

然後命令行快速構建一個React項目：

npx create-react-app my-app
cd my-app
npm start

在項目根目錄下用npm安裝好各種組件庫。

然後項目結構如下：

App.js中這麼寫:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  //設置頁面標題
  document.title = '這裏寫標題';
  //無狀態組件獲取input的值
  let usernameid;   //用戶名輸入框的值
  let passwordid;   //密碼輸入框的值
  const login = (e) => {       //登陸方法
    // if (e) e.preventDefault();  //該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作(如果存在這樣的動作)
      const username = usernameid.value;   //賦值
      const password = passwordid.value;  
    //在此做ajax提交
    
  };
  //返回dom
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>用戶名<input type="text" ref={input => usernameid= input}></input></p>
        <p>密碼：<input type="password" ref={input => passwordid= input}></input></p>
        <a
          href="#"
          className="App-link"
          onClick= {login}
        >
          登錄
        </a>
      </header>
    </div>
  );
}

export default App;

效果：