React.js for the Visual Learner (Chapter 6 | Building Our First Project)

Published in

Coding Artist

25 min readMay 23, 2017

Prerequisites

Make sure to install the following (if you haven’t already):

Get the Official Ebook

If you want to support me, you can go here to get an official copy of this ebook via PDF, MOBI, and EPUB.

Code Collection

Through Chapter 5: http://bit.ly/2qRNkQX
Chapter 6+: https://github.com/michaelmang/React-for-the-Visual-Learner

The Scope of This Chapter

Wow! We are making some serious progress. By now, we truly have covered the core concepts and features of using React. The only thing left to do is to start applying what we have learned. To get a taste of a real-world example of using React, we are going to be creating a landing page user interface from an already-existing mockup. We will then make things more dynamic and create a working chat bot demo on that landing page.

Before we get to all of that, we have to do some transitioning. Currently, we have been doing all of our development using Codepen. I like this method because it really removes some of the overwhelming parts of setting up a React project.

We have been able to solely focus on writing React code and didn’t really care about the behind the scenes setup that Codepen handles for us. While this is great for bite-sized code examples, we want to dive into creating an entire React project from scratch.

First and foremost, we will learn about the frontend tools that are needed in a React project. We will explain why all these tools are needed and how to use them.

Additionally, we will organize our code within a project directory. Meaning, we can organize all our code using folders and individual files.

In summary, we are going to be creating a React project from scratch in this chapter as we move away from Codepen. To be specific, we will discuss all the frontend tools that are needed and how to organize our project. We will approach this using modern, real-world solutions.

There is much to discuss and a load of terminologies to unpack. For that reason, it will take up the entire chapter. While this may not seem to be the most exciting part of this book (since we aren’t doing any coding with React), it is hands-down one of the most important.

Once we finish this chapter, we can move on to creating our very first user interface using React.

Understanding the Tasks in the JavaScript Ecosystem

In order to understand the tools that will be needed for our React project, we have to understand tasks within the JavaScript ecosystem for modern web development.

In this section, we will look at modern web development on a high level and dive into the specific tasks that fall under JavaScript.

A Brief Overview of Modern JavaScript Web Applications (Refresher)

The following description was provided in Chapter 2. However, I’m sure there’s been a lot of other information to digest between then and now so I’m including it once again.

A web application consists of a backend and a frontend. There is a client side and a server side.

The backend consists of a server, an application, and a database. The server hosts our application. The server also communicates with a database to get data.

The backend passes data to the frontend. In modern web development, JavaScript on the frontend takes the data from the backend and converts it to HTML.

Both the frontend and a backend compose a web application. However, in the frontend, specifically the browser, the web application is manifested visibly through a user interface. The JavaScript, again, converts data from the backend and outputs HTML which you can think of as instructions for what to have displayed as part of the user interface.

This is the role JavaScript plays in modern web applications at a high level. With this in mind, let’s dive deeper into what tasks occur in the JavaScript ecosystem.

Managing Packages

As we have discussed before, React is a JavaScript library for making user interfaces out of encapsulated components. As we mentioned before, React makes use of two libraries: React Core (the core library of React) and ReactDOM (the bridge between the React code and displaying the user interface).

Using Codepen, we added these are external JavaScript resources in the JavaScript settings:

Specifying the URLs is like specifying the physical address of a library (the real-world library) so you can go and grab the books and resources you need. Meaning, the URLs specify the address of existing JavaScript library that you want to use.

Although we are specifying this as a setting and just worrying about the HTML, CSS, and JS columns, Codepen does the following for us behind the scenes:

<body><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script></body>

In the code above, the URL is wrapped in a script tag at the end of the body so it can be used in the JavaScript files.

React is not the only external JavaScript resource that may need to be added. Let’s say I wanted to make use of D3, a data visualization library for JavaScript. I would have to add a script tag like so (or Codepen would do this behind the scenes):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>//other script tags here

Adding all of these script tags isn’t very difficult to get wrap your mind around. However, there is one major issue.

You might be thinking that the issue is how one gets the URLs for the script tags. That’s not the issue and can be easily done using cdnjs. In addition, the documentation for most JavaScript libraries provide the URLs for you:

