Skip to content

Commit d213b08

Browse files
authored
Add notes about preact-cli ⚛️
1 parent bf62d5f commit d213b08

File tree

1 file changed

+15
-10
lines changed

1 file changed

+15
-10
lines changed

README.md

+15-10
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
- Everything you need: JSX, <abbr title="Virtual DOM">VDOM</abbr>, React DevTools, <abbr title="Hot Module Replacement">HMR</abbr>, <abbr title="Server-Side Rendering">SSR</abbr>..
1313
- A highly optimized diff algorithm and seamless Server Side Rendering
1414
- Transparent asynchronous rendering with a pluggable scheduler
15+
- 🆕💥 **Instant no-config app bundling with [Preact CLI](https://github.com/developit/preact-cli)**
1516

1617
### 💁 More information at the [Preact Website ➞](https://preactjs.com)
1718

@@ -125,9 +126,13 @@ Preact supports modern browsers and IE9+:
125126

126127
## Getting Started
127128

128-
> 💁 You [don't _have_ to use ES2015 to use Preact](https://github.com/developit/preact-without-babel)... but you should.
129+
> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_
129130
130-
The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc. If you don't, start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).
131+
The easiest way to get started with Preact is to install [Preact CLI](https://github.com/developit/preact-cli). This simple command-line tool wraps up the best possible Webpack and Babel setup for you, and even keeps you up-to-date as the underlying tools change. Best of all, it's easy to understand! It builds your app in a single command (`preact build`), doesn't need any configuration, and bakes in best-practises 🙌.
132+
133+
The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.
134+
135+
You can also start with [preact-boilerplate] or a [CodePen Template](http://codepen.io/developit/pen/pgaROe?editors=0010).
131136

132137

133138
### Import what you need
@@ -331,7 +336,7 @@ Here is a somewhat verbose Preact `<Link>` component:
331336
```js
332337
class Link extends Component {
333338
render(props, state) {
334-
return <a href={ props.href }>{ props.children }</a>;
339+
return <a href={props.href}>{props.children}</a>;
335340
}
336341
}
337342
```
@@ -340,21 +345,21 @@ Since this is ES6/ES2015, we can further simplify:
340345

341346
```js
342347
class Link extends Component {
343-
render({ href, children }) {
344-
return <a {...{ href, children }} />;
345-
}
348+
render({ href, children }) {
349+
return <a {...{ href, children }} />;
350+
}
346351
}
347352

348353
// or, for wide-open props support:
349354
class Link extends Component {
350-
render(props) {
351-
return <a {...props} />;
352-
}
355+
render(props) {
356+
return <a {...props} />;
357+
}
353358
}
354359

355360
// or, as a stateless functional component:
356361
const Link = ({ children, ...props }) => (
357-
<a {...props}>{ children }</a>
362+
<a {...props}>{ children }</a>
358363
);
359364
```
360365

0 commit comments

Comments
 (0)