React Basics

We will go over why React is the framework to learn in 2020 and give a brief overview.

React is the framework to learn in 2020. React is on top right now. Using five years of data from google trends, you can see Vue and Angular used to be on top, but that was a few years ago. In recent years as recent as 2020, React has taken a huge lead in the field. On a stack overflow survey react and angular are pretty much tied for the most used at second place right below jQuery. However when you filter it by loved, React is number on the list. The thing that we need to care most about however, is jobs. If you look at a study done by Indeed.com, you can see that React is dominating the United States job market by a long shot being the most in-demand framework.

Source: Indeed

So, how do we react?

If you don’t know already understand html css and javascript to a basic level, you would be, kind of, shooting yourself in the foot. So, I recommend doing studying on those first. How do we get running? Well, the react team at facebook itself, released a library that allows you to run the command npx create-react-app my-app which helps you get up and running really really fast.

npx create-react-app my-app

This will create an index.js file which uses ES6 imports. This gives you the ability to import a library name into a variable on which you can access all the methods that library has to offer.

import React from 'react'
import ReactDOM from 'react-dom'

Moving down your code, you have the app component. This stores all your sub components and all our react and returns JSX. which we will talk about later.

function App() {
   return <div>Hello, world</div>
}

Finally the react-dom render function. Heres how this works, just think of this as taking your html file, finding element id root and replacing it with everything thats inside of the App component.

ReactDOM.render(App, document.getElementById('root'))

Lets talk about the component, the atomic unit of react. This is basically the building block that contains markup and javascript logic. Components can also contain other components and will always roll up to the App component and finally it must return JSX. JSX is a html-like syntax which flips to JavaScript with minor differences. Keep in mind it is not HTML. Class gets referred as className and you can enter event listeners such as onClick and onChange as attributes to your tags. Since JSX isnt real javascript, we use a Webpack and Babel to compile your JS code into something that the browser can actually run. Here is an example of a component.

import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return(
   <h1> Hello World </h1>
)

State

Let’s talk about State. a dynamic form of storage that lives inside of our components. The 2021 way of creating state is with a useState hook which will return a value and a setter function. This is returning an array of size 2 so we de-structure them into individual variables. State is dynamic storage because every-time a state variable changes, our component gets flagged for potential re-render. An example of a state:

import React, {useState} from 'react'
import ReactDOM from 'react-dom'
function Books() {
const [showBook, setShow] = useState(false)
return(
      <div>
          {showBook && <Book name="Black Swan" />}
          <button onClick= {() => setShow(true)}>Show</button>
      </div>
)
}
export default Books

Here, we are setting the ‘showbook’ variable to false using the imported useState hook. Inside of our JSX, we use our hook to determine whether we show a book or not using an && conditional. We pass the setter function as a call back to onClick so that when we click that button, showBook will be set to true. Finally, don’t forget to export your function component.

Life Cycle Effects

Life cycle effects are functions that are triggered when a components created updated or removed from the page. These are all managed conveniently through the UseEffect hook. The first argument is a function that runs when your component is created on the page. Whether it runs again or not depends on the second argument which is an array of triggers. the simplest way to think about it, is when one of these triggers changes value, then the function will run again. For example: if something changes to true. Finally we can return a function inside of this function which will get run.

import React, {useEffect} from 'react'
useEffect(() => {
   fetch("http://localhost:4000/api/v1/reviews")
     .then((r) => r.json())
     .then(reviews => {
       setReviews(reviews)
     })
}, [])