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

Paul Allies
2 min readJul 23, 2018

--

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!!!

--

--