DEV Community

Cover image for handmade react
Peter Vivo
Peter Vivo

Posted on

handmade react

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

./src/index.js - any code

window.onload = () => document.body.innerHTML="foo js app";
Enter fullscreen mode Exit fullscreen mode

final touch: start your development

yarn parcel './src/index.html';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

Start development same way as HTML

yarn parcel './src/index.html';
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

add style

./src/dark-green.scss

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

You can insert style into js code

./src/index.js

import 'dark-green.scss';
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

result ::

{
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

Insert starting point helper:

  "scripts": {
    "start": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html",
  },
Enter fullscreen mode Exit fullscreen mode

then you be fine:

yarn start
Enter fullscreen mode Exit fullscreen mode

Thanks for reading!
photo: Robert Bye - unsplash

Top comments (0)