This is a template for Create React App Zero, an alternative to Create React App that requires no build tools and has no external dependencies. Check out the demo app on github pages.
Feel free to fork and make it your own.
There are no build tools required. All you need is a (static) web server and a text editor.
This app is entirely self-contained and does not rely on any external dependencies for running or developing beyond the browser, web server and text editor. This guarantees that no external change will break this app.
Run a local web server for the public folder and browse to index.html.
Examples of static web servers you can run:
- node:
npx serve public - php:
php -S localhost:8000 -t public - python:
python3 -m http.server 8000 --directory public
When you make edits, save the file and reload in the browser. If your editor supports eslint, it should show lint errors inline.
Browse to test/index.html, the tests will run automatically.
The tests are set up using mocha instead of jest, but otherwise mimic the test setup from Create React App.
There are no builds. You edit the source, you refresh the page, slinging web code like it's 2005.
To learn React, check out the React documentation.
Some things are changed compared to the standard way React projects usually do them:
- JSX is replaced by htm
node_modulesandwebpackare replaced by ES6 import and UMD/ESM files in the lib folder (see the section on dependencies below)postcssandsassare replaced by CSS3@importand BEM notation (tip: add CSS variables for additional modularity)babelis replaced by ES8 in the browser
In a usual React project we would use npm install to install dependencies into the node_modules folder,
and use webpack to build a bundle of our app and the dependencies it uses. This project avoids npm and webpack and instead chooses to include the dependencies pre-built to run in the browser directly.
To add a new dependency:
- Go to unpkg.com, find the package you want.
- Download the UMD or ESM build and place it in the
lib/folder.
To add an UMD library:
- Add a script tag to
index.htmlto load the library as a property on thewindowobject. - Edit
src/imports.jsto export the parts of the library you need.
To add an ESM library:
- Edit
src/imports.jsand import the library directly from thelib/folder. - Export the parts of the library you need.
In your code, import the necessary symbols from src/imports.js.
Out of the box there are examples of both UMD and ESM libraries being used.
To add routing, use the UMD version of React Router and set up a HashRouter.
See the router branch for an example that uses a static hash router.
If you don't want to use a hash router, you may need to configure your production server to support client-side routing before deploying your app.
Upload the contents of the public/ folder to a web host, or deploy it on github pages.
While a best effort has been made to bring you an authentic React web development experience without build tools or external dependencies, there are some things which you may notice are absent.
- minification: the dependencies are minified, and if your app code is so big to need minification, you probably need to use Create React App instead of this, but indeed there is no minification.
- bundling and tree shaking: again, the dependencies are pre-shaken and pre-bundled, but the app code itself is not. Host on HTTP/2 to benefit from multiplexing and limit the performance impact of the lack of bundling.
- linting: if you use VS Code with the eslint extension it should pick up the
.eslintrc.jsonconfig and lint your project automatically. - Internet Explorer: it's time to let it go, seriously. But yes, no IE support, at all. Browser support in general should be pretty good though because all popular browsers are modern browsers.
To learn more about the rationale for Create React App Zero, start with why.