Using Webpack and React to Achieve Similar Workflow as Create-React-App(CRA) CLI.
Tags: react, webpack, beginners
Published: 2018-03-30 10:59:46

---
title: Using Webpack and React to Achieve Similar Workflow as Create-React-App(CRA) CLI.
published: true
description: 
tags: react, webpack, beginners
---

Using Create-React-App(CRA) for React project simplifies the development workflow.  Behind it, is the usage of webpack for almost all of its tasks. But if you have ever wondered how this CRA works, then this article is for you. This article is about creating React project from scratch with the aid of Webpack.

To get started, we need some packages to help us in creating a React project.
#### dependencies. 

*    `react` :  holds the react source for components, state, props and all the code that is react.
*   `react-dom` : helps to use React in the browser.

#### development dependencies
*    `webpack` 
*    `webpack-cli`
*    `webpack-dev-server`
*    `babel-core`
*    `babel-loader`
*    `babel-preset-env`
*    `babel-preset-react`
*    `html-webpack-plugin`

Having known the packages that we will need for the React Project, let's start by creating a project. Create an empty folder and through your command-line or terminal navigate to the project folder. 
Since we will be installing these packages into our project, we need to start by create package.json file that will hold the metadata about our project. You can do this by running 
```bash
   npm init -y
```

You then need to install the dependencies as 
```bash 
    npm i react react-dom -E
```
Once the installation is done, we can now add the devdependencies as 
```bash 
    npm i webpack webpack-cli webpack-dev-server babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin -DE
```

We need to setup configuration for both webpack and babel that will help webpack to know where it should start compiling the necessary files as well as other important information needed for its operation. 

At the root directory of your project, create `webpack.config.js` file and add the following content.
```js
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry:'./src/index.js',
        output: {
            path: path.join(__dirname, '/dist'),
            filename: 'bundle.js'
        },
        module:{
            rules:[
                {
                    test:/\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    }
```
From the config file, we have entry,output, modules, and plugins keys. Webpack simply needs to have these 4 core things to execute properly.

entry: where webpack should start compiling the files from, which is react  our entry point, `src/index.js`
output: where we want our compiled code to go, it is going to be one bundled `js` file
module: this is where we put all our loaders.  Which looks for all `js` file to be compiled by webpack. Also we don't need the node_modules to  be compiled so we exclude them. 
plugins: we don't want to manually add the `index.html` in our dist folder created by building our react project. So we allow the HtmlWebpackPlugin to do that for us. Which basically says create an index.html file in the dist folder using the `./src/index.html` file.

We will need to add a configuration for babel on which preset it should use. Create `.babelrc` file in the project root and add the following content.
```
    {
        "presets": ["env", "react"]
    }
```
Awesome, we have a good setup for  our development,  now we can start writing some react code. But from the webpack configuration, we need to have an entry file called `index.js` in the `src` folder so we need to create that.  In that file add the following code.

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

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

```
From the same webpack configuration, we need to create `./src/index.html` file. Add these content to it.
```html
    
    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>My React App</title>
    </head>

    <body>
      <div id="app"></div>
    </body>

    </html>
```

From the `./src/index.js` file, we  are importing an `App` component  from `/components/App` to be rendered by the ReactDOM. We need to create that file too.
```js
    import React, { Component } from 'react';
    class App extends Component {
      render() {
        return (
          <div>
            <h1> React is Awesome</h1>
          </div>
        );
      }
    }
    export default App;
```

To run the sample react app, we need to add to the script in package.json the following scripts. 
```
     "start": "webpack-dev-server --mode development --open --hot",
     "build": "webpack --mode production"
```

Run the application by executing `npm run start` in your terminal and also build the react application with `npm run build` to build the app into the dist folder.

If you have been following along, you can download the code from [my github repo](https://github.com/OMENSAH/react-without-cra)

## Conclusion.
Now, you have learned how to use webpack with React to achieve almost the same workflow as the CRA CLI and has cleared the doubts on how CRA works.

NB: In case something is not clear enough,let's discuss  that in the comment section