mirror of
https://github.com/c8r/x0.git
synced 2024-08-17 01:10:32 +03:00
Merge pull request #72 from c8r/routing-docs
Add getting started section to readme
This commit is contained in:
commit
deef4a49a4
43
README.md
43
README.md
@ -30,11 +30,46 @@ Read more about x0 in our [blog post](https://compositor.io/blog/x0-making-react
|
|||||||
|
|
||||||
\* Custom [webpack configuration](#webpack) is required for components that rely on webpack-based features
|
\* Custom [webpack configuration](#webpack) is required for components that rely on webpack-based features
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
x0 renders a directory of React components, automatically handling routing based on filename.
|
||||||
|
Create a `docs` folder and add an `index.js` file.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
// index.js
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default class extends React.Component {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<h1>Hello</h1>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Start a development server by running:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
x0 docs --open
|
||||||
|
```
|
||||||
|
|
||||||
|
To add more pages, add a new component for each route. For example, create an about page:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
// about.js
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default props =>
|
||||||
|
<h1>About</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
The about page should now render when navigating to <http://localhost:8080/about>.
|
||||||
|
|
||||||
## Isolated development environment
|
## Isolated development environment
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 components
|
x0 docs
|
||||||
```
|
```
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
@ -47,7 +82,7 @@ Options:
|
|||||||
```
|
```
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 components -op 8080
|
x0 docs -op 8080
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
@ -56,13 +91,13 @@ x0 components -op 8080
|
|||||||
Export static HTML and client-side bundle
|
Export static HTML and client-side bundle
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 build components
|
x0 build docs
|
||||||
```
|
```
|
||||||
|
|
||||||
Export static HTML without bundle
|
Export static HTML without bundle
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
x0 build components --static
|
x0 build docs --static
|
||||||
```
|
```
|
||||||
|
|
||||||
Options
|
Options
|
||||||
|
Loading…
Reference in New Issue
Block a user