A Guide To REACT

React is a JavaScript library build in 2013 by the Facebook development team to make user interfaces more modular (or reusable) and easier to maintain. According to React's website, it is used to "Build encapsulated components that manage their own state, then compose them to make complex UIs".

This is where React comes in -- instead of implementing the "separation of concerns" that gets impressed upon developers from day one, we have a different architecture in React that increases modularity based on a component structure instead of separating the different programming languages.

React vs. Vanilla JavaScript

When we talk about "vanilla" JavaScript, we are normally talking about writing JavaScript code that doesn't use additional libraries like JQuery, React, Angular, or Vue.

Set Up

If you are creating a production React application, you will want to use a build tool, like Webpack, to bundle your code since React utilizes some patterns that won't work by default in the browser. Create React App is super helpful for these purposes, since it does most of the configuration for you!

For now, since we want to get up and running super quickly so we can write actual React code, we will be using the React CDN, which is only for development purposes! We will also use the Babel CDN so that we can use some non-standard JavaScript features

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

In a full React project, I would split my components into different files, but again, for learning purposes, we will combine our JavaScript into one file for now.

Components

Think about how many places the like widget appears on Facebook -- you can like a status, or a link post, or a video post, or a picture! Or even a page! Every time Facebook tweaks something about the like functionality, they don't want to have to do so in all of those places. So, that's where components come in! All of the reusable pieces of a webpage are abstracted into a component that can be used over and over again, and we will only have to change code in one place to update it.

The status itself will be a component -- there are lots of statuses within a Facebook timeline, so we definitely want to be able to reuse the status component.

Within that component, we will have subcomponents or components within a parent component. Those will be reusable as well -- so we could have the like button component be a child of the PhotoStatus component and the LinkStatus component.

We can even have subcomponents within subcomponents! So, the group of like, comment, and share could be it's own ActionBar component with components for liking commenting and sharing within it!

There are a bunch of ways you could break down these components and subcomponents depending on where you will reuse the functionality in your application.

Let's Dive

In our HTML file, let's add just one element -- a div with an id on it. By convention, you will normally see that div have an id "root" on it since it will be the root of our React application!

<div id="root"></div>

You will have to add a script tag with the type text/jsx, so:

<script type="text/jsx"></script>

Now, let's get to our React code!

class HolaMundo extends React.Component {
  render(){
    return <h1>Hola Humanos!!!</h1>
  }
}

// Tells React to attach the HolaMundo component to the 'root' HTML Div
ReactDOM.render(<HolaMundo />, document.getElementById("root"))

All that happens is that "Hello World" is displayed as an H1 on the page!

Let's walk through what's going on here.

First, we are using an ES6 class that inherits from the React.Component class. This is a pattern that we will use for most of our React components.

Next, we have a method in our class -- and its a special method called render. React looks for the render method to decide what to render on the page! The name makes sense. Whatever is returned from that render method, will be rendered by that component.

In this case, we are returning an H1 with the text of "Hello World" -- this is exactly what would be in the HTML file normally.

Finally, we have:

ReactDOM.render(<HolaMundo />, document.getElementById("root"))

We are using the ReactDOM functionality to attach our react component to the DOM.

React utilizes something called the virtual DOM which is a virtual representation of the DOM that you would normally interact with in Vanilla JavaScript or JQuery. This reactDOM.render renders this virtual DOM to the actual DOM. Behind the scenes, React does a lot of work to efficiently edit and re-render the DOM when something on the interface needs to change.

Our component, <HolaMundo />, looks like an HTML tag! This syntax is part of JSX which is an extension of JavaScript. You can't natively use it in the browser. Remember how we're using Babel for our JavaScript? Babel will transpile (or convert) our JSX into regular JavaScript so the browser can understand it.

JSX is actually optional in React, but you'll see it used in the vast majority of cases!

Then, we are using JavaScript's built-in document.getElementById to grab our root element we created in our HTML.

All in all, in this ReactDOM.render statement, we are attaching our HelloWorld component to our div that we created in our HTML file.

Until then, stay high!