The issue is that you have to manually update the URLs every time a new version is released. In small projects, this isn’t too terrible but in a large project, it becomes a nightmare.

Fortunately, there is a solution that will help manage all of our external JavaScript resources without worrying about constantly updating script tags.

The solution is a package manager.

Package refers to a directory with files in it that contain the code for the JavaScript libraries.

You will often hear the word modules tossed around. Modules is a bit of a broader term than packages (more on that later).

For instance, if you went to the Github page for React, you will see that the library itself has a directory for all the code:

A package manager will help us install and maintain packages (containing a directory like shown above) in a project.

We will be using a package manager called npm (abbreviation for Node Package Manager).

We will dive more into npm and how to use it later. For now, you just need to understand that managing packages is one task that has to be handled for a JavaScript project in modern web development.

Module System

We just discussed the concept of modules (aka packages) and package managers.

In place of script tags, we are going to have to specify that we want to use the React module installed with our package manager. We do this by adding code for the importing of a module.

Later on, we are going to cover how we can break down our component hierarchy into folders and individual files within a project directory like so (Two dashes refer to a folder and one dash refers to a file):

-- Components
  -- Villages
     - village.js
     -- Neighborhoods
        - neighborhood.js
        -- Blocks
           - block.js
           -- Houses
              - house.js

Let’s say for a house component file (house.js using the example above), we imported React and made a component like so:

class House extends React.Component {
  state = {color: this.props.colors.lightGray};render() {
    return (
      <div style={{background: this.state.color}} className="house">    </div>
    )
  }
}

Given the component hierarchy according to The React Village Design, we will eventually need to nest this house component like so:

class Block extends React.Component {
  render() {
    return (
     <div className="box">
       <House colors={this.props.colors}/>
     </div>
    )
  }
}

If we’ve broken down the code of the House and Block components into separate files, then the Block class won’t recognize the House component by default. Therefore, we have to write code for exporting the House component so then code can be written to import it wherever it needs to be used.

For this reason, modules is a broader term than packages. Modules can be thought of code than can be imported and exported in a project.

Package refers specifically to a directory with files in it that contain the code for the JavaScript libraries that we want to use in a project. Since packages can be installed with a package manager and imported (i.e. importing React), they are a type of modules. Modules also include code that we write that has to be imported and exported within a project (i.e. our React components).

In short, we need some sort of module system that allows us to write code that will import modules installed with our package manager (i.e. React). We also need to use the module system to write code to make the components exportable so that they can be used elsewhere (i.e. making a house exportable so it can be imported and nested in a block’s class).

Using a module system is another task to be handled in a JavaScript project in modern development. ES6 has its own module system that we will use in our project. Like our package manager, we will get into the specifics later.

Preprocessing

Preprocessing sounds like a scary concept, but we have already discussed this.

In Chapter 3, we discussed the difference between ES6 and ES5. We mentioned that ES6 is a more updated syntax of the ECMAScript language which is the standardized language implemented into JavaScript than ES5.

ES6 provides cool features that are needed to write good React code, such as our ES6 component classes. Babel also will allow us to use ES6 as a module system. However, browser support isn’t quite there like it is for ES5. Therefore, we brought Babel into the discussion.

In short, Babel takes ES6 code and converts it to ES5 so the browser can process it. This is an example of another task called preprocessing.

Now, we were using Babel in the context of Codepen. Because of that, setup was very simple:

We just specified Babel as the JavaScript preprocessor from a drop down menu and Codepen did the work for us.

Later on, we will discuss using Babel in the context of our own project.

Bundling

I have already mentioned that we are going to be breaking down our React project into individual folders and files. For example, we will organize our component hierarchy in a project directory like so:

-- Components
  -- Villages
     - village.js
     -- Neighborhoods
        - neighborhood.js
        -- Blocks
           - block.js
           -- Houses
              - house.js

We also mentioned that we will use a module system so we can export a component in one file, import it into another, and then make use of it.

For example, we could create a house component and make it exportable. Then, we could import it into a file containing our block component and nest it.

Working our way up the component hierarchy, we will have neighborhoods imported into a file for our village. The village will then be made exportable and imported into a file called index.js.

