The React Ecosystem

Introduction

When I started learning React, there was a huge debate on whether React is a library or a framework. While I assumed React to be a framework, since, it was always compared with the likes of Vue or Angular, it is actually a JavaScript library.

However, there are other components such as the Webpack, Babel, Router, etc. that make it more wholesome into a complete framework that it is. Often, this is hidden under the hood, since we typically use 'create-react-app' to generate a React boilerplate code to start our application with.

In this article, we will look at a brief overview of the following key components that comprise the 'React Ecosystem'.

Babel
Webpack
Routing
Styling
State (Redux/Context)

This is my second article, in the 'React Series' based on my learnings from Tyler Mcginnis course @ ui.dev.

You can read the first article on Why you should learn 'React'?

React

As I had mentioned in the introduction, React is just a library and you can just include the 'react' and 'react-dom' script tag inside the index.html and it's perfectly valid.

You can run the below code and it's a perfect valid React application. You can find the code in action over here.

<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16.14/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16.14/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      function Hello({ name }) {
        return <h1>Hello, {name}</h1>;
      }

      ReactDOM.render(<Hello name='Skay' />, document.getElementById('app'));
    </script>
  </body>
</html>

So, then the question becomes why don't we use the above setup? Instead, when we run 'create-react-app', the setup is quiet different and other components such as 'Webpack', 'Babel', etc. are in play.

Let us look at each of those components at a high-level and what they do behind the scenes to support a production-grade React app.

Babel

If you visit, Babel's website, it'll be mentioned that Babel is a JavaScript compiler. What that means is Babel is responsible to transform JavaScript code from one format to another based on specified configuration.

Now, let us look at the below code example.

import React from 'react'

export default function User ({ name }) {

  return (
    <div>
      <h1>Hello, {name}</h1>      
    </div>
  )
}

A couple of things to note here:

User is a React component that returns a UI (view) Hello, "name" based on the name passed to the component.
The 'HTML' syntax within the JavaScript context is called JSX. It is React's way to allow you to describe UI inside of your components.

Now, if your browser needs to display the above information, it needs to know to get hold of the HTML view and the regular old JavaScript. This looks like a perfect job for 'Babel' which accepts the JSX input and transforms it into a valid JavaScript that can be understood by the browser.

But what's cool about Babel is that it's not limited to JSX → JS transformations, but, it can do almost any kind of transformations and it is most commonly used to transform ES6+ code to the backward-compatible version of JavaScript that old browsers can understand.

Webpack

Webpack is a module bundler. It examines your codebase for all imports and exports and intelligently bundles all your modules into a single file that your browser can understand.

So in our above example, the following lines of code, the 'import' and 'export' statements are what Webpack will scan and bundle it into a single bundle.js file which will be referenced inside of index.html.

import React from 'react'

export default function User

I have an article that describes Webpack in much greater detail, which you can read over here.

Routing

The idea was to keep React as a simple UI library and not include the Router as a part of the core library. It was done with the intent to provide the users the flexibility to decide what kind of router they would want to integrate with React.

The most popular router for React is of course the 'React Router'

You can describe React Router’s job is to render specific React components based on the current URL path of the user.

<Router>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>

    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </div>
</Router>

When a user navigates to the home page (/), React Router will render the Home component. When they navigate to /about, React Router will render About. Likewise, when they navigate to /contact, React Router will render the Contact component.

React Router is again a vast topic and will warrant a separate blog post of its own. For now, you can simply understand it as the component that is responsible to render React components based on the URL path the user visits.

Styling

There are two ways to Style a React application. The traditional way and the React way. Let us look at both ways of defining styling to your react application.

Traditional Styling

The traditional approach includes adding all your styling inside index.css and you can have classes, cascading defined there typically how you would do for a non-react application. In fact, you can also have SASS or any CSS pre-processors included.

React Styling

The React approach of styling embraces the component model. Let's add styling to our above example and see how the code looks.

const styles = {
  header: {
    fontWeight: 400,
    fontSize: 55,
    color: '#a41c1c'
  }
}

export default function User ({ name }) {

  return (
    <div>
      <h1 style={styles.header}>Hello {name}</h1>      
    </div>
  )
}

As you can see from the above code, the styling is contained within each component. One of the most popular CSS in the JS library in the React ecosystem is the Styled Components. You can check them out over here.

State (Redux/Context)

Before we talk above Redux or Context, we will take a step back and define what state means to a React component.

React State

React's philosophy is that you build individual components that can each manage their own state as well as describe their UI. You then compose those components together to get your app.

But often in real-life applications, the state of components needs to be shared with other components and it becomes a challenge to pass the state through the component tree if there are multiple levels. This is generally the case as the application grows larger and becomes more complex.

Redux

To solve the above problem, Redux came into the picture. Redux is a state management library and while it's often used within the context of React library, it can in fact be used with any other view library and it's not tied to React.

The philosophy of Redux is pretty different. Instead of having state spread out in different places, with Redux, you stick all of your 'State' in a single location called a 'Store'. You then establish strict rules for how the state of your 'Store' can change through something called 'Actions'.

Context

Context API was introduced by the React team for providing a centralized way to manage a Component's state without relying on external libraries such as 'Redux'.

As per the official React docs, Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Each of the topics such as Redux, Context API requires a dedicated blog article to explain the details. The important takeaway as a part of this article is that 'State' management is a core part of React's ecosystem and you can manage it simply within a component's state management mechanism or use Context API or Redux library based on your use-case or the complexity of the application.

Conclusion

I think that's pretty much an overview of the core components. I hope after this article, you'll idea of what is under the hood when you run CRA (create-react-app) in your CLI, and when someone says it's a React application, it's an ecosystem and not just the React library.

Don't forget to subscribe to my newsletter and follow me on Twitter @skaytech.

Blog

skaytech