# x0 Document & develop React components without breaking a sweat [![Build Status][build-badge]][build] ```sh npm install -g @compositor/x0 ``` [build-badge]: https://img.shields.io/travis/c8r/x0/master.svg?style=flat-square [build]: https://travis-ci.org/c8r/x0 ## Features - Zero-config - No plugins - Components over configuration - Use markdown, MDX, or React components - Automatic file system based routing - Completely customizable - Export static sites - Works as an isolated development environment Read more about x0 in our [blog post](https://compositor.io/blog/x0-making-react-component-development-stupid-simple/). ## 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 (

Hello

) } } ``` 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 =>

About

``` The about page should now render when navigating to . ## Isolated development environment ```sh x0 docs ``` Options: ``` -o --open Open dev server in default browser -p --port Custom port for dev server -t --template Path to custom HTML template --webpack Path to custom webpack configuration ``` ```sh x0 docs -op 8080 ``` ## Static Build Export static HTML and client-side bundle ```sh x0 build docs ``` Export static HTML without bundle ```sh x0 build docs --static ``` Options ``` -d --out-dir Output directory (default dist) -s --static Output static HTML without JS bundle -t --template Path to custom HTML template --webpack Path to custom webpack configuration ``` ## Fetching Data Use the async `getInitialProps` static method to fetch data for static rendering. This method was inspired by [Next.js][nextjs]. ```jsx const Index = props => (

Hello {props.data}

) Index.getInitialProps = async () => { const fetch = require('isomorphic-fetch') const res = await fetch('http://example.com/data') const data = await res.json() return { data } } ``` ## Custom App A custom `App` component can be provided by including an `_app.js` file. The `App` component uses the [render props][render-props] pattern to provide additional state and props to its child routes. [render-props]: https://reactjs.org/docs/render-props.html ```jsx // example _app.js import React from 'react' export default class extends React.Component { state = { count: 0 } update = fn => this.setState(fn) render () { const { render, routes } = this.props return render({ ...this.state, decrement: () => this.update(s => ({ count: s.count - 1 })), increment: () => this.update(s => ({ count: s.count + 1 })) }) } } ``` ### Layouts The `App` component can also be used to provide a common layout for all routes. ```jsx // example _app.js import React from 'react' import Nav from '../components/Nav' import Header from '../components/Header' import Footer from '../components/Footer' export default class extends React.Component { render () { const { location, render, routes } = this.props const route = routes.find(route => route.path === location.pathname) return (