index.js will contain all of the villages. Remember, there are many villages in a web application. For instance, we could have a login page, sign up page, landing page, etc. We will then be able to toggle on and off which village is currently displaying (rendered) in our single page application.

index.js contains all the villages, the villages contain their neighborhoods, the neighborhoods contain their blocks, and blocks contain their houses. Point being, index.js will contain all of our code even if all of the code isn’t visible in that file since it’s broken down into modules (individual files with code that can be imported and exported).

All of this code is using ES6, so we mentioned that we need to use Babel in the preprocessing task. Well, we need to carry out another task called bundling.

Bundling refers to taking our index.js (the top of the hierarchy for our code) and specifying the preprocessing that we want to be done (Babel in our case). It then spits out a single file with the final code that can be processed in browsers.

We will be using a tool called Webpack to handle the bundling task.

Study Break

To summarize the previous section, here are the tasks in the JavaScript ecosystem:

Managing of packages
Using a module system
Preprocessing our JavaScript code
Bundling a single file

Additionally, we mentioned the tools needed to complete these tasks:

npm
ES6
Babel
Webpack

With this out of the way, we can actually get started building our project. As we do this, we will see how we to organize our project directory and make use of all our tools so the tasks get accomplished.

At this point, I have tried to explain things as best as I possibly could. With that being said, there is no way to really avoid the overwhelming nature of all these new terminologies. If you are feeling confused, this is totally normal. That doesn’t mean you are a pseudo-developer who can’t make it in the real world like I thought to myself. It just means you’re figuring out: “Wow, no wonder people have a hard time learning React!”.

Take a deep breath or a break if you want, then we can dive into things. I will continue to try to be as practical as possible as we go through things.

In Case You Missed the Prerequisites

Make sure to install the following (if you haven’t already):

Building Our First Project

Creating Our Project Folder

First things first, we need to make a new project folder called react-landing-page and have it as the current directory in command line.

If you are not familiar with command line, here are the steps:

Open command prompt (Windows) or terminal (Mac)
Type “cd Desktop”. This will change directory (cd) to your Desktop. Essentially, we are entering into your Desktop so we can run commands that will apply there.
Type “mkdir react-landing-page”. This will make directory (mkdir) on your Desktop. In other words, it will create a new folder called react-landing-page on your Desktop.
Next, type “cd react-landing-page”. We have now entered into the newly created directory where we can run commands.

We have now created our project folder for our project called react-landing-page and entered into it from command line. We will now run commands to set up our package manager.

Initializing Our Package Manager

Once we have done all that, we can type the following:

npm init

Let’s break this down.

Remember, npm stands for Node Package Manager. It is the tool for completing the task of managing our packages.

npm is a command line tool. Therefore, we can run npm commands by doing “npm ___”.

In the example above, we do npm init.

npm specifies that we are going to run a npm command.

init is a particular npm command that will initialize the package manager for our project.

Looking at your command line, we should now see the following prompt:

name: (react-landing-page) _

This is the first prompt of several that npm init causes. These prompts just allow us to update the meta data. Meta data just refers to basic information about the project.

Go ahead and hit enter until you get prompted with the following:

Go ahead and type “yes”.

After you do so, the command will finish.

So, what just happened?

Let’s go ahead and see for ourselves.

Open Atom (a text editor that was a prerequisite to install) and select File → Add Project Folder:

Browse to your Desktop and select react-landing-page and click Select Folder.

We should now see a new file that was created by npm init called package.json:

Here, we have the meta data that was populated as we hit enter through the prompts caused by npm init represented in JSON format.

JSON stands for JavaScript Object Notation and it meant to be a readable way for structuring data.

The meta data is pretty straightforward with two exceptions, main and scripts.

main is the entry point of the application. Our entry point is specified as index.js which we mentioned before. In terms of our React single page applications, this is going to be the file with the code at the top of the hierarchy. Meaning, it is the single page that contains all of the villages (views) that make up the application. Again, examples of villages include a landing page, sign in page, etc. In our project, index.js will just include our landing page village.

scripts refer to scripts that you can have run at various times in the lifecycle of your package. This will be used when we get to our Webpack configuration.

Installing Packages as Dependencies

Cool! We’ve gotten started with initializing our package manager.

