React | Getting Started
Tags: webdev, javascript, beginners, react
Published: 2023-02-16 21:02:19

## 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

---


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m4buhq10kgnci4jnpgn.jpg)

## 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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0h0ondutg3h4ti8qb1c.png)

localhost:3000
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c97zsgrhdmrs9kyxvqv3.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oivcv3dve50shuhax86w.png)

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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvst7ttzjh49or3mzqvz.png)

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')`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9iu7enx4u7hj6xi2b19v.png)