Build a Simple Webpack/React App

We will build a simple webpack project that can be full customized to your choosing, but for this case it is for a react project.

Photo by Gabriel Beaudry on Unsplash
mkdir StarWarsApp
cd StarWarsApp
npm init -y #Create your package.json with your default options.
#npm i -D for installing your devDependencies.
npm i -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin css-loader style-loader
#npm i -S for install your dependencies
npm i -S react react-dom react-router-dom history
touch .babelrc webpack.config.js
 mkdir src dist 
#Go into your src directory, and create a styles and components folder.
cd src
mkdir components styles
touch index.js index.html
Configure your package.json for webpack.
pathImport needed modules for your webpack.config.js or your webpack configuration file.
Define your configuration object.
Define your babel compiler options.
Markup for your html file.
Configure your virtual dom.
cd components 
touch App.js
mkdir presentational container
cd ..
cd styles
touch App.css
Define your app component.
Define your styles for your app.js
Add a different start script indicating your dev server opens, and hot reloads.
cd components/container
touch PeopleList.js StarshipList.js PlanetList.js
cd ../..
cd styles
touch List.css
Define your people list component.
Define a starships list component.
Define a planet list component.
cd ../../..
touch Routes.js
Encapsulate the App Component with Browser Router.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store