https://github.com/kosz/preact-playground
https://github.com/kosz/preact-playground
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kosz/preact-playground
- Owner: kosz
- Created: 2016-11-20T04:10:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-20T04:10:27.000Z (over 8 years ago)
- Last Synced: 2025-02-13T12:53:15.556Z (3 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Preact Boilerplate / Starter Kit
Playground cloned from https://github.com/developit/preact-boilerplate
## Installation
**1. Clone this repo:**
**3. Install the dependencies:**
```sh
npm install
```
## Development Workflow
**4. Start a live-reload development server:**
```sh
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.
**5. Testing with `mocha`, `karma`, `chai`, `sinon` via `phantomjs`:**
```sh
npm test
```
**6. Generate a production build in `./build`:**
```sh
npm run build
```
> You can now deploy the contents of the `build` directory to production!
>
> **[Surge.sh](https://surge.sh) Example:** `surge ./build -d my-app.surge.sh`
**5. Start local production server with `superstatic`:**
```sh
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:
```js
class Link extends Component {
render({ to, children }) {
return { children };
}
}
// usage:
Home
```
---
## CSS Modules
This project is set up to support [CSS Modules](https://github.com/css-modules/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](https://github.com/webpack/css-loader#css-modules). 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:
```css
.redText { color:red; }
.blueText { color:blue; }
```
... returns the following map:
```js
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
:information_desk_person: This project contains a basic two-page app with [URL routing](http://git.io/preact-router).
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.
```js
```
---
## License
MIT
[Preact]: https://developit.github.io/preact
[webpack]: https://webpack.github.io