會vue，怎麼快速上手react

三线码工發表於2024-05-28
VueReact

1. 安裝react腳手架

npx create-react-app react-basic

2.刪除干擾的檔案

react以JSX模版。jsx：JavaScript XML 縮寫

3.開始學習jsx

const str="變數"
const color={
  color:"green"
}
function fun(){
 return str+"fun"
}

function App() {
  return (
    <div className="App">
      {/* 使用變數 */}
      <p>{str}</p>
      {/* 使用函式 */}
      <p>{fun()}</p>
      {/* 使用物件 */}
      <p style={{color:'red'}}>red</p>
      <p style={color}>green</p>
      
    </div>
  );
}

export default App;

其他基礎入門

// 使用useState 要放最頂部
import { useState } from 'react';


const str="變數"
const color={
  color:"green"
}
const list=[
  {id:1,name:"woods"},
  {id:2,name:"jack"},
  {id:3,name:"tom"},
]
function fun(){
 return str+"fun"
}
function getcolor(color){
  if(color=='黃瓜'){
    return (<p>綠色水果 <img src="./static/logo.svg"/></p>)
  }else if(color=='火龍果'){
    return <p>紅色水果</p>
  }else{
    return <p>失敗失敗！系統庫不存在此水果</p>
  }
}
function changeStr(){
   alert("點選了")
}
function Header(){
   return <div>
      <p>Hander</p>
      <button onClick={()=>{ }}>點我</button>
   </div>
}



function App() {
  {/* 呼叫useState 新增一個狀態變數*/}
  // count 是狀態變數  setCount是狀態變數的更新函式 
  const [count,setCount] = useState(0);
  const [info,setinfo]=useState({
    name:"woods",
    age:18
  })
  
  const handleClick = () => {
    setCount(count + 1);
  };
  const changeInfoName = (name) => { //檢視更新必須替換。案例：更新物件的某個屬性
    setinfo({
      ...info,
      name
    });
  };



  return (
    <div className="App">
      {/* 使用變數 */}
      <p>{str}</p>
      {/* 使用函式 */}
      <p>{fun()}</p>
      {/* 使用物件 */}
      <p style={{color:'red'}}>red</p>
      <p style={color}>green</p>
      {/* 迴圈 (必須是return結構) 記得也要加key*/}
      {list.map((item,i)=> <p key={item.id}>{i+1}:{item.id}-{item.name}</p>)}
      {/* 條件判斷 */}
      {str==='變數' && <p>前面為語法true</p>}
      {str==='變數1' ? <p>true</p> : <p>false</p>}

      {getcolor('黃瓜')}
      {/* 使用事件繫結 on+事件名 */}
      <button onClick={changeStr}>點我</button>
  
      {/* 元件化 其實就是首字母大寫方函式*/}
      <Header/>

      <h1 onClick={handleClick}>{count}</h1>

      <h1 onClick={()=>changeInfoName('jack')}>{info.name}</h1>


    </div>
  );
}

export default App;

　　

相關文章