|
1 | | -# Preact Boilerplate / Starter Kit |
| 1 | +# Preact Redux Example |
2 | 2 |
|
3 | | -> :guitar: Ready-to-rock [Preact] starter project, powered by [webpack]. |
4 | | -> |
5 | | -> :rocket: If you're starting a new project using [Preact], you've come to the right place. |
6 | | -Below is a step-by-step guide that takes you straight from downloading this boilerplate to production. |
7 | | -> |
8 | | -> **[:boom: View Demo :boom:](https://preact-boilerplate.surge.sh)** |
9 | | -
|
10 | | - |
11 | | ---- |
12 | | - |
13 | | - |
14 | | -# Quick-Start Guide |
15 | | - |
16 | | -- [Installation](#installation) |
17 | | -- [Development Workflow](#development-workflow) |
18 | | -- [Structure](#structure) |
19 | | -- [Handling URLS](#handling-urls) |
20 | | - |
21 | | - |
22 | | -## Installation |
23 | | - |
24 | | -**1. Clone this repo:** |
25 | | - |
26 | | -```sh |
27 | | -git clone --depth 1 [email protected]:developit/preact-boilerplate.git my-app |
28 | | -cd my-app |
29 | | -``` |
30 | | - |
31 | | - |
32 | | -**2. Make it your own:** |
33 | | - |
34 | | -```sh |
35 | | -rm -rf .git && git init && npm init |
36 | | -``` |
37 | | - |
38 | | -> :information_source: This re-initializes the repo and sets up your NPM project. |
39 | | -
|
40 | | - |
41 | | -**3. Install the dependencies:** |
42 | | - |
43 | | -```sh |
44 | | -npm install |
45 | | -``` |
46 | | - |
47 | | -> You're done installing! Now let's get started developing. |
48 | | -
|
49 | | - |
50 | | - |
51 | | -## Development Workflow |
52 | | - |
53 | | - |
54 | | -**4. Start a live-reload development server:** |
55 | | - |
56 | | -```sh |
57 | | -PORT=8080 npm run dev |
58 | | -``` |
59 | | - |
60 | | -> 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. |
61 | | -
|
62 | | - |
63 | | -**5. Generate a production build in `./build`:** |
64 | | - |
65 | | -```sh |
66 | | -npm run build |
67 | | -``` |
68 | | - |
69 | | -You can now deploy the contents of the `build` directory to production! |
70 | | - |
71 | | -> **Example:** deploy to [surge.sh](https://surge.sh): |
72 | | -> |
73 | | -> `surge ./build -d my-app.surge.sh` |
74 | | -
|
75 | | - |
76 | | ---- |
77 | | - |
78 | | - |
79 | | -## Structure |
80 | | - |
81 | | -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: |
82 | | - |
83 | | -```js |
84 | | -class Link extends Component { |
85 | | - render({ to, children }) { |
86 | | - return <a href={ to }>{ children }</a>; |
87 | | - } |
88 | | -} |
89 | | -// usage: |
90 | | -<Link to="/">Home</Link> |
91 | | -``` |
92 | | - |
93 | | - |
94 | | - |
95 | | -## Handling URLS |
96 | | - |
97 | | -:information_desk_person: This project contains a basic two-page app with [URL routing](http://git.io/preact-router). |
98 | | - |
99 | | -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`. |
100 | | - |
101 | | -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. |
102 | | - |
103 | | -```js |
104 | | -<Router> |
105 | | - <A path="/" /> |
106 | | - <B path="/b" id="42" /> |
107 | | - <C path="/c/:id" /> |
108 | | -</Router> |
109 | | -``` |
110 | | - |
111 | | - |
112 | | ---- |
113 | | - |
114 | | - |
115 | | -## License |
116 | | - |
117 | | -MIT |
118 | | - |
119 | | - |
120 | | -[Preact]: https://developit.github.io/preact |
121 | | -[webpack]: https://webpack.github.io |
| 3 | +> Readme coming soon. |
0 commit comments