There are several ways of starting a React App, the most popular and easy being create-react-app, and Gatsby for static pages. These tools let you build a React application with no extra configuration, but at a cost:

Usually you wouldn't know what is happening behind the scenes.

And if you want a more fledged application you will need to tweak almost every part of the configuration.

The I'm more of a code type of person

The github repo

Start Simple

In this tutorial I assume you have basic knowledge of JavaScript, bash commands, git, node and npm/yarn installed. I will use yarn for all the examples, but you could change them for npm commands.

Let's start with a simple configuration, including only the React package, Babel for transformations and Webpack to handle the bundle.

To get started let's create a new directory for your React Application and move in:

mkdir react-from-scratch && cd $\_

Initialize your project and create a minimal folder structure, use the -y option in yarn to skip the init questions:

yarn init -y

git init

Install dependencies

With the next commands you will install the dependencies and the development-only dependencies needed to start developing your React app:

yarn add react react-dom

yarn add -D @babel/{core,preset-{env,react}} babel-loader webpack{,-cli,-dev-server} html-webpack-plugin

In the above command we are using brace expansion as shortcut to install npm packages with similar names at once, the same as:

yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin

With React, we will use modern ECMAScript features that older browsers don't understand, that's why we need to transform our code. This transformation is "transpilling" and it's executed through a webpack loader. A webpack loader is a translator so webpack can understand what type of code you're using e.g: ECMAScript, css, html, etc.

Each package serves a purpose:

react: Well, you know what React is. (Do you?)
react-dom: For rendering React components into the DOM
webpack: It's the bundler, that packages our code for production use
webpack-dev-server: It's a simple web server that provides us live reloading
html-webpack-plugin: Simplifies creating and using HTML files to serve our webpack bundles in the browser
@babel/core: The main package used to convert ECMAScript 2015+ into backwards compatible code
@babel-preset-env: A predefined configuration for converting modern JavaScript into more compatible code
@babel-preset-react: Configuration and plugins for transforming JSX and other React-specific code to JavaScript
babel-loader: The translator webpack will use to bundle our code

Setup your files

First we will need "support" files, or configuration files. The ones that will let our application know what it is and how it needs to be interpreted.

First our babel configuration file (.babelrc):

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

We include our earlier installed presets to let know babel what we want it to do with our code. We are telling babel: "I will write some JavaScript from the future and some React components. And I want you to transform it to a backwards compatible version of JavaScript. Thank You"

You need an HTML index file to load the JavaScript on the browser (index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React From Scratch</title>
  </head>
  <body>
    <!-- Prompt a message in the browser if users disabled JS -->
    <noscript>Your browser does not support JavaScript!</noscript>
    <div id="root"></div>
  </body>
</html>

This will provide an entry point for webpack, to attach our main JavaScript bundle to the DOM.

Next we will write (or copy/paste) our webpack config file (webpack.config.js):

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
}

The minimal configuration we need to transform our React app. Here we are telling webpack to pipe every file with the .js or .jsx extension through the babel-loader translator. And pointing to the main html file we want to use as a template.

You can know more of webpack on their documentation.

You need a React entry file, you will call this index.js (src/index.js):

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => <div>Hello there!!</div>

ReactDOM.render(<App />, document.getElementById('root'))

This is the entry point of your application, the root. From here you will be calling the rest of the code necessary for you app. And must be inside your src folder.

And we will need to add a few scripts to our package.json file:

{
  ...
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  }
  ...
}

Then you can run yarn start to start the development server and see the changes on your browser. This should open a tab on your default browser, if not, go to http://localhost:8080 to see your application.

When you want to build a production package you run yarn build. And you can see you final static assets on the dist folder.

With this you have the basic configuration to start developing you app. But one of the main benefits of starting a React project from scratch is that you can expand your configuration to increase its features.

In the next post I'll explain how to add tried methods for a more professional application, including:

Advanced Composing Configuration
Tree Shaking
Minification and Optimization
Source Mapping
Linting and Prettifying
Import Aliases
Environment Variables
Bundle Analyzing
Hot Module Replacement
Code Splitting
Lazy Loading
Basic Routing
CSS in JS
Assets loading

Share this on Twitter

Blog

React App From Scratch

Mark Hkr 😎

The I'm more of a code type of person

Start Simple

Install dependencies

Setup your files

Join Our Newsletter. No Spam, Only the good stuff.

Related