Riddhi Agrawal

Posted on Aug 13, 2021 • Edited on Aug 16, 2021

Create React App without create-react-app !

#javascript #react #webdev #tutorial

The simplest way to create a basic react app is to run npx create-react-app and boom your basic react app will be created but have you ever wondered, can I do that whole process on my own? Well yes, you can.

Pre-requisites: Node js and Vs code. That’s all you need.

Let’s do it ..!!!

1. Open your vs code terminal and run the below commands:

npm init -y

By running this command package.json will be formed which holds important information which is required before publishing to NPM, and also defines attributes of a project that is used by npm to install dependencies, run scripts, and identify the entry point of the project.

npm install react react-dom

React will be needed to create user interfaces whereas React-Dom is a glue between React and browser DOM.

After running this command, node_modules and package.lock.json will be created. Node modules hold all the dependencies downloaded from npm. Package.lock.json keeps track of the exact version of every package that is installed as well as the dependency tree of every package.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Babel is a JS Compiler that converts modern JS code into vanilla Js code that can be supported in older browsers and environments. Babel-loader transpile JS files using Babel and webpack.
For further reading visit https://babeljs.io/docs/en/

2.Create a file .babelrc and copy the code below

{  
 "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
            ]
}

This file is a configuration file for babel whereas presets act as a shareable set of Babel plugins and/or config options.

npm install --save-dev webpack webpack-cli webpack-dev-server

Webpack is a tool that lets you compile JavaScript modules, also known as module bundlers.Given a large number of files, it generates a single file (or a few files) that run your app. Webpack-CLI provides the interface of options webpack uses in its configuration file.

npm install --save-dev html-webpack-plugin style-loader css-loader file-loader

All these are loaders that help in bundling various files along with webpack.

3.Create a file webpack.config.js and copy the code below

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      }, 
    ],
  },
};

This config file provides all the required information like an entry point,bundle output filename and path , plugins and various loaders that are being used for webpack to bundle and resolve various kinds of files.
For further reading visit: https://webpack.js.org/concepts/

4.Create a folder “src” and inside that create a file “App.js”

import React from "react";

const App = () => ( 
    <div>
        <h1>Hello React</h1>
    </div>
);

export default App;

This is a basic arrow function that returns Hello React wrapped inside an h1 tag.

5.Create a file “index.js” that will be the entry point of our code.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App/>,document.querySelector("#root"));

6.Create another file “index.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</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

In our configuration, we specified that it should read ./src/index.HTML as a template. We have also set the inject option to true. With that option, Html-webpack-plugin adds a script with the path provided by Webpack right into the final HTML page. This final page is the one you get in dist/index.html after running npm run build, and the one that gets served from / when you run npm start.

7.In your package.json write the following lines of code in place of the script tag

