Forkable JavaScript React Static is a template for creating React based stand alone websites (sites that are served as static html, css, and javascript). The repo doesn't include any server, it needs to be built and deployed to a static web server. (Though it can be connected to existing services like Firebase)
- Modern JavaScript syntax (ES2015+) via Babel
- Component-based UI architecture via React, Webpack and CSS Modules
- Application state management via Redux
- Hot Module Replacement (HMR) /w React Hot Loader
.
├── /assets/ # Shared assets including fonts and images
├── /components/ # Shared or generic UI components
│ ├── /Card/ # Example card component
│ └── /Link/ # Link component to be used instead of <a>
├── /core/ # Core framework
│ ├── history.js # Handles client-side navigation
│ ├── router.js # Handles routing and data fetching
│ └── store.js # Application state manager (Redux)
├── /dist/ # Root directory for deployable app after building
├── /docs/ # Additional docs
├── /pages/ # Page directories containing react components, and local css
│ ├── /article/ # Example article page
│ ├── /error/ # Example error page
│ └── /home/ # Example home page
├── /styles/ # Global styles
│ ├── base.css # Colab base css properties
│ └── grid.css # Colab grid
├── /utils/ # Utilities and helpers
├── index.html # Static index onto which React mounts all components
├── main.js # Javascript entrypoint for app
├── package.json # Project dependencies and npm configuration
├── robots.txt # Site's robots.txt
├── routes.json # Maps app routes to page react components
├── run.js # Script to manage cleaning, building, starting, etc
└── webpack.config.js # Webpack configurationWith React, entire pages and ndividual UI elements (like a button) are components.
When creating a component that is generic or might be shared accross the entire app, put the component JavaScript and
any component styles in a subdirectory of components.
When creating whole pages, put the top level page component JavaScript, styles specific to the page, and any components needed by the page
that aren't generic or shared with the rest of the app in a subdirectory of pages.
Styles shared accross the app should go in a new file in the styles directory.
Webpack is a package that bundles multiple JavaScript files and CSS files into a single bundle.js file that is then referenced by index.html.
As part of bundling, webpack uses CSS Modules to read and merge local and global CSS files into the generated bundle.js, and renames classes so that
they don't clash in the global CSS namespace. This means class names in any CSS file in the app are scoped only to that file, so disciplined prefixing of
class names (like BEM prefixing) isn't necessary.
In order for webpack to bundle a CSS file, it needs to be referenced by a JavaScript file that is used by the app. A local CSS file is typically referenced by the component JavaScript
that uses it. Global CSS files like /styles/base.css and /styles/grid.css are referenced by main.js. If more global styles are needed, they should be added to a new
file in /styles/ and imported in main.js. See the home page JavaScript and CSS for an example of how to reference local and global css from a React component.
Step 1. Make sure that you have Node.js v6 or newer installed on your machine.
Step 2. Clone this repository
$ git clone -o [new app name] -b master --single-branch https://github.com/IDEO-coLAB/forkable-js-react-static MyApp
$ cd [new app name]
$ npm install # Install project dependencies listed in package.jsonStep 3. Compile and launch your app locally by running:
$ npm run start $ npm run buildThis will populate /dist with all files needed for the site including HTML, JavaScript, Assets, robots.txt, etc. Note that webpack bundles Javascript and CSS into a single bundle.js and other than index.html, all html is rendered on the fly by React.