DEV Community

Cover image for How to set up React.js app from scratch without using create-react-app?
Theena Dayalan
Theena Dayalan

Posted on • Updated on

How to set up React.js app from scratch without using create-react-app?

Originally posted here

After dwelling in Ember.js for almost two years I have tried React.js. As every developer do, I started surfing on the internet to create my Hello World app using React.js.

Initially, I found create-react-app which is pretty much useful for creating React.js in lightning-fast speed. I really enjoyed create-react-app since it had all the setup that we usually need in JS framework, starting from development server to test setup.

After using it for a while I felt that it lacks customization. create-react-app uses Webpack behind the screen to build the application. Webpack is a widely used javascript bundler which has a large ecosystem that supports plenty of plugins. But create-react-app doesn't allow us to explore those plugins.

So I arrived at the conclusion that I need to move out of create-react-app to utilize the full power of webpack with React.js. I started writing my own webpack configuration to release the full power of webpack.

Here I'm writing how I used webpack to build my react application to help the developers like me.

Prerequisite

  • Node.js must be installed on your computer. I hope you guys are familiar with yarn. Also, yarn is installed globally.
  • Create an empty project and create a package.json file.

Installation

Install the following packages.

Setup React.js

yarn add react and react-dom
Enter fullscreen mode Exit fullscreen mode

react - React.js library.

react-dom - This package serves as the entry point to the DOM and server renderers for React.

Setup webpack

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin
Enter fullscreen mode Exit fullscreen mode

webpack - Webpack is a bundler for modules.

webpack-cli - Command Line interface for webpack.

webpack-dev-server - Development server that provides live reloading.

html-webpack-plugin - The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles.

Setup Babel

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader
Enter fullscreen mode Exit fullscreen mode

@babel/core - Mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript.

@babel/preset-env - @babel/preset-env allows you to use the latest JavaScript.

@babel/preset-react - This package is a set of plugins used to support React.js specific features.

babel-loader - This package allows transpiling JavaScript files using Babel and webpack.

Configuration

We have installed all the required packages to create a React.js application using webpack. Next we need an index.html template where we need to insert the react constructed dom. Create an HTML file inside src/ folder.

src/index.html

  <html>
    <head>
      <title>Setup React Application From Scratch</title>
    </head>
    <body>
      <!-- We will insert the dom here -->
      <div id="react-app">

      </div>
    </body>
  </html>
Enter fullscreen mode Exit fullscreen mode

Also, we need a starting point to create react application. Create a js file index src/ folder.

src/index.js

  import React from 'react';
  import { render } from 'react-dom';

  const rootElement = document.getElementById('react-app');

  render(<div> Hello World! </div>, rootElement);
Enter fullscreen mode Exit fullscreen mode

Configure webpack to serve live development server

webpack.config.js

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

  module.exports = {
    entry: path.resolve(__dirname, 'src/index'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: ['babel-loader']
      }]
    },
    devServer: {
      contentBase:  path.resolve(__dirname, 'dist'),
      port: 9000
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "src/index.html" //source html
      })
    ]
  };
Enter fullscreen mode Exit fullscreen mode

Babel Configurations

.babelrc

{
  "presets" : [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
Enter fullscreen mode Exit fullscreen mode

We have reached to the finishing line. Oh wait! there is one more thing to be done. Add the webpack scripts to package.json file.

package.json

{
  "name": "react-setup-from-scratch",
  "scripts": {
    "serve": "webpack-dev-server --mode development",
    "build": "webpack --mode production",
  }
}
Enter fullscreen mode Exit fullscreen mode

That's all! It's show time. Let's start the development server.

  yarn serve
Enter fullscreen mode Exit fullscreen mode

Voila!!! We are done. Let's see the output.

Development Server

Fully completed code can be found here.

I hope this post is useful in someway for the beginners ❤️.

Discussion (3)

Collapse
luansantosti profile image
Luan Santos

Very useful, thanks!

Collapse
theenadayalan profile image
Theena Dayalan Author

I'm glad that it was useful to you! :)

Collapse
ramu profile image
Ramu

Thanks. Such a useful article for react developers