Peter Vivo

Posted on Aug 4, 2020

handmade react

#react #bundler #javascript #html

In my mind react is a simple glue for create basic or complex application. The reactive state handling philosophy give power of really fast development, plus I can use any modern js solution, like arrow function, decoupling, rest operator, or even my favourite proposal pipeline operator. But this article speak about handmade build system for react or even plain static HTML page.

1) Instant save

The crazy old development method is create local webserver and save your files, refresh the browser.

// pro
 - immediately result
 - true handmade way, you control everything
 - free from node_modules blackhole
// const
 - each 'build' need a restart
 - endless challenge: 'you vs. browsers'
 - hard to handle outer dependencies
 - straight to spaghetti code

CLI is your friend, so this is the most basic development method: (under windows gitbash)

mkdir foo
cd foo
serve ./
# another terminal:
nano index.html

2) Don't fight with build system: development online

This way is great for learning any programming languages without know the selected language build system, for example: rust playground

// pro
 - zero start time
 - learn any programming languages
 - share you example
 - take look, try, fork other developers 'solutions'
// const
 - your code is public
 - mandatory use online IDE
 - hard to debug
 - different asset handling
 - don't fine for product ready code

3.1) Handmade :: parcel

Why I call this method handmade? Because this one is easy to learn from scratch. Just one line need to know for HTML/javascript:

yarn add -D parcel-bundler

write our codes after create src folder:

./src/index.html

<!DOCTYPE>
<html>
  <head><title>foo js app</title></head>
  <body>
   <script src="./index.js"></script>
  </body>
</html>

./src/index.js - any code

window.onload = () => document.body.innerHTML="foo js app";

final touch: start your development

yarn parcel './src/index.html';

At this moment check your result: localhost:1234. When you edit your code, that is instant rebuilding and browser refreshing.

3.2) add Framework :: React

One step further you can add react (or any other framework)

yarn add react react-dom

write some react code

./src/index.js

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

const title = 'Foo application';

render(
  <pre>{title}<br/>{'-'.repeat(title.length)}</pre>
  , document.getElementById('foo')
);

Start development same way as HTML

yarn parcel './src/index.html';

At this moment you can handle your own building setup without too much worry. Of course you have few todo left to product ready program into some repo, but that is another post.

// pro
 - easy to use development setup
 - IDE independent
 - hot reload
 - blazing fast
 - work with plain HTML, react or any framework
 - automatic dependency install: css, scss, typescript, 
   glsl and much more without config.
// const
 - slightly hard to output PWA vs rollup or webpack
 - complex company build system choice: configurable bundlers

add style

./src/dark-green.scss

body, html {
  background: black;
}
pre {
  color: rgb(47, 160, 47);
  font-size: 1.2em;
}

You can insert style into js code

./src/index.js

import 'dark-green.scss';

This moment parcel bundler working to add dependency for scss

What going behind the scene?

Improve our react program, show our code:

import React, {useState, useEffect} from 'react';
import {render} from 'react-dom';
import './dark-green.scss';

const FooApp = () => {
  const [myCode, readCode] = useState('');

  useEffect(() => {
    fetch('')
      .then( result => result.text() )
      .then( readCode )
  }, []);

  return <pre>{myCode}</pre>;
}

render(<FooApp />, document.getElementById('foo'));

result ::

<!DOCTYPE html>
<head>
  <title>foo< app/title>
</title><link rel="stylesheet" href="/src.e31bb0bc.css"></head>
<body>
  <div id="foo"></div>
  <script src="/src.e31bb0bc.js"></script>
</body>

Generated code in :: src.e31bb0bc.js, few line later:

const readText = result => result.text();

const FooApp = () => {
  const [codeOfIndexJs, readCode] = useState('');

  useEffect(() => {
    fetch('')
      .then( readText )
      .then( txt =>  txt.match(/src="(.*)"/)[1] )
      .then( script => fetch(script) )
      .then( readText )
      .then( readCode )
  }, []);

  return <pre>{codeOfIndexJs}</pre>;
}

get the result. Don't afraid that is only development time generated code, if you would like see the minified builded one, then run build:

yarn parcel build ./src/index.html
serve ./dist

3.3) preparing TODO, touch the package.json

Before use yarn won't forget install node.js and yarn. Create project directory.

time to insert few script to package.json

cat package.json