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/preset-env",
    "@babel/preset-react"
  ]
}

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>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

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 (
    <div>
      <h1>Wow! This is some stuff.</h1>
    </div>
  )
}

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

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

References

  1. https://medium.com/swlh/back-to-basics-how-to-set-up-a-react-app-from-scratch-2020-134908e17490

Last modified: 202107081809