React class & style(3)

1.先清除index.css，換成

.parent{
    color:  rgb(147, 60, 229);
}

.child{
    color: rgb(232, 150, 27);
    background-color: rgb(234, 78, 11);
}

2.接著回到App.jsx加入class

const Child = () => {
  return (
    <>
      <h3 className="child">Child Component</h3>
    </>
  )
}

const App = () => {
  return (
    <>
      <h2 className="parent">App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

React的class必須寫成className
3.修改Child component加入inline styles

const Child = () => {
  return (
    <>
      <h3 className="child" style={{
        backgroundColor: '#BBFFFF'
      }}>Child Component</h3>
    </>
  )
}

原css中如有-則使用小駝峰（lower camel case)
inline styles優先度大於class
參考資料
Adding styles
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React Component(2)

React Component寫法有蠻多種的
以下是個人覺得比較簡潔的
1.將App.jsx內容先全部清除改成

const App = () => {
  return (   
      <h2>App Component</h2>   
  )
}
export default App

完成第一個Component了
2.接著新增一個Child Component

const Child = () => {
  return (
    <>
      <h3>Child Component</h3>
    </>
  )
}

3.在App Component中使用多個Child Component

const App = () => {
  return (
    <>
      <h2>App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

表示Component可重複使用
特別注意 Component第一個字為大寫
參考資料
Your First Component
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React VS Code + Vite + React開發(1)

React過去有幾個地方令人詬病，React 19改善了許多
目前在寫法上也改進了許多，本篇開始紀錄開發過程
開啟VS Code > Terminal

npm create vite@latest

Project name:
.(於目前開啟的資料夾)

Select a framework:
react(或輸入想要的名稱)

Select a variant:
javascript(或擅長的開發方式)

檢查一下package.json > dependencies > react 版本是不是19.0.0

npm install

npm run dev

點開網頁完成了第一次建立
如何建立發佈檔案

npm run build 

檔案會在dist下
參考資料
Build a React app from Scratch
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React 專案放於非根目錄資料夾中解決方法

package.json加入 "homepage": "/子資料夾名稱/"

React input maxLength and only number

經過測試 type="number" maxLength會無效
目前這方法可用

<input type="text"
style={{ textAlign: "right" }}                    
maxLength={9}
onChange={onlynumber} />

const onlynumber = (e) => {
      //去掉非數字
       e.target.value = e.target.value.replace(/\D/g, '');
       //todo anything
};

參考資料
Create a Numbers only Input field in React.js

React 初探-常用指令及問題

1.建立新的React，開啟Vs Code終端機，以下官網提供 ( React 19 後有更動， React VS Code + Vite + React開發(1)由此重開開始 )

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

2.由GitHub取得程式碼後如何使用
下載後直接跑

npm run start

錯誤訊息如下

'react-scripts' 不是內部或外部命令、可執行的程式或批次檔。

npm install react-scripts
or
npm install

3.Can't resolve 'react-router-dom' in 非官方開發為React Router開發

npm install react-router-dom

4.export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
5.後改成Routes

npm install react-router-dom@5.2.0

6.發佈(2023-07-05更新)

npm run build 

會在build資料夾中產生資料 參考資料
建立全新的 React 應用程式
'react-scripts' 不是內部或外部命令，也不是可執行的程式 或批處理檔案--解決方案 Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'