How I learned ReactJS (and you can too)
After watching way too much Theo on Youtube, I decided to get back into frontend / fullstack again.
I started out following the great new react docs learning path.
After I completed all challenges I decided to build a few really simple apps inspired by 7GUIs.
The output of these initial apps you can see below - all code is interactive.
Feel free to edit code / click buttons and let me know if you can find any bugs:
Counter
Temperature Converter (C <> F)
import { useState } from "react"; const TemperatureConvert = () => { const convertCtoF = (celsius: number): number => { return celsius * (9 / 5) + 32; }; const convertFtoC = (fahrenheit: number): number => { return (fahrenheit - 32) * (5 / 9); }; const [celsius, setCelsius] = useState(0); return ( <> <input value={celsius} onChange={(e) => setCelsius(Number(e.target.value))} ></input> Celsius <br/> === <br/> <input value={convertCtoF(celsius)} onChange={(e) => setCelsius(convertFtoC(Number(e.target.value))) } ></input>{" "} Fahrenheit </> ); }; export default TemperatureConvert;
Flight Booker (Simple - No Errors)
import { useState } from "react"; const FlightBooker: NextPage = () => { const [isOneWay, setIsOneWay] = useState(true); const [flightA, setFlightA] = useState(""); const [flightB, setFlightB] = useState(""); const isValidDate = (input: string): boolean => { return input.length === 10 && input.split("-").length === 3; }; return ( <> <p> <select onChange={(e) => setIsOneWay(e.target.value === "One Way")}> <option>One Way</option> <option>Return</option> </select> </p> <p> <input onChange={(e) => setFlightA(e.target.value)} value={flightA} placeholder="2022-01-01" ></input> </p> <p> <input onChange={(e) => setFlightB(e.target.value)} disabled={isOneWay} value={flightB} placeholder="2022-12-31" ></input> </p> <p> <button disabled={ !(isValidDate(flightA) && (isOneWay || isValidDate(flightB))) } > Book </button> </p> </> ); }; export default FlightBooker;
Furthermore I started this website and been exploring nextjs and other cool stuff I'll write / post about soon.
So make sure to follow me on my socials!