Create a react app without create-react-app

Image for post
Image for post
React

When it comes to start a react project, we all use the familiar create-react-app by Facebook engineers.This create-react-app stores the logic to use, Babel and Webpack behind the scene to make our React application work in the browser.

We can also configure a React app, without using create-react-app and we will be doing the same in this project.Now, even before we start configuring our project, we should know what is Webpack and Babel.

Webpack is a module builder. It should be noted that webpack doesn’t runs during your page load, but it runs during your development.

Look at the below diagram from there website. It is self-explanatory on what webpack does. As shown on site, it takes your “js”, “sass” and other dependencies files and convert them to plain “js”, “css”, “jpg” and “png” files which the browser can understand.

When we create an app with create-react-app, webpack is included in it and because of it in React we are able to use different Components without worrying about the scope. And also our “scss”, “jsx” files getting converted into “css” and “js”.

Image for post
Image for post
Webpack

Babel is a JavaScript compiler that converts edge JavaScript(ES6) into plain old ES5 JavaScript that can run in any browser (even the old ones). In React world it is used to transform the JSX code into vanilla JavaScript. As per the Babel website, Here are the main things Babel can do for you:

  • Transform syntax
  • Polyfill features that are missing in your target environment .
  • Source code transformations (codemods)

A simple example of what Babel does for arrow function.

Below is how a React JSX line gets converted into React createElement. In the first version of React, we used to write the confusing createElement way.

Image for post
Image for post
Babel

Let’s start our configuration now. We will first create a folder webpack-react and cd into it.

Image for post
Image for post
webpack-react

Next, we will do npm init in the terminal, as all react app are basically NodeJS based. It will ask us some question. We can leave blank in most of them by pressing enter. We should give the package name same as folder name and rest are optional, but i had given some of them.

After the last option, you have to type yes.

Image for post
Image for post
npm init

And it will create a package.json in our directory. Now, we need to install some npm packages, before moving forward. The first packages, we are installing are for webpack itself by below command. Notice, that we are installing it as a dev dependency, which means it will not be installed in production.

Image for post
Image for post
webpack

Now, we are going to install a bunch of eslint packages. Eslint is basically a linter, which helps us to write good code and will highlight the error in our code editor, if we are not doing it correct. We are using the eslint of airbnb base, as it have become the de-facto standard and most people use it only.

Image for post
Image for post
eslint

Now, we are going to install a bunch of babel plugins. Babel is very important to convert ES6 into ES5, which is still required in old browsers. And also the jsx react code to createElement react code.

Image for post
Image for post
babel

Now, it’s time to install react and react-dom in our project.

Image for post
Image for post
react

Now, we will open our project in VS Code, we can see all the dev dependencies and dependencies in the package.json file.

Image for post
Image for post
package.json

Now, we need to create a webpack.config.js file in the same directory. This file basically tells, how to bundle the complete project in a simple file.

We will also create public folder and a index.js file in the same directory.

Image for post
Image for post
configuration

So, we will now start to write our webpack configuration in webpack.config.js file. Here, inside module.exports we are first telling the mode as development. After that the entry point of our project, which is index.js.

Next, the output of our project which will me main.js inside the public folder. To get the relative path, we are importing the path at line 1 and also using it within our output object.

We are basically telling, webpack take all the thing that are present in index.js, along with the dependencies that are imported in index.js and produce a file main.js and put it in public folder.

Image for post
Image for post
webpack.config.js

Next, we will first mention that the target is a node application. After that we will put configuration for devServer. Here, we can mention any port for our application to run, then the content is from public folder.

We are also resolving few file extensions, as we need to tell webpack what kind of files it needs to take to produce the final output.

Image for post
Image for post
webpack.config.js

We also need a babel configuration file, before creating some rules in our webpack.config.js file. So, create a file .babelrc in the root directory and the below content in it.

It is a sample babel configuration, which allows us to use configuration of presets and some plugins for the transformation.

Image for post
Image for post
.babelrc

Now, we will write rules for webpack in our webpack.config.js file. So, we will create a module and inside it a rules key, whose value is an array.

We are first telling what kind of file extension, this rule should look for and apply in test, whose value is a regular expression which gives as js or jsx files.

Next, we want our nodule_modules folder to be excluded of these rules, because the creator of every npm package already had applied these rules.

Now, we need to mention the loader which we are going to use. Now, it is the babel-loader in our case.

Image for post
Image for post
webpack.config.js

Now, our webpack.config.js file is complete. Now, let’s again understand what this file does.

We are basically telling webpack, to take index.js from entry. Then check for all file extensions in resolve. After that apply all the rules in module.rules and produce the output and place it in main.js in the public folder.

Now create a file App.js inside a newly created src folder and index.html inside the public folder. Now, our folder structure is looking a lot similar to what create-react-app gives us.

In index.js now we will first import react and react-dom, which are both required in a React project. After that we are also importing the App file.

Now, the code in Line 5, tells take everything in App and render it our in a root element. Notice that we are using document.getElementById from JavaScript DOM.

Image for post
Image for post
index.js

Now, we are going to create this root element in index.html file. First generate the html boilerplate by ! and pressing tab.

After that change the title and create a single div with id of root. Now, we will also create a script which will load main.js file.

We still don’t have the main.js because it will be created by webpack, which will convert all of this complex react code to javascript.

Image for post
Image for post
index.html

Now, we are left with writing the code for App.js file. Here, we are creating a simple functional component, which outputs an h1 Hello Webpack React text.

Image for post
Image for post
App.js

Now, before testing our project, we need some node scripts in our package.json file. The start script tells to run the webpack-dev-server in our current project at port 9500, from the public folder.

The build command tells to build this package in main.js file and it actually run all logic in webpack.config.js file.

Image for post
Image for post
package.json

We will test our first command npm run build in terminal and we are getting an error.

Image for post
Image for post
npm run build

Actually, there is a issue at the time of writing this post with current version of webpack. So, we will go back to the earlier version by changing it in package.json file.

Image for post
Image for post
package.json

Now, to install these new packages, we have to do npm i in the terminal, which installs all the packages from package.json file in our project.

Image for post
Image for post
npm i

Now, our npm run build is a success.

Image for post
Image for post
npm run build

And it’s generate this huge main.js file in our public folder. The file is actually 1019 KB(1 MB) in size. This is our development build.

Image for post
Image for post
main.js

Now, we will see whether our application will run, by giving npm start from terminal.

Giving the command starts our dev server in http://localhost:9500/

Image for post
Image for post
npm start

Now, we will conver this into a production build by changing the mode to production in webpack.config.js file. We have also deleted the main.js file from public folder.

Image for post
Image for post
webpack.config.js

Nw, again run the npm run build command in the terminal to generate a new main.js file.

Image for post
Image for post
build

Now, if we check the size of main.js file it’s only 129 KB and the file is also completely minified.

Image for post
Image for post
main.js

With the optimization from 1019 KB to 129 KB, we might think to use production build always. But, we should use development mode while doing development because the hot reloading is faster in development mode.

This completes our easy way to create a react app. Hope, you guys use it in your next build instead of create-react-app.

The code for the same is in this github repo.

.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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