x0
Document & develop React components without breaking a sweat
npm install -g @compositor/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.
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.
// index.jsimport React from 'react' Component { return <h1>Hello</h1> }
Start a development server by running:
x0 docs --open
To add more pages, add a new component for each route. For example, create an about page:
// about.jsimport React from 'react' <h1>About</h1>
The about page should now render when navigating to http://localhost:8080/about.
Isolated development environment
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
x0 docs -op 8080
Static Build
Export static HTML and client-side bundle
x0 build docs
Export static HTML without bundle
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.
const Index = <h1>Hello propsdata</h1> IndexgetInitialProps = const fetch = const res = await const data = await res return data
Custom App
A custom App
component can be provided by including an _app.js
file.
The App
component uses the render props pattern to provide additional state and props to its child routes.
// example _app.jsimport React from 'react' Component state = count: 0 this { const render routes = thisprops return }
Layouts
The App
component can also be used to provide a common layout for all routes.
// example _app.jsimport React from 'react'import Nav from '../components/Nav'import Header from '../components/Header'import Footer from '../components/Footer' Component { const location render routes } = thisprops const route = routes return <React.Fragment> <Nav /> <Header = /> <Footer /> </React.Fragment> }
CSS-in-JS
x0 supports server-side rendering for styled-components and emotion with zero configuration.
Styled Components
To enable CSS rendering for static export, ensure that styled-components
is installed as a dependency in your package.json
"dependencies":
Emotion
Ensure emotion
is installed as a dependency in your package.json
"dependencies":
Configuration
Default options can be set in the x0
field in package.json
.
"x0":
Head content
Head elements such as <title>
, <meta>
, and <style>
can be configured with the x0
field in package.json
.
"x0":
Custom HTML Template
A custom HTML template can be passed as the template
option.
"x0":
// example templatemoduleexports = html css scripts title meta = links = static: isStatic `<!DOCTYPE html><head> <title>{title}</title> </head><div id=root></div>`
Routing
x0 creates routes based on the file system, using react-router.
To set the base URL for static builds, use the basename
option.
"x0":
Links
To link between different components, install react-router-dom
and use the Link
component.
npm i react-router-dom
<div> <h1>Home</h1> <nav> <Link to='/'>Home</Link> <Link to='/about'>About</Link> </nav> </div>
JSX Format
x0 includes support for the Compositor JSX file format.
---title: Hello---import Box Heading from 'rebass' <Box = => <Heading> frontMattertitle </Heading></Box>
MDX Format
x0 includes support for the MDX file format.
import { Box } from 'rebass' # Hello MDX <Box p={4} bg='tomato'> Beep Boop</Box>
webpack
Webpack configuration files named webpack.config.js
will automatically be merged with the built-in configuration, using webpack-merge.
To use a custom filename, pass the file path to the --webpack
flag.
// webpack.config.js examplemoduleexports = module: rules: test: /\.txt$/ loader: 'raw-loader'
See the example.
Related
- Compositor JSX
- MDX
- React Router
- Mini HTML Webpack Plugin
- Styled Components
- Emotion
- webpack
- Create React App
- Next.js
- Gatsby
- React-Static