React Guide | Getting Started

by Jacob Pelletier
Contact me for suggestions, comments, or just to say hello at jacob@yankeedo.io! 👋

Follow me on my journey in refreshing my React skills!

What React is good at:

1. rendering UI

What React is not so good at (and why you should check out my Next.js Guides):

1. SSG & SSR
2. Smart Bundling
3. Global state management
4. Data fetching to edge servers

What will we be covering in this guide

1. Brief React background
2. Create-react-app and brief tour.

Background

React is declarative framework.

Declarative (what) vs Imperative (how).

It's Friday night and I want margaritas.

The imperative journey to retrieve margs:
I arrive at the bar. I approach the bar with a casual confidence. I try to make eye contact with a bartender. Once I make eye contact with a bartender, I do a small head nod. Once the bartender asks what I want, I tell them I want a margarita with top shelf mezcal, mixed with the house mix in a 2(mezcal)-3(mix) ratio, and placed on 3 cubes of ice. No salt or sugar on the rim.

The declarative journey to retrieve margs:
I arrive at the bar. I order a margarita from the bartender.

React is a declarative API for the imperative implementation of code.

SPA (Single Page Application Framework).

React is a SPA, meaning that the app is routed through a single file.

NPM and NodeJS

First, you will need to install NPM. There are a few ways to do this.

1. curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
2. brew install node
3. download from nodejs.org, (https://nodejs.org/).

Next, install some helpful devtools:

1. React Developer Tools: shows react components and state in the browser.

Verify that you have node and npm installed by entering the following.
node -v
npm -v

npm come with node, and is the package manager for node.

Create React App

See the documentation at: https://create-react-app.dev/docs/getting-started.

Install react app commands:

npx create-react-app my-app
cd my-app
npm start

localhost:3000

Now let's take a look at the files in the 'my-app' folder.

Note the dependencies in package.json.

1. react is the react package.
2. react-dom allows react to interact with the browser and DOM. This is essential for web apps.
3. react-scripts includes essential tools behind create-react-app, like webpack config options.

Note the scripts in package.json.

1. eject will eject you from create-react-app and allow you to dig deeper into config options.
2. start starts dev server on port 3000.
3. build builds static assets for deployment.

The app flows through index.js. As you can see the App component is responsible for what we see on localhost:3000.

Note that the html file for this create-react-app can be found in the public directory. notice the ID of root that index.js selects with document.getElementById('root').