DEV Community

Cover image for React templates - Node
Michael Currin
Michael Currin

Posted on • Edited on

React templates - Node

Node template

The classic approach with Node.

GitHub logo MichaelCurrin / react-quickstart

Starter template for a React app - including docs, CI, and hosting ⚛ 📦

React Quickstart ⚛️ 📦

Starter template for a React app - including docs, CI, and hosting

GH Pages Deploy GitHub tag License

Made with Node Made with Yarn Made with React

Preview

Create a new React app

Use this project as a template:

Use this template

If you need something more minimal, see this Minimal app recipe.

Documentation

To install, run and deploy the app, see this project's docs:

Docs

To learn how to use this project and see how a React project works, see the Template notes section of the docs.

License

Released under MIT by @MichaelCurrin.

This project is based on the template from the React CLI. I have added my own docs, the deploy flow, made minor changes to the app, plus some additions to components.




Imports

You'll see imports are done like this:

import React from 'react';
import ReactDOM from 'react-dom';
Enter fullscreen mode Exit fullscreen mode

That requires dependencies like react to be specified in package.json and installed using:

$ npm install
Enter fullscreen mode Exit fullscreen mode

Start dev server

As per the Usage doc in the docs directory, use one of:

$ yarn start

$ npm start
Enter fullscreen mode Exit fullscreen mode

CI

This templates uses Node to build a React app.

The project is configured to use GitHub Actions, so that when a commit is made to the main branch then some NPM commands run to build the app and output static files. These files are committed to the gh-pages branch so they can be served with GitHub Pages. At that point, Node is no longer needed. At least until the next commit triggers a build and deploy.

For more info, see the Actions tab on the repo for a history or workflow runs. Also see the .github/workflows directory where a GH Actions workflow config file exists.

Who should use this template?

This Node project is good for beginners in JavaScript who have little experience in React or Node and want to learn more.

Or, maybe you make a lot of React projects already but want to standardize your process. Or you want to add some docs and CI to your project and get it deployed to GitHub Pages.

Top comments (0)