Learn React by Building the Simplest App from Scratch

Set up power level ten k on your terminal to get a nicer, more productive prompt. Install fonts, configure zsh or bash, and run p10k configure for a streamlined workflow.

Open the project in WebStorm, initialize Git to main, and run yarn dev for fast live reloading; explore JSX writing HTML in JavaScript within the app component.

Learn to build a simple React app using the useState hook to track a counter, increment on click, and persist with local storage.

Persist a counter in local storage using a useEffect hook, getItem and setItem, with a clear storage key and proper default values.

Learn git basics like status, staging, commit, and configuration; connect to a remote repository, push to GitHub, view history, and set up ssh keys.

Generate an SSH key with ed25519, add it to your GitHub account, and paste the public key into GitHub; learn about fingerprint and the difference between public and private keys.

Learn to style a React app with styled-components: install the package, import it, and build a main app styled component to center content and adjust colors.

Introduce Chakra UI in a React project, install packages, wrap the app with ChakraProvider, and build a styled page using heading, text, container, center, highlight, and a themed button.

Remove unused packages to keep the project clean, deleting styled components and any unused style files after migrating to Chakra UI. Update package.json and yarn.lock, then commit and push changes.