"scripts": {
    "start": "webpack serve  --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  }

You can start your react app by writing npm start and you will see a blank page with Hello React written on it.

And you are done ..!!

Now you can customize your React app and add various components to it .

Though it was quite a long process and that’s what create-react-app makes it easier for you. It automates this whole hefty process of making every single file by replacing it with just a single command npx create-react-app filename.

Top comments (42)

Michael Currin • Aug 15 '21

For those criticizing the article for not using create app and therefore being slower and less secure.

I think this article is ideal for beginners. It's overwhelming seeing files and how they fit together if you never used React before. And it's easy to forget something if it was generated for you.

I like the explanations going through the set up incrementally and also one will remember things better having actually typed them up or pasted them in a manually created file.

I also like the use of webpack so if you know webpack this is familiar instead of using create React app in script commands.

And when you need to make your second React app to be faster or more secure, then one of always use the creact React app CLI to set up a new project.

Oh also this article uses the latest version of all the packages so security is taken care of there.

Michael Currin • Aug 15 '21

For my projects I like to have a template built around create React app output. Which already has docs and even CI to deploy to GitHub Pages.

Plus it has a bunch of sample components

MichaelCurrin / react-quickstart

Starter template for a React app - including docs, CI, and hosting ⚛ 📦

React Quickstart ⚛️ 📦

Starter template for a React app - including docs, CI, and hosting

Preview

How to create a new React app

Use this project as a template

Documentation

To install, run and deploy the app, see this project's docs:

To learn how to use this project and see how a React project works, see the Template notes section of the docs.

License

Released under MIT by @MichaelCurrin.

This project is based on the template from the React CLI. I have added my own docs, the deploy flow and made very minor changes to the app.

View on GitHub

Oh and if you are curious on how to build and host with no Node, I have this.

MichaelCurrin / react-frontend-quickstart

Starter template using React on a website's frontend - without Node

React Frontend Quickstart ⚛️ 📦

Starter template using React on a website's frontend - without Node

Preview

Documentation

License

Released under MIT by @MichaelCurrin.

View on GitHub

Steve Sobol • Jan 27 '22

I don't like create-react-app. It creates a bloated mess, installs stuff I never use, and fails to install other stuff I always use.

I'm actually using this tutorial to build a template I'm going to push to a private npm repository. It'll save me quite a bit of time once I have everything set up.

Riddhi Agrawal • Aug 16 '21

Thanks for the appreciation and explaining the things really nicely ..!!

Abhishek Raj • Aug 13 '21

Nice article. Would love to see creating react app with vite.

Riddhi Agrawal • Aug 13 '21

Thanks for the appreciation . Will surely write a post on creating react app with vite .

Sattwik Sahu • Aug 13 '21

If you are gonna write something on Vite, please also include information on how to make a PWA in Vite and deploy it. I've tried making it, but it doesn't work in deployment

Riddhi Agrawal • Aug 15 '21

I will make sure to include your point on the article with vite ..!!

Thanks for reading the article and sharing your views ..!

Max Programming • Aug 14 '21

Great! I would also recommend checking out Vite for React apps! It's very very much faster than Webpack!

npm init vite

Riddhi Agrawal • Aug 15 '21

I will explore more on vite and will bring articles on that too.

Thanks for reading the article and sharing your views ..!

Alexander Halemba • Aug 13 '21

I really like webpack, and your how-to is nicely focused on the minimal you need. Thanks for that

But to build a very simple SPA with react, I normally use parcel.

Riddhi Agrawal • Aug 13 '21

Thanks for the appreciation . Will also try to explore more on parcel too .

WebDevZTH • Aug 14 '21

I like the article, very clean and to the point. Lean plugins and setup. Although I am wondering will this support HMR (hot module replacement or Fast refresh) with this configuration? Cheers. If not, can you share how to add that functionality. ^_^

Riddhi Agrawal • Aug 15 '21

As for now this doesn't support HMR + Fast Refresh but you can enable that in webpack with some configurations .
You can check this article to enable HMR + Fast Refresh in webpack : dev.to/workingeeks/speeding-up-you...

Thanks for reading the article and sharing your views ..!

Salman Shaikh • Aug 18 '21 • Edited

Great tutorial, it gives us somewhat understanding how react works under the hood, but don't you think for beginners parcel.js would be a better way to start instead of webpack because parcel is way more easy to understand than webpack.

ivan886 • Sep 26 '21

hola buen día Agradezco el articulo esta genial. Actualmente tengo dos proyectos uno creado desde cero utilizando webpack y el otro con create-react-app, que ventajas existe al realizar todo desde adicional al aprendizaje?

Jack • Aug 18 '21

CRA is faster and easier for sure but I still prefer to scaffold my apps manually.

I've worked with devs who had absolutely no clue what to do when hit with babel or webpack issues, because CRA hides all of that detail away.

I feel like a basic understanding of build tools is pretty important for a frontend developer. If you don't at the very least roughly understand what's going on under the hood then you're basically just working with magic...