Next, we need to install the packages that will be used for our application. To start, let’s install React (we have called it React Core but is officially called React) and React DOM.

To install a package that is necessary for our application to run, we can use the syntax:

npm install --save *insert package name here*

For React, we can do the following:

npm install --save react

We should see the following once this completes:

So…what is all of this?

Well, let’s take a look at our project in Atom again.

Woah! There’s a new folder called node_modules and the following in our package.json file:

"dependencies": {
    "react": "^15.5.4"
 }

Our package.json has added an object called dependencies which contains the name and version of all of the packages that have been installed in our application that our project is dependent on to run.

Let’s expand the new node_modules folder.

Here, we can see all the packages that have been installed.

You might be thinking: “Wait a second, we only installed one package for React. Why are there so many packages?”

When we install React, it also installs all of the dependencies that are required for React to run. Therefore, we have all the packages also under node_modules. If you are curious, you can check the package.json file under the react folder in node_modules to see what each dependency is.

Sweet! We’ve installed our first package using npm. Now, it’s time to install React DOM.

React DOM is two words. So, what exactly do we do?

npm install --save reactdom or npm install --save react-dom

This brings up an important point. We can find all the packages that are available using npm here.

Let’s search with “react dom” as the keywords:

There it is right on top of the list! Go ahead and click on it.

We are brought to a page with some information and documentation:

On the right-hand side, we can see the naming for the npm install command:

Note that we will edit this slightly:

npm install --save react-dom

Adding the save indicates that this is a package that will be necessary for our application to run.

Go ahead and run that command.

When it is finished, we will see the following:

This message in the command line is much shorter since it did not have any other packages that it was dependent on.

The React DOM package has now been added under node_modules and has been specified as a dependency in our package.json:

"dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
}

Pretty simple! We will shortly look at how to use these packages in our code. Before that, however, let’s go ahead and set up our project directory.

Setting Up Our Project Directory

How we organize our project directory is ultimately gray area. However, this is how I prefer to approach it:

-- react-landing-page
  -- node_modules
  -- components
    -- villages
      -- neighborhoods
        -- blocks
           -- houses
  -- styles
  - index.js
  - index.html
  - package.json

All of the above are folders with exception to package.json. Indentation is used to denote the hierarchy. For more complex projects, we can add more folders. Let’s keep it simple like this for now.

Let’s go through this together so you get the feel for it.

Right click react-landing-page and select New Folder:

Name it components and hit enter:

This has created a folder called components that is right under react-landing-page:

Let’s repeat that exact process so we can create a folder called styles right under react-landing-page.

styles will contain all of our CSS files.

components will contain a folder for each level of the hierarchy in the village design (and their components in separate files).

Let’s repeat the same process to create a folder for the top level of the component hierarchy which is villages. The only difference is that you have to right click the components folder and then select New Folder:

By now, you should have a hang of how to create folders in Atom. Go ahead and finish off the rest of the folders within components until we have the following:

Perfect. Let’s go ahead and add our index.js file. To add this file, right click react-landing-page, select New File, name it, and hit enter.

Repeat the same process to add a new file called index.html.

Our project directory at this point should be:

Sweet! We are now ready to create our first file where we will learn how to import our packages and do some cool stuff with React.

Creating Our First File

Double click on index.js in Atom so we can add some code.

When we created our Koala in Codepen, the highest component in our hierarchy was a village component which we named Koala:

class Koala extends React.Component {
  render() {
    return (
      <Box colors={this.props.colors}/>
    )
  }
}

As we have discussed a few times now, our index.js will contain a collection of multiple villages (views) that make up our single page application.

For that reason, let’s create a new React class to define a component which we will call App:

class App extends React.Component {
  render() {
    return (
      <div>Hello React via a project!</div>
    )
  }
}

Since we are just setting up our project in this chapter, let’s just return a simple “Hello React via a project!” instead of nesting a village like we will eventually do.

Like before, we want the highest component in our hierarchy to be rendered using React DOM. Therefore, we also have to add:

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

In the code above, we specified the target for our app in the HTML to be a div element with an id of app.

Let’s quickly add the HTML code in index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Landing Page</title>
  </head>
  <body>
    <div id="app">

    </div>
  </body>
</html>

Ok. We have written our React code. There is nothing new going on here.

