DEV Community

loading...
Cover image for React templates - Node

React templates - Node

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.
Updated on ・1 min read

Node template

The classic approach with Node.

GitHub logo MichaelCurrin / react-quickstart

Starter template for a React app - including docs and deploys GitHub Pages ⚛️ 📦

React Quickstart ⚛️ 📦

Starter template for a React app - including docs and deploys to GitHub Pages

GH Pages Deploy GitHub tag License

Made with Node Made with Yarn Made with React

Preview

How to create a new React app

Use this project as a template

View demo - React Quickstart

Use this template

Create a fresh project

Note that this project will not be up to date in terms of structure as dependencies, in comparison to the original Create React App repo was is used to generate the code for this repo.

So you may prefer to generate a fresh app using the command below from the Getting Started guide.

$ npx create-react-app my-app
$ cd my-app
$ yarn start
Enter fullscreen mode Exit fullscreen mode

Then add the docs and CI setup based on this React Quickstart template repo.

Documentation

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

Docs

Template notes

To learn how to use this project and see how a React project works - see the About page of the template's notes.

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.

Discussion (0)