React Build Tools

Creating your own React App

What is React

React is an open-source front-end Javascript library that is used to build user interfaces for browsers and mobile apps. Once you have the node modules installed, the easiest way to create a React app is with the create-react-app toolchain. Once called, it sets up an environment where you can utilize React and all of its tools without worrying about anything that went into making it. This abstracts everything about Babel and Webpack from you, which is great because it’s less to worry about, but you should still know what’s going on under the hood. Along with the abstraction, any configurations you’d like to add in the future become difficult because of the preset ones.

Setting up your own React app

Creating your own react app is easy, gives you an insight into what a React app does under the hood, and lets you configure it to your preferences. For starters, you’ll need to create a new directory and cd into it

mkdir react-without-cra

cd react-without-cra

Once inside the new directory, you must run npm init in the terminal, this will initialize a project and create a package.json file. This is basically the central part of any Node project and React is Node-based, so this is a must. We can enter blank values, so just press enter 7 times and then type yes to fully install the package

npm init

Now we’ll be installing some dependencies. Webpack is the first. Webpack is a module bundler that is going to bundle all the code we write and serve it to the browser as one big file.

npm i — save-dev webpack webpack-cli webpack-dev-server

The next is Babel. The code we’re writing this in is ES6, and this is fine, but some older browsers still use ES5. Babel is what is converting all of our code into code that almost all browsers can understand.

npm i — save-dev babel-loader @babel/preset-env @babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/runtime

And now, we’ll just be installing React and React-dom. Since this is still a React project we’ll be needing them.

npm i react react-dom

If you click on your package.json file this is what it should now look like:

Configuring your React App

Great! You should now have everything you need to start configuring this new React app. There are a ton of ways that we can configure our app at this point, but to keep it simple, we’re going to go with some easy configuration values. Before moving on, you’ll want to make a webpack.congif.js file, an index.js file, and a public folder all in your root directory. Your folder structure should look something this:

Once your file structure matches the one above, it’s time you can open your webpack.config.js file. This is where all code bundling configurations will go. First, we require our path. This allows us to work with directories and different file paths.

Now, for our module.exports. This is where most of our configurations will go. It’s basically telling Node how to run and what to do when it is run. A lot goes into this part, so I won’t explain everything, but you can look to the comments in the code for an explanation of each part.

Next, we will be creating a .babelrc file in our root directory. There are things in the webpack.config.js file that depend on the things here. The contents of this file will allow us to use configuration presets and plugins for the transformation of ES6 to ES5

Going back to our wedpack.config.js file now, we need to add rules like what type of files to look for, what files to ignore, and which loader we’re using. For this, we’ll be looking for all files that end in js or jsx, ignoring our node_modules, and use babel-loader for the babel configurations we wrote right before this.

Woo! Our configurations are now complete. You’re doing great. Next, inside of the public folder we made, make an index.html file, a folder named src, and lastly, make an App.js file inside of the src folder.

Inside index.js, we can start importing everything we’re going to need. This will be React, ReactDOM, and the App.js file we made. We then use ReactDOM.render to render our App component onto our DOM.

Going back into our index.html file, we set up all our HTML elements, which includes where we’re connecting our component to and the file that will be made once we run our build command.

If you haven’t noticed yet, this is looking much more like an app that was created with the create-react-app toolchain. I promise we’re almost done. Back into our App.js, we create the component that will be rendered on the DOM.

Everything is almost set up, Now, we just need to make our start and build scripts in package.json so that we can actually bring this project to life.

Building and Starting your React App

Great, now we can use the command npm run build. This will make a main.js file in our public folder. This will be our entire development build.

Finally, once this build is successful, we can run npm start to start our application, and if everything is correct, an application should open on localhost:3000 with our component being shown.

It worked! It would’ve been pretty embarrassing if it didn’t. Lastly, all we need to do is change our mode value in our webpack.config.js file to production and delete our main.js file. Now, next time we run npm run build, a new main.js will be created, but now it is a minified version of its original.

After running the npm run build command again, you can use the npm start command and it’ll work all the same. Creating your own React app may take a little time, but you’re walking away with so much more knowledge about how React functions. You now understand what Babel and Webpack do and even how to set up configurations for your next project. It seems like a lot, but don’t worry. There are tons of tutorials on how to do all this and I encourage you to find all the other configurations to better suit your project needs. If you need something fast, then maybe you’d go towards using create-react-app, But, if you want a firmer grasp on React itself, then making your own from scratch could be fun!