Next, let’s add the new code for importing the React and ReactDOM that has been installed and neatly added under node_modules.

The syntax for importing a module so it can be used in our file is:

import Name from '*insert name found in npm install ____';

Therefore, we do the following for React:

import React from 'react';

And React DOM…

import ReactDOM from 'react-dom';

Note that the capitalization/spelling for the variables do matter so it matches how we use it in the code:

class App extends React.Component {
  render() {
    return (
      <div>Hello React via a project!</div>
    )
  }
}ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

Cool beans! Go ahead and make sure index.js and index.html is saved.

Configuring Webpack and Babel

Earlier, we mentioned that Babel is going to convert our ES6 JavaScript to ES5.

Webpack is the bundler that says: “Give me your entry file and anything you need for preprocessing. Oh, you need Babel? No problem! I’ll send you a final file that has everything converted for your browser to handle.”

To get these to work, there are quite a few things we have to install via npm. Fortunately, it’s all been documented well here.

Run the following in command line:

npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react webpack webpack-dev-server html-webpack-plugin

Now, there’s a slight difference in this npm install command. We have:

npm install --save-dev

This is used to specify devDependencies as distinguished from just dependencies (this is official npm terminology).

dependencies refer to packages required (imported) by our application.

devDependencies refer to packages for development and testing.

Think of it this way. React and ReactDOM were imported (via a require) and used to make our application. Therefore, they are dependencies.

Babel and Webpack are just assisting in taking our application and making it compatible with browsers. They are not used to write the code to make our application. Therefore, they are devDependencies.

We can check our package.json to see these newly installed devDependencies:

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.6.0",
    "webpack-dev-server": "^2.4.5"
  }

With these installed, we need to write the code so Webpack take our code, have Babel do it’s thing, and spit out the final file we need.

Let’s add another file right under react-landing-page called webpack.config.js.

Next, open the file and let’s add some of the Webpack configuration code:

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
}

In a lot of these chapters, I have gone into great detail to explain concepts and code that is introduced. With that being said, the Webpack code is something that I don’t have memorized and I don’t expect you to either. We are just going to cover discuss the main things that are going on. Once we have one working example, we will be good going forward.

In our code, we have an entry file (index.js) and the output file once Babel does the conversion (bundle.js).

Now, we need to add some rules that say: “Ok. You’ve got the entry file and output file configure. I want you to find every JavaScript file and apply Babel”.

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      }
    ]
 }
}

test specifies the type of files the type of files that need to have some preprocessing applied. In our case, we want our JavaScript files to be preprocessed using Babel since they will be using ES6.

exclude is specifying the exceptions to our test. We don’t want Babel to touch any of the packages installed via npm so we exclude everything in the node_modules folder.

use specifies what is doing the preprocessing (loader) and the options (options) that we may want to specify.

Our loader is babel_loader. This just says use Babel for the preprocessing of our JavaScript files.

Under options, we specify two presets, env and react.

env is used to take generic JavaScript code using ES6 and make it compatible with browsers. react is used to take React code that uses ES6 (our component classes) and make them compatible with browsers.

In short, all the code we have so far is saying: “Hey Webpack! Take our JavaScript code and use Babel to make it compatible. Just a heads up, we need generic JavaScript code that uses ES6 code to work as well as React code that uses ES6.”

The final step for completing our webpack.config.js file is to use a Webpack plugin that we installed via npm called html-webpack-plugin. This plugin will automatically populate our index.html file and inject a script tag into our HTML that contains the outputted JavaScript file.

Let’s write the code to setup this plugin in our configuration file:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './index.html',
  filename: 'index.html',
  inject: 'body'
})module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      }
    ]
 },
 plugins: [HtmlWebpackPluginConfig]
}

In the added code, we import the plugin from node_modules and create a variable with all of our settings. We are simply saying: “Go to our index.html file and inject the script tag in the body.” We then specify the plugin settings at the end of the module.exports{…}.

The last piece of the puzzle is to add a script to our package.json file. We will add the following script:

"scripts": {
  "start": "webpack-dev-server"
},

start is just the name of our script that we can run via npm. webpack-dev-server is what is fired on the start of our script. This just fires up a server that hosts our application on a local host address.

