Create React App without create-react-app (Using Babel 7)

Goals:

1. Add React React-Dom libs
2. Add Webpack tools
3. Add Dev Server Tools
4. Add Babel Tools for Env and React
5. Add Webpack Loaders (css and babel)
6. Add Build Tools (to create production assets: index.html, styles.css)
7. Add Optimization Tools (Minify and Uglify)

Here I show how to create a React web application without “react-create-app”.

Let’s create a folder for a new project and install all dependencies

$> mkdir reactproject
$> cd reactproject
$> yarn init -y
$> yarn add react react-dom react-hot-loader
$> yarn add -D 
webpack 
webpack-cli 
webpack-dev-server 
@babel/core 
@babel/plugin-transform-async-to-generator
@babel/plugin-transform-runtime
@babel/preset-env 
@babel/preset-react 
babel-loader 
html-webpack-plugin
style-loader 
css-loader 
extract-text-webpack-plugin@next

File and folder structure:

webpack.config.js

Create an html template

The HtmlWebpackPlugin will inject the script when we run the app.

Create index.js

index.js

and app.js file

Add some scripts to package.json file

I’m using an alternate webpack.config file i.e webpack.prod.js. In this file, remove the devtool property.

Before running the app, prepare babel compiler for react and es6. Create a .babelrc file in the root of the project

Run the app

$> yarn start

Build

$> yarn build

And that’s it!!!