React

前端框架，可在javaScript中撰寫類似HTML語法(JSX)，開發上十分方便

步驟

創建新的資料夾，在資料夾位置輸入以下指令

npx create-react-app sample

這樣我們就創建了名為sample的檔案，內有react框架

語法

Component

在index.js中，我們會看到這些

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import相當於前幾章在Node.js中的require()，可以取得下載的module，或是自己做個module當component

JSX

React中的語法，可以把JavaScript寫成類似HTML的語法，編譯時會自動翻成JavaScript，讓開發前端更方便

const root = ReactDOM.createRoot(document.getElementById('root')); //將下面網頁內容加入index.html的<div id="root">
//要加進index.html的內容，只能有一個元素在最外圍
root.render( 
  <React.StrictMode>
    <App /> //顯示app.js
  </React.StrictMode>
);

範例

將index.js修改如下

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; //取得App.js module作為component

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App /> //顯示App.js
  </React.StrictMode>
);

App.js修改如下

import "./App.css"; //取得App.css

function App() {
  return (
    <div className="App">
      <h1 className="one">練習React</h1>
    </div>
  );
}

export default App; //export App()

App.css修改如下

body {
  background-color: black;
}

h1.one {
  color: white;
}

執行指令

npm start

【以上為我的學習心得，如有錯誤歡迎糾正】