Frontend template

This project uses just HTML, CSS, and JS. All are statically hosted on GitHub Pages. No need for Node to manage packages or run a build step.

MichaelCurrin / react-frontend-quickstart

Starter template using React on a website's frontend - without Node

React Frontend Quickstart ⚛️ 📦

Starter template using React on a website's frontend - without Node

Preview

Documentation

License

Released under MIT by @MichaelCurrin.

View on GitHub

Imports

Imports are done by URL, using the ES Modules approach.

e.g. main.js

import React from "https://dev.jspm.io/react@17.0";
import ReactDOM from "https://dev.jspm.io/react-dom@17.0";

The browser will run the JS file and see that it needs React and then fetch React from CDN URL and then use it.

You get to load React directly in your JS script, by URL. Without having to manage dependencies as script tags in HTML or having to manage a package.json file.

Start dev server

This is no npm command to run here.

Simply start a static HTTP server in the repo root, using your preferred options. See my Start a dev server guide for a few ideas.

If you use VS Code, then the Live Server extension works great.

Who should use this template?

This Frontend template is great for someone who has never used Node before but wants to get the benefit of React.

Even if you already use Node regularly, I would still recommend you have a look at the template's code and site,

Since when you understand how to run React without Node, you'll understand the purpose and benefits of Node. As well as the downsides - such as requiring the use of Node locally and in a build step, environment and compatibility issues, and requiring a strict structure of a Node app (which makes it hard to add React to an existing project that doesn't use Node).