Getting Started with React
Tags: beginners, react, javascript, tutorial
Published: 2022-07-01 20:57:23

So, you have just started to get the hang of JavaScript, HTML, and CSS but now you're wondering what the next logical step is in your Web Developer journey? The answer to that, is React.

React is a JavaScript library created and maintained by Meta.
It is easy to use, fast, and scalable. Developers use it to build complex web applications that can modify data without reloading the page. 

We use React for building user interfaces and we split the different UI elements up into what React calls **Components**. 

React's [official documentation on components](https://reactjs.org/docs/components-and-props.html) summarizes this nicely: 

> Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Really neat huh? Working in different components of your apps is way better than getting lost in a single `index.html` page in vanilla JavaScript.

## Installation

Before getting into React, make sure you have Node installed on your machine. If you are running into issues installing Node, consult the [official documentation](https://nodejs.org/en/). 

What I recommend is to make sure you are on Node 16 because Node 17 has issues with several JS libraries. You can check in your Terminal with `nvm list`, the `->` lets you know which one is the default. 

```
nvm list

->     v16.13.0
        v17.0.1
         system
16 (-> v16.13.0)

```

If Node 16 is not the default version, you can install it and set it as the default with the following commands: 

```
nvm install 16
nvm alias default 16
nvm use 16
```
After getting Node sorted, you can create a React project by running this code in your Terminal: 

```
npx create-react-app my-example-app
cd my-example-app
npm start
```
After running `create-react-app` a new browser window will pop up at `localhost:3000` with React app created!

## Components
Opening `my-example-app` in your IDE of choice, you will see three directories: `./node_modules`, `./public`, and `./src` we will only be writing our React code in `./src`.

Opening `./src/App.js` will show you the meat and potatoes of how that React Demo screen is rendering all that fancy stuff on `localhost:3000` but for now, I'm going to remove everything from lines 7-20 to make things simple 

```
function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;
```
Lets break this down: 

- We have our function `App`
- We have a `className` that returns our heading `Hello, world!`

Pretty simple right? Now let's add a content component in our `./src` by making sure the first letter of our component is always capitalized so React knows its a component rather than a regular JS file.

```
import React from "react";

function Content() {
  return (
      <div className="Content">
          <h1>This is our content!</h1>
          <img src="https://i.redd.it/9odfz0kwy2i21.jpg" alt="meme"/>
      </div>
  )
}

export default Content;
```

Now when we want to add this content component to our `App.js` we would do like so: 

```
import Content from './Content';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
      <Content />
    </div>
  );
}

export default App;
```

Lets explain the things we added here: 
- `import` and `export` allows React to pull the code from `Content.js` and renders that data in our `App.js`
- Because `<Content />` is below our `<h1>` we told React that we want our Content component rendered _below_ our `<h1>`

## JSX
JSX (aka JavaScript XML) is the special language used to build our component's output. We can actually use JS, HTML and CSS in here! It looks a lot like HTML with some JS here and there but make no mistake JSX is actually closer to JS so here are a few key differences to take note of: 

- Self-closing tags must end with a slash (example: `<img />`
- Methods and properties written in JSX must be done in camelCase just like regular JS
- JS expressions can also be used in JSX! Heres an example:

```
const name = 'Steven'
const goodbye = <h1>Goodbye, {name}</h1>
```

## Conclusion
This article covered a _very_ basic introduction to React where we haven't even scratched the surface with things like State, Inverse Data Flow, and `useEffect()` but I hope this article helped you get acquainted with React and some of the first things you will encounter when you first open `create-react-app` and see why its the most popular frontend JS library. 

## Sources
[React Docs
](https://reactjs.org/)[Components](https://reactjs.org/docs/components-and-props.html)
[JSX](https://reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper)