vitejs
https://www.youtube.com/watch?v=Y4ezum3_7_I
install nodejs
npm create vite@latest
create project xxx
cd xxx
npm install
code . to open vs studio code
in menubar view เลือก terminal
npm run dev
import { useState,useEffect } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios'
function App() {
const [poke, setPoke] = useState(null)
const [loading,setLoading] = useState(false);
const [error,setError] = useState("");
const [count, setCount] = useState(0);
useEffect(() =>{
const abortController = new AbortController();
const loadPoke = async () => {
try {
setLoading(true)
// let response = axios.get('https://pokeapi.co/api/v2/pokemon/ditto', {
let response = await axios.get('https://pokeapi.co/api/v2/pokemon/1', {
signal: abortController.signal
})
// console.log((await response).data)
console.log((response).data)
setPoke(response.data)
} catch(error) {
setError("something wrong",error)
} finally {
setLoading(false)
}
}
loadPoke();
return () => abortController.abort();
},[])
return (
<>
<div>
<h1>{poke?.name}</h1>
<img src={poke?.sprites.other.home.front_default} alt="" />
<ul>
{poke?.abilities.map((abil, idx) => (
<li key={idx}>(abil?.ability.name)</li>
))}
</ul>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
import { useState,useEffect } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import axios from 'axios'
function App() {
const [poke, setPoke] = useState(null)
const [loading,setLoading] = useState(false);
const [error,setError] = useState("");
const [count, setCount] = useState(0);
const [number, setNumber] = useState(1);
const [fav, setFav] = useState[{}];
useEffect(() =>{
const abortController = new AbortController();
const loadPoke = async () => {
try {
setLoading(true)
// let response = axios.get('https://pokeapi.co/api/v2/pokemon/ditto', {
// let response = await axios.get('https://pokeapi.co/api/v2/pokemon/1', {
let response = await axios.get('https://pokeapi.co/api/v2/pokemon/${number}', {
signal: abortController.signal
})
// console.log((await response).data)
console.log((response).data)
setPoke(response.data)
} catch(error) {
setError("something wrong",error)
} finally {
setLoading(false)
}
}
loadPoke();
return () => abortController.abort();
},[number])
const prevPoke = ()=>{
setNumber((number) => number-1)
}
const nextPoke = () =>{
setNumber((number) => number+1)
}
const addFav =() => {
setFav((oldState) => [...oldState,poke])
}
console.log("new fav poke",fav)
return (
<>
<div>
<h1>{poke?.name}</h1>
<button onClick={addFav}>Add to favourite</button>
<img src={poke?.sprites.other.home.front_default} alt="" />
<ul>
{poke?.abilities.map((abil, idx) => (
// <li key={idx}>(abil?.ability.name)</li>
<li key={idx}>{abil?.ability.name}</li>
))}
</ul>
<button onClick={prevPoke}>Previous</button>
<button onClick={nextPoke}>Next</button>
<h3>favourite pokemon</h3>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App