Creating a React App is a very difficult feat, even when you are an experienced developer. That led to the development of create-react-app
, a Command Line Tool to streamline the process of creating a React app.
Using create-react-app
comes with several added benefits such as rapid prototyping and making the development of React Apps accessible to beginners, but there are some disadvantages as well.
Since create-react-app
aims to generate more or less an all-purpose app, leading to a lot of additional not-so-necessary dependencies for any given niche case. Another con for using create-react-app
is customizing it might be a pain at times.
So let's dive into how to create your React Apps from scratch that allow you to customize the app to your heart's content
Step 0: Installing Node
This goes without saying, you need Node.js and npm or yarn (in this article I would be using npm). To test if you have them installed, run the following commands:
node -v
npm -v
In case you don't have them installed, I trust you with being able to install them, so I am moving on to the next step.
1. Initializing the project
Create a new folder and navigate into it. To initialize a node project use:
npm init
or if you are lazy like me, use:
npm init -y
and modify the generated package.json
.
2. Installing dependencies
Now we would be adding the necessary Dependencies to our project.
1. React Dependencies
These are the only dependencies that are NOT dev dependencies
npm install react react-dom
Let's take a look at the libraries:
react
: library we'll be working with.
react-dom
: package to manage DOM elements.
2. Webpack Dependencies
Webpack is the most popular bundler in the world of Node.js. It bundles and even minifies the JavaScript files in the project.
npm install -save-dev webpack webpack-cli
Taking a look at the libraries:
webpack
: the bundler.
webpack-cli
: CLI for Webpack.
3. Webpack Loaders
Webpack needs loaders to preprocess files. They allow the user customize Webpack to bundle static resources beyond JavaScript.
npm install --save-dev babel-loader
For now, let's start with the absolutely necessary babel-loader
(loader for Babel) and later add additional functionality based on need.
4. Babel Dependencies
Babel is a JavaScript compiler that converts (or rather transpiles) JavaScript ES6 to targeted version of JavaScript since not all browsers support ECMAScript 6 features. We would be using it to transpile the JSX code in our project to regular JavaScript that browsers can understand.
npm install --save-dev @babel/core @babel/preset-react
The dependencies:
@babel/core
: Babel compiler core.
@babel/preset-react
: package with a set of plugins used to support React features.
Phew! We are finally done with the dependencies!
3. Configuring Babel
To configure Babel, we need to add .babelrc
in the root level of our project
{
"presets": [
"@babel/preset-react"
]
}
4. Configuring Webpack
Now its time to configure Webpack. Add the webpack.config.js
at the root level of the project and add the following code:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve("dist"),
publicPath: "/",
},
module: {
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader"
},
],
},
}
And let’s see what all of this is doing:
-
entry
: The entry point for our application. In React, this is the file where we use our renderer. -
mode
: The mode in which the application is being run (development or production). -
output
: Informing Webpack where to put our bundled code and the name of the file. -
module
: Informing Webpack how and when to use the loaders we installed. We’re using regex to tell each loader which file extensions to target.
5. HTML Body
Add an /public/index.html
and the basic body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React From Scratch</title>
</head>
<body>
<div id="root"></div>
<!-- The bundle-name should be same as you defined in webpack config file -->
<script src="../dist/bundle.js"></script>
</body>
</html>
6. Creating the React App
Finally, we now start working on our app. Add /src/index.js
(the entry point for the app mentioned in webpack.config.js
)
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"
ReactDOM.render(
<App />,
document.querySelector("#root")
);
and the App file /src/App.js
import React from "react";
export default function App() {
return (
<div>
<h1>React from Scratch</h1>
</div>
);
}
7. Adding Scripts
We are done making the app, but how do we run it?
Glad you asked. we need to add 2 scripts for ease of use:
"scripts": {
"build": "webpack --mode production",
"start": "webpack --mode development"
}
Now you can use npm run build
or npm run start
to bundle the React App and run the app from /public/index.html
.
Conclusion
Now you too know how to Create an absolute basic React App from Scratch. YAY!
You can extend the functionality with additional plugins and loaders such as installing style-loader
& css-loader
and adding:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
in your webpack.config.js
, you can implement CSS support in your React App
You can add webpack-dev-server
to serve the website instead of opening the HTML file (and potentially more optimized start
script), use HotModuleReplacementPlugin
to enable Hot Reload and much more. The possibilities are endless. Now you can create React Apps that cater to your individual requirements.
All the best in your React Development journey! :)
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Want to work together? Contact me on Upwork
Want to see what I am working on? Check out my GitHub
I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram
Follow my blogs for weekly new tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.Would you like to collaborate on our site?
As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.
Connect to me on
Top comments (15)
Want to collab..
I have a team
I'm sorry, but I am too busy for any collaboration. Best of luck for your endeavour though!
Okay then..
But it would be a great help if you answer my question:-
Do you have any web dev who is ready for a collaboration?
I don't think so, most of my friends are busy with placements
Okay
Thank you for sharing this excellent guide of creating react app from scratch by discussing the technical aspects of react native mobile app development, which I have rarely seen in other artciles, you talked an efficient way of building a react app from scratch, I wanted to know your view on recently published article on app development from scratch that I read recently, click here.
Once you read the entire article, could you please share your opinion, or it is a good way to kickstart mobile app development process?
Thanks again for sharing this stuff about react native...
The article is on React Web Apps. I don't know React Native myself 😐
Great bro... Congratulation
Thankyou :)
Great blog post. Lot's of good info. Thanks!
Glad you found it helpful :)
Why would you want to do this ? It takes huge amount of time while you still have other things to figure out during development unless you are making Todo list app
If you are making a simple app, then using this would definitely be a waste of time. But if you are making an enterprise level application, you would have to consider each and every niche cases and tailor the app to your needs to squeeze out every drop of performance. In such cases using
create-react-app
would be a disasterYou can create template repo on github, it will save lot of time.
Good point. There are quite a few templates available on GitHub to create React applications