Skip to content

Latest commit

 

History

History
121 lines (73 loc) · 3.29 KB

README.md

File metadata and controls

121 lines (73 loc) · 3.29 KB
Raw

** prereact web site (Demo )

npm run dev

This is a full web server nicely suited to your project. Any time you make changes within the src directory, it will rebuild and even refresh your browser.

** Testing with mocha, karma, chai, sinon via phantomjs:**

npm test

🌟 This also instruments the code in src/ using isparta, giving you pretty code coverage statistics at the end of your tests! If you want to see detailed coverage information, a full HTML report is placed into coverage/.

** Generate a production build in ./build:**

npm run build

You can now deploy the contents of the build directory to production!

Surge.sh Example: surge ./build -d my-app.surge.sh

Netlify Example: netlify deploy

Deploy to Netlify

** Start local production server with serve:**

npm start

This is to simulate a production (CDN) server with gzip. It just serves up the contents of ./build.

Structure

Apps are built up from simple units of functionality called Components. A Component is responsible for rendering a small part of an application, given some input data called props, generally passed in as attributes in JSX. A component can be as simple as:

class Link extends Component {
  render({ to, children }) {
    return <a href={ to }>{ children }</a>;
  }
}
// usage:
<Link to="/">Home</Link>

CSS Modules

This project is set up to support CSS Modules. By default, styles in src/style are global (not using CSS Modules) to make global declarations, imports and helpers easy to declare. Styles in src/components are loaded as CSS Modules via Webpack's css-loader. Modular CSS namespaces class names, and when imported into JavaScript returns a mapping of canonical (unmodified) CSS classes to their local (namespaced/suffixed) counterparts.

When imported, this LESS/CSS:

.redText { color:red; }
.blueText { color:blue; }

... returns the following map:

import styles from './style.css';
console.log(styles);
// {
//   redText: 'redText_local_9gt72',
//   blueText: 'blueText_local_9gt72'
// }

Note that the suffix for local classNames is generated based on an md5 hash of the file. Changing the file changes the hash.

Handling URLS

💁 This project contains a basic two-page app with URL routing.

Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as props.

Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.

<Router>
  <A path="/" />
  <B path="/b" id="42" />
  <C path="/c/:id" />
</Router>

License

MIT