Lesson 7: What is React?

Talk about a loaded question. There has been a bit of a gap between this post and my last one and the reason is: trying to sum up React into one singular post proved more of a challenge than I originally thought. What should I include? Will it be too much? Not enough? So, here’s my go at it! I’ll be expanding in future posts, so I’ll stop fretting now.

Let’s get down to business.

I find that sometimes bullet points help me understand things better, so here is my list of what React is.

React is…

• A front-end framework
• A JavaScript library for building user interfaces
• Made up of components (a.k.a. pieces/parts), which are all separate from each other; in order to make a whole app, we have to put components together (a.k.a. compose components- sounds funny to say, right?) to make an interface.

NB: Components are re-usable!

• Responsible for rendering the actual UI
• A framework that asks “How will the UI change based on the state of the components?”

Three Reasons React is Awesome

Screenshot from Cassidy Williams’ Udemy Course

Here’s what that all means:

Reusable and stateful components- The components in React are very similar to simple functions: we give them some input and they give us output. We can reuse functions as needed and compose bigger functions from smaller ones. React components have an input (properties and state), and an output (the user interface).

NB: state is the data in the application. To update the state of a React component, we call this.setState ; you can add any state you want to your component and each state can have its own component. If the state changes inside the application, React is going to re-render the UI so that the user can see the new state. Also, state is local to a component versus living in the DOM.

Properties, or props, are information that you pass to the component (kind of how you would pass an argument into a function).

Reactive updates- React is called “React” for a reason. When one of the inputs in a component change, the interface changes to reflect that. React handles updating the DOM for us so that we don’t have to! It simply “reacts” to what we program.

The Virtual DOM- React’s virtual DOM acts like an agent between the developer and the real DOM. React only renders what is changed on the page, so it’s less work for the real DOM. Using the virtual DOM in large applications will almost always be faster than using the real DOM because it doesn’t require the browser to make a ton of changes. Users can’t see the virtual DOM, which is not a bad thing.

Here’s a fun example Cassidy uses to explain the virtual DOM:

Let’s say I want 100 burritos. I could make all these burritos myself in my own kitchen, which might be faster or slower than someone else doing it, but there is potential for there to be a mess in my kitchen; OR I could have someone else do it and, eventually, they just have to deliver the hundred burritos. Either way, I have 100 burritos.

Now, staying with this same analogy, let’s say I have 40 burritos (it doesn’t matter who made them), and I want to order 60. Do I tell the burrito place “I want 100 burritos?” or do I say “I already have 40 burritos, give me 60.” Obviously, what makes the most sense, and is most cost-effective, would be to ask for the 60 burritos. That way, I end up with my 100 and the burrito place doesn’t have to do any extra work.

The second scenario is how the virtual DOM works: you write the code to make the interface look how you want it to look. The virtual DOM works out the difference between that and how it currently looks in the browser’s DOM; it only updates what needs to be updated.

The cool thing about React is that it lives within a single div in your web application’s body. Besides the awesome features of the library, it grew in popularity because it was able to fit easily within existing applications.

Check out this example and I’ll explain what it’s doing:

Screenshot from Cassidy Williams’ Udemy Course

Lines 1–2: Import React
Line 4: Creates a component called App
Line 5: Render method is called
Line 7: Div with the className of App is returned

NB: class is a reserved word in JavaScript, that’s why in React we use className instead.

Line 8–9: h1 and div are what get printed out to our screen
Line 15: React.DOM is what actually renders the App component within the element that has the id of root.

And this is what that would look like in the browser:

Screenshot from Cassidy Williams’ Udemy Course

The beauty of React is that we can create a whole html document within that one div root.

Okay, now, on to JSX!

JSX is a strictly typed, object oriented programming language that compiles to JavaScript and is designed to run on modern web browsers. It is designed to be faster, safer, and easier than regular JavaScript. In terms of React, it adds in templating for components, and a lot of powerful features that make development easier. For example, in React, the below code is totally valid for creating a div with an image and a caption underneath; React.createElement is a fundamental building block, and it is creating each piece.

Screenshot from Cassidy Williams’ Udemy Course

Inside the React.createElement element are three arguments. The first (pink) is where we pass in the tag name; this is where we tell the code what type of element we want to create. The second argument(green) defines the element’s properties. In our case, null means we have no properties we want to pass. The third argument (blue) represents whatever children our element is set to have.

I hate to turn everything I just explained on its head BUT! It turns out, you can do the exact same thing with the templating that is provided in JSX:

Screenshot from Cassidy Williams’ Udemy Course

Isn’t that awesome?! JSX removes a lot of repetition, so it makes it easier for us to remember how to use it since it is so HTML-like.

NB: If you go into a job interview, there’s a solid chance that they’re going to want you to understand what the JSX is being transpiled* into (which, in the screenshot before last, would be the createElement elements)

*Transpiling is the process by which ES6 is converted to ES5 in order to ensure that your browser can read your code. It is my understanding that lots of React folks like to use Babel as their transpiler.

Need a bit more info on transpiling? My previous post talks more about it!

In the end, two of the important things to remember are:

• The state of your components
• How the UI looks based off that state

I’m sure things will get more into the weeds as I go along but this is what I’ve got so far!

Next up, Component Lifecycle Methods :)

Photo by Christine Siracusa on Unsplash (closest thing to a burrito I could find)