Installing React in a Webpack Environment, the Short way, and the Long way.

React is quite simple install, using both the long way and the short way. Nowadayz, people, understandably, opt for the latter. However, I think it is beneficial to know how to set it up using both methods. In this article I’ll teach you how to setup React using both methods. Let us start off with setting it up from scratch; a.k.a, the long-way.

The Long Way

Note to reader! You should have the following installed before you move forward!

Webpack
Babel

“Why do I need to install Babel?”

ANSWER: Your react code is writing mainly in JSX format…think of it like a library that allows for you to write HTML code inside your JavaScript:

const MyComponent = () => {
  render{
  	return (
    	<YourCustomComponent>
           <div>
             <h1> SOME SAMPLE JSX CODE </h1>
           </div>
        </YourCustomComponent>
    );
  };

Thats some funny lookin code isn’t it? Yea, the JavaScript engine feels the same way. In order for the above code to translate into vanilla javascript, we need a transpiler; this is were Babel comes into play.

Think of Babel like a translator, who speaks multiple languages; like a person who can speak both Spanish and English. So it’s Babel’s job to translate Spanish to the English speaking person.

If you don’t have these install, no worries, just head over to my articles on how to set these up. When completed, flip back over to this post to continue. Here are the links to said articles:

So let’s begin.

Fire up your terminal and had over to your project directory, if you follow the instructions from my articles on how to install webpack, then you should already have node js ready to go.

mkdir reactproject

Next, lets install React:

npm i react react-dom

Open up your package.json file and make sure you see it listed:

  "dependencies": {
    "d3": "^5.15.0",
    "d3-fetch": "^1.1.2",
    "react": "^16.13.1", // <--your version may be different
    "react-dom": "^16.13.1", // <--your version may be different
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"

Now we need to configure webpack to look for both js and jsx files, so open up your webpack.config.js file and plug in the following:

    {
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
      }
    },

The above should be listed as an element in within the ‘rules‘ property. Here is a clearer picture of what it will look like; disregard the css and sass configuration; as you might have something else in-place.

module.exports = {
module: {
    rules: [
    {
        test: /\.s[ac]ss$/i,
        use: ['style-loader',
              'css-loader',
              'sass-loader'
            ],
    },
    {
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
      }

Now we will need to install a Babel preset for dependencies from Babel to work with react:

npm install @babel/preset-react --save-dev

Now open up your .babelrc file and add the new preset to the array:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

If you did not create a .babelrc file, then you will need to add the preset to your webpack configuration file.

You should be all set. Now let’s create your first component. We’re not going get too formal, we’ll create a quick and dirty component without worrying about proper file structure.

So within your project directory, create the following html file:

<!DOCTYPE html>
<html>
  <head>
    <title>My First React Project</title>
  </head>
  <body>   
    <div id='redEyeRoot'></div>
  </body>

Next, create an index.js file:

touch index.js

Now open up your index.js and enter the following:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

//Note, the Id created can be anything you want, 
//as long as it correctly references the
//same id within your HTML file.

If you look closely at the index.js file, you can see that we’re first, importing the App component and then rendering it below within the render method ( <App/> ).

We don’t have this component yet, so let us create it!

Create the following file:

touch App.js