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:
- K.I.S.S. -- Keep It Sublimely Simple
- D.R.Y. -- Don't Repeat Yourself
- Everything in plain sight
- React Frontend, NodeJS backend example
- 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 martin.a.jackson@gmail.com 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