2022-06-21

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

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleCountUp = () => {
    setCount((n) => n + 1);
  };

  return (
    <div>
      {count} <button onClick={handleCountUp}>+1</button>
    </div>
  );
};

export default 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!