Sign in

Creating a React Application from scratch (2021)

Preface

1 Getting Started

.
+-- react-app
+-- public
| +-- index.html
+-- src
| +-- App.css
| +-- App.jsx
| +-- index.js
+-- .babelrc
+-- webpack.config.js
npm init -ynpm install -D babel-loader @babel/core @babel/cli @babel/preset-react @babel/preset-env style-loader css-loader webpack webpack-cli webpack-dev-server

2 Babel

2.1 Configure Babel

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

2.2 Validate Babel is working

const text = 'Babel';
console.log(`Hello ${text}`);
"use strict";var text = 'Babel';
console.log("Hello ".concat(text));

3 Webpack: Basic Configuration

3.1 Configure Webpack

const path = require('path');const REGEX_JS = /\.(js|jsx)$/;
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: REGEX_JS,
exclude: /(node_modules)/,
loader: 'babel-loader',
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
}
};

3.2 Validate Webpack is working

4 Adding React to the Mix

npm install react react-dom

4.1 Updating files

<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html --><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Application</title>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script src="../dist/bundle.js"></script>
</body></html>
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
.App {
color: #303C6C;
}
import React from 'react';import './App.css';const App = () => (
<h1 className="App">
React!
</h1>
);
export default App;
const path = require('path');const REGEX_JS = /\.(js|jsx)$/;
const REGEX_CSS = /\.css$/; // LINE ADDED
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: REGEX_JS,
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{ // LINE ADDED
test: REGEX_CSS, // LINE ADDED
use: ['style-loader', 'css-loader'], // LINE ADDED
} // LINE ADDED
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
},
resolve: { // LINE ADDED
extensions: ['.js', '.jsx', '.css'] // LINE ADDED
} // LINE ADDED
};

4.2 Adding a Development Server with Webpack

const path = require('path');const REGEX_JS = /\.(js|jsx)$/;
const REGEX_CSS = /\.css$/;
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: REGEX_JS,
exclude: /(node_modules)/,
loader: 'babel-loader',
},
{
test: REGEX_CSS,
use: ['style-loader', 'css-loader'],
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
}
devServer: { // LINE ADDED
open: 'Google Chrome', // LINE ADDED
contentBase: path.join(__dirname, 'public/'), // LINE ADDED
port: 3000, // LINE ADDED
publicPath: 'http://localhost:3000/dist/' // LINE ADDED
} // LINE ADDED
};
"scripts": {
"start:dev": "webpack serve"
}

4.3 Hot Module Replacement

npm install react-hot-loader @hot-loader/react-dom
module.exports = {
// ...
resolve: {
alias: { // LINE ADDED
'react-dom': '@hot-loader/react-dom', // LINE ADDED
}, // LINE ADDED
extensions: ['.js', '.jsx', '.css']
},
devServer: {
open: 'Google Chrome',
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hot: true // LINE ADDED
}
};
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["react-hot-loader/babel"] // LINE ADDED
}
import { hot } from 'react-hot-loader/root';       // LINE ADDED
import React from 'react';
import './App.css';const App = () => (
<h1 className="App">
React!
</h1>
);
export default hot(App); // LINE ADDED

Hi, my name is Jeremiah. I build things on the web for fun. I enjoy figuring how and why things work the way they do, and I try teaching others along the way.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store