Create React Project without create-react-app
Tags: react, babel, webpack
Published: 2019-04-26 20:54:03

---
title: Create React Project without create-react-app
published: true
description: How to create react project without using Create-React-App
tags: react, babel, webpack
---
## Why this post?
It's very easy to create react app with terminal by following these commands.

```
npx create-react-app my-app
cd my-app
npm start

```

easy right? However, there is a possibility  that we don't no what is running behind the scene. What components are required in order to get our react app working. So that's what we see in this post. How you can make a react app from scratch.

In order to get this going, we need npm installed in your system

## Steps
Create a directory in your system

<blockquote>mkdir my-app</blockquote>

go to the directory
<blockquote>cd my-app</blockquote>

create package.json file
<blockquote>npm init -y</blockquote>
npm init will create new package.json file
Flag -y will tell npm to use all default config option while creating package.json

install react and react-dom 
<blockquote>npm install react react-dom</blockquote>
Use: it will add react and react-dom under dependencies in package.json file as well as it create node_modules directory with all other dependent libraries in it.

create gitIgnore to avoid pushing unnecessary code to github

<blockquote>vim .gitignore</blockquote>
possible items you need in your gitignore file are

node_modules
.DS_Store  -- If you're on mac machine
dist 


dist (Distribution folder)-- is a build directory which is generated by webpack and babel when we build our code. So we dont want this folder to go along as it generates on the by compilers for the production app.

create app folder
<blockquote>mkdir app</blockquote>

create two files within it.
<blockquote>touch index.js index.css</blockquote>


Start writing your hello world react application

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    render(){
        return(
            <div>Hello World</div>
        )
    }
}

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

```

So when you try to run this code in the browser it will give an error as the our code is written in JSX and browser does not understand it.

So this is the point where Babel and Webpack comes into play. 
To install all required dependency for these two run following command from your terminal.

<i>
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin 
</i>

Flag --save-dev : we use this flag to differentiate out build dependencies than our app dependencies

You can check your package.json file in order to see how this flag differentiate in that.

## Webpack configurations
Webpack is module bundler. So currently we only have on module. However, as our app expands we will have more modules. So webpack intelligently bind all those modules together and creates one single file which serves all these.

<blockquote>touch webpack.config.js</blockquote>

```
var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './app/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules : [
            {test : /\.(js)$/, use:'babel-loader'},
            {test : /\.css$/, use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'app/index.html'
        })
    ]

}

```
How to configure webpack check out my previous post 
{% link https://dev.to/vish448/webpack-for-react-intro-3n01 %}


in conjuction with out babel-loader works we have to add babel preset config to our package.json file

```
"main": "index.js",
"babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }

```

To run the build we have to add webpack to our script tag in our package.json

```
"main": "index.js",
  "babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "create": "webpack"
  },
```
So when i run <strong>npm run create</strong> from terminal it will run the webpack which will create the dist folder and our bundle file with index.html file.

It's hassle to run webpack every time. So you can start a webpack dev server. so it will start build your code as soon as you run it. modify your script in package.json with following

```
"scripts": {
    "start": "webpack-dev-server --open"
  }

```
Now when you run <strong>npm run start</strong> it will start the dev server and open your app in the browser.

Final directory structure will look like this
 <img width="302" alt="file" src="https://user-images.githubusercontent.com/1841822/56835623-b9739200-6842-11e9-9dbc-a4c58353574d.png">

Gist
    {% gist https://gist.github.com/vish448/755cc869a26928d139cbb8fb61fd2ae8.js %}



## conclusion

we create our simple app component, render that app component in element which has id as 'app'. Webpack takes all the modules in our application starts from index.html, run through all the transformations. like babel-loader, css-loader, styles-loader. Babel loader uses env and react presets to support older browsers and spit the entire code out in dist folder which we can use it to deploy in the production environment.