Now, we can run the script in command line:

npm start

We get the following:

You can then go to the localhost address where the application is running:

http://localhost:8080/

This will display the simple React component we created in index.js:

Finally!!!!

Final Code: Available on GitHub under Chapter 6

Concluding Thoughts

This definitely was a difficult chapter to write. It certainly is the hardest (and least visual) part about creating a React application.

Fortunately, it is a painful process that only really needs to be done once. Once you go through configuring a project for the first time, you will have a template for all other React projects going forward. Additionally, a lot of the code (especially Webpack) is something you only really need to get the gist of and at least understand the core concepts behind the code. It is not something that you will repeat over and over that you need to master everything like our React code.

This may have come across as a boring chapter. However, it is this topic that literally caused me to give up on learning React over a year ago. It is something that is so crucial to understand or else you will be caught in a never ending cycle of “fake it to make it”.

Great job. Pat yourself on the back. You are a developer, don’t worry.

Now that we have our first project built from scratch, it’s time to have some fun. Next up, we get to the fun part of making our first user interface via React.

Chapter 7

Chapter 7 is now available here.

Get the Official Ebook

If you want to support me, you can go here to get an official copy of this ebook via PDF, MOBI, and EPUB.

Glossary

Codepen: CodePen is a playground for the front end side of the web. We can use it to write React code without dealing with the “behind the scenes” work.
DOM: The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.
React: A JavaScript library for building user interfaces.
React Village Design: Terminology to describe the hierarchy of React components.
ECMAScript: ECMAScript is a language standardized by ECMA International and overseen by the TC39 committee that is implemented in JavaScript.
ES5: The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers.
ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers.
Babel: Compiles ES6 code to ES5 so it can be processed by browsers. It can be applied using Webpack.
JSX: A JavaScript syntax extension used to specify what we want our component to render as.
React Core: The entire React library is divided into two separate libraries, React and ReactDOM. I find this to be poor naming convention so I refer to the separate core React library (as distinguished from ReactDOM) as React Core.
ReactDOM: The entire React library is divided into two separate libraries, React and ReactDOM. ReactDOM is the glue between React components and the DOM. It allows you to mount React components to HTML elements.
Package: A package is just a directory with one or more files in it, that also has a file called “package.json” with some metadata about this package. [src]
Modules: JavaScript code that can be imported and exported for use throughout separate files.
Module System: ES6 code used to make our JavaScript code from a file exportable and import it from other files for use.
Webpack: A module bundler. In our project, we use it to take our JavaScript code (both generic and React) and apply Babel. It ultimately injects a new file in our HTML that is compatible with browsers.
Webpack Dev Server: Fires a server that will host our application. It is set to run in our project when we run “npm start”.
Node Package Manager (npm): Used to manage packages that can be used in our project. A full selection of available packages is available here.
Package.json: A JSON file that represents important data of our project. It is automatically created via npm init.
Dependencies: Refers to dependencies that are needed to write the code of our application. Example: React
DevDependecies: Refers to dependencies needed for the build (development and testing). Example: Webpack
Preprocessing: In our project, this refers to the process of converting ES6 code to ES5 via Babel.
Atom: A text editor made by Github.
Bundling: Bundling refers to taking our index.js (the top of the hierarchy for our code) and specifying the preprocessing that we want to be done (Babel in our case). It then spits out a single file with the final code that can be processed in browsers.

Please provide kind correction and feedback. Smash the heart and share away.

Cheers,
Mike Mangialardi
Founder of Coding Artist

React.js for the Visual Learner (Chapter 6 | Building Our First Project)

Prerequisites

Get the Official Ebook

Code Collection

The Scope of This Chapter

Understanding the Tasks in the JavaScript Ecosystem

A Brief Overview of Modern JavaScript Web Applications (Refresher)

Managing Packages

Module System

Preprocessing

Bundling

Study Break

In Case You Missed the Prerequisites

Building Our First Project

Creating Our Project Folder

Initializing Our Package Manager

Installing Packages as Dependencies

Setting Up Our Project Directory

Creating Our First File

Configuring Webpack and Babel

Concluding Thoughts

Chapter 7

Get the Official Ebook

Glossary

Written by Michael Mangialardi