React from Scratch

Learn how React works by building it without the create-react-app framework.

For React to work properly, you will need three things:

The easiest way to do this is with create-react-app. But if you want to know how it works:

Get all your parts

Make your webpack config and babel config

In the root folder, create a webpack.config.js file that pulls in the node path module. This is where you will be putting your entry and output points in your webpack builders. (TA: Search 'webpack configuration' and you should be reminded of all the things you need.)

const path = require('path');

module.exports = {
  entry: '.src/app.js',     // which file your app will be pulling the data from for it's dependency graph
  output: {
    filename: 'bundle.js',  // the name of the file it will output the bundle to
    path: path.join(__dirname, 'public'),  // the output folder fo your bundles
  module: {  // determines which loader to use
    rules: [{
      loader: 'babel-loader',
      test: /\.jsx?$/,            // transform js files
      exclude: /node_modules/,  // but not node_modules
  devServer: {
    contentBase: path.join(__dirname, 'public'), // where to serve from when running the webpack dev server

In the root folder, create a file called babel.config.json. (TA: Search for 'babel config' and you should be able to find everything you need.)

  "presets": [

babel-loader will try to find the babel configuration file —this babel.config.json. The code in this file instructs babel-loader to use @babel/preset-env and @babel/preset-react presets that we have installed earlier when transpiling our code.

Add scripts in package.json for running webpack

"scripts": {
  "build": "webpack",
  "start": "webpack serve", 
  "watch": "webpack --watch"

Create your documents

In public, make the html page you will inject into. This needs to have the injection point as well as the webpack bundle.

<!doctype html>
    <div id="root"></div>
    <script src="bundle.js"></script>

In src, create the React JS page that will inject your app into the root div.

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

const App = () => {
  return (
      <h1>Wow! This is some stuff.</h1>

  <App />, 

Test it out by running npm run start and checking it in a browser.


Incoming Links

Last modified: 202212070107