create-simple-react

A "Quick Start" for React on the frontend and NodeJS on the backend. An alternative to other ways to start a React project. This will create a project ready for production or a play area to trry out React.

Creating a new Project

npm init simple-react [New Project Directory] {--verbose} {--help}

Example

cd ~/projects
npm init simple-react@latest lab-status

-OR-

cd ~/projects
npx create-simple-react@latest lab-status

3 minutes later...

cd lab-status
npm start

open a browser to http://localhost:8080

There is no ejecting !!

This project was ruled by these concepts:

1. K.I.S.S. -- Keep It Sublimely Simple
2. D.R.Y. -- Don't Repeat Yourself
3. Everything in plain sight
4. React Frontend, NodeJS backend example
5. Project structure near ready for Production (just change webpack config from development to production, add minifiy)

Please send ideas on improvements

| Release | New features | |----------------|------------------------------------------------------------------------------| | Version 0.6.1 | Example code for both React Class and React Hooks (Jest test examples too!) | | Version 0.9.0 | Upgraded to Webpack 5 | | Version 0.10.0 | Tested with older version of NodeJS | | Version 1.0.0 | NodeJS 16, npm 8, | | Version 1.1.0 | Added TailwindCSS support |

Current Stack

| Layer | Version | |----------|---------| | NodeJS | 16.14.0 | | Express | 4.17.3 | | React | 17.0.2 |

Project Tools

| Layer | Version | |-------------|---------| | npm | 8.5.0 | | Webpack | 5.69.1 | | Babel | 7.16.x | | dotEnv | 16.0.0 | | PostCSS | 8.4.6 | | TailwindCSS | 3.0.23 |

• send email to [email protected] on earlier or later versions mention your platform
  • Ubuntu 18.04, 20.04, RaspberryPi 3/4, Mac OS, Win10 1803/1909
  • we will put the list here

for those you want to tinker ...

the config files are in the root directory with the package.json file. If you mess them up, you have two choices:

• use git to revert back
• remove the messed up files and run create-simple-react on the same directory again. It will restore the original config files. Note: create-simple-react will not replace existing files

What you get out of the box

Project Scripts

npm run start

runs the application is Live Reload where as you save code code in src/,
you will see the changes on the web page http://localhost:8080

npm run build

creates a bundle.js in the public/ ready to test before publishing on a production server.

npm run demo

tests the production files public/ on last time before publishing.

npm run test

run the Jest Unit tests in the test directory

npm run lint

runs ESLint against all your source code -- catch syntax errors early

Your project directory

| | | | ----------------- | ----------------------------------------------------------------------| | package.json | The file where NPM keeps all the details to build or run your project | | .eslintrc.js | default configuration for ESLint | | .gitignore | which files not to include in version tracking | | babel.config.js | configuration file for Babel to support React and JSX | | webpack.config.js | configuration file for Webpack to support Babel, React, and JSX | | node_modules | directory where NPM puts modules your project uses | | public | directory where production bundle of your code will go | | src | directoy of your modules source code in JSX and ES2018 | | src/index.html | web page to launch your React Application | | src/index.js | Top App Module | | src/Example.js | An example React Component used by index.js | | test | directory for your Jest unit tests | | server | an example NodeJS server as a backend for your React frontEnd |

Further Study

Where is all started ReactJS

Wes Bos' React for Beginner

Elija Manor's Article on npm initializers <-- great article!!

Other npm init examples

• create-deck - Create mdx-deck presentations

  npm init deck your-app-name

• create-component-app - Tool to generate different types of React components from the terminal. 💻

  npm init component-app

• create-hintrc - 💡 A hinting engine for the web https://webhint.io/

  npm init hintrc

• create-esm - Create esm enabled packages

  npm init esm