Introduction to TypeScript with React

1

Vite

Now, we will create a Vite project using TypeScript.

#Software Development #Web Frameworks #Developer Tools 374 social mentions

2

Random User Generator

Import axios from 'axios'; Import { FC, useState } from 'react'; Import { AppProps, Users } from './App.types'; Import User from './components/User'; Const App: FC<AppProps> = ({ title }) => { const [users, setUsers] = useState<Users[]>([]); const [isLoading, setIsLoading] = useState<boolean>(false); // useEffect(() => { // const getUsers = async () => { // try { // setIsLoading(true); // const { data } = await axios.get( // 'https://randomuser.me/api/?results=10' // ); // console.log(data); // setUsers(data.results); // } catch (error) { // console.log(error); // } finally { // setIsLoading(false); // } // }; // getUsers(); // }, []); const handleClick = async () => { try { setIsLoading(true); const { data } = await axios.get('https://randomuser.me/api/?results=10'); console.log(data); setUsers(data.results); } catch (error) { console.log(error); } finally { setIsLoading(false); } }; return ( <div> <h1>{title}</h1> <button onClick={handleClick}>Show Users </button> {isLoading && <p>Loading...</p>} <ul> {users.map(({ login, name, email }) => { return <User key={login.uuid} name={name} email={email} />; })} </ul> </div> ); }; Export default App;.

#Web App #Productivity #Design Tools 31 social mentions