DEV Community

loading...
Cover image for React templates - Frontend only

React templates - Frontend only

Michael
I'm a self-taught dev focused on websites and Python development. My friends call me the "Data Genie". When I get bored, I find tech to read about, write about and build things with.
・2 min read

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.

GitHub logo 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

GitHub tag License

dependency - react Hosted with GH Pages

Preview


View site - GH Pages

Use this template

Documentation

View - Documentation

License

Released under MIT by @MichaelCurrin.




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

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).

Discussion (0)