Creating an app in React is a true pleasure, especially coming from programming interactive apps in vanilla JavaScript. React utilizes an object oriented design pattern, with a couple of core concepts that are unique: first, there are components. A component in React is a class which represents an element (or set of elements) in the DOM, which have properties (or props) and can also carry state. State in a React component is reserved for properties that may change over time: the text input on a form, for example, or a button which toggles text displayed to the user. Components are typically separated into discrete files, following the convention ComponentName.js.

The second feature which is distinct to React is JSX. JSX — or JavaScript XML — is a syntax extension to standard JavaScript which allows us to incorporate XML-like syntax into our code. For example, with JSX we are allowed to write the following:

const greeting = <h1>Hello, World!</h1>

This is where things start to get interesting. If you are familiar with HTML, the above should look familiar. With standard JavaScript, however, something like the following would be required to achieve the same result:

const greeting = document.createElement("h1");
greeting.innerText = "Hello, World!";

How exactly does this work and why is it legal? As it turns out, JSX is actually transpiled into standard JavaScript behind the scenes. React uses a preprocessor called Babel to translate our code before it is rendered in the browser. If we head over to the Babel REPL, we can see exactly how our code will be converted:

const greeting = React.createElement("h1", null, "Hello, World!");

This should look familiar! The main difference here is that React uses its own copy of the DOM — the virtual DOM — in order to dynamically handle component loading and unloading (or mounting, in React terminology.)

So, how does React incorporate Babel? This is where Webpack comes in. Webpack is a package bundler for JavaScript that compiles modules into a single source, which is then rendered in the browser. As of ES6, JavaScript introduced the import and export keywords, allowing us to separate out our code into discrete modules and include dependencies. Remember the mention of components being split up into separate files? Webpack first determines the file hierarchy for the project and generates a dependency graph. From the dependency graph it compiles the code to a single source, using Babel to translate and remove the import and export statements, and convert JSX into standard JavaScript.

Let’s create a simple React app to tie all of these concepts together. In your terminal, navigate to your root development directory. Then type:

npx create-react-app my-app

The create-react-app tool does a few things for us, including running npm init and installing Babel and Webpack with some configuration scripts. Let’s move into our new project directory and remove all of the generated source files (as we will create our own from scratch):

cd my-app && rm src/*
touch src/index.js

We will next create a simple app to display and update a greeting as the user types input. Add the following to src/index.js:

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: ""
    };
  }

  render() {
    return (
      <Fragment>
        <h1>Hello {this.state.name}</h1>
        <input
          type="text"
          placeholder="Type your name..."
          onChange={e => this.setState({ name: e.target.value })}
        />
      </Fragment>
    );
  }
}

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

Run yarn start in the terminal, and you should see a header with a text input right below it rendered in the browser. If you copy and paste the code above into the Babel REPL, you can see how the code will be transpiled to vanilla JavaScript. Ok, so now what?

If we poke around in the file structure that create-react-app generated we will notice a file called package.json. This file is responsible for defining project dependencies and scripts such as start and build. Let’s go a level deeper. Type the following into the terminal:

git add .
git commit -m "initial commit"
yarn eject

When prompted, type y to complete the process. What did this do? Well, if we look at our directory structure, we will notice two new folders have been created: config and scripts. By running the eject command, we are removing our dependency on the magic of the create-react-app tool and getting a look under the hood at what’s really happening. Taking a look at package.json now, we can see that there are now many more dependencies listed than before, including Babel and Webpack. Under the config folder that was generated, we also see webpack.config.js and webpackDevServer.config.js. Take a few minutes to peek into these files and try to comprehend what they are doing.

Tying It All Together

React is an amazing framework for quickly creating stunning dynamic web apps, with a lot going on under the hood. JSX is an extension to JavaScript which allows us to write XML-like syntax to define DOM elements, which are translated by Babel into vanilla JS. Webpack is responsible for bundling all of our components together and running a local development server to test our code in the browser. I hope that this article has helped to demystify the magic of React, and bring about a deeper level of understanding.

Go here to view the code presented in this post.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

#reactjs #javascript #web-development