# rx0 > Zero-config React renderer and CLI Latest version **1.0.8** (published 2017-09-16) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install rx0 pnpm add rx0 yarn add rx0 bun add rx0 ``` Provides the command `x0`. ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.0.8 | | Published | 2017-09-16 | | First published | 2017-09-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 15 | | Known vulnerabilities | 0 (+7 in 1 direct dependencies) | | Install scripts | no | | Author | Brent Jackson | | Maintainers | jxnblk | ## Links - npm: https://www.npmjs.com/package/rx0 - npm.io page: https://npm.io/package/rx0 ## Dependencies (15) - [opn](https://npm.io/package/opn.md) ^5.1.0 - [meow](https://npm.io/package/meow.md) ^3.7.0 - [react](https://npm.io/package/react.md) ^15.6.1 - [pkg-up](https://npm.io/package/pkg-up.md) ^2.0.0 - [webpack](https://npm.io/package/webpack.md) ^3.5.6 - [react-dom](https://npm.io/package/react-dom.md) ^15.6.1 - [babel-core](https://npm.io/package/babel-core.md) ^6.26.0 - [read-pkg-up](https://npm.io/package/read-pkg-up.md) ^2.0.0 - [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.2 - [babel-register](https://npm.io/package/babel-register.md) ^6.26.0 - [update-notifier](https://npm.io/package/update-notifier.md) ^2.2.0 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.0 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.7.1 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1 ## Recent versions - 1.0.8 (latest) — 2017-09-16 - 1.0.7 — 2017-09-16 - 1.0.6 — 2017-09-15 - 1.0.5 — 2017-09-15 - 1.0.4 — 2017-09-14 - 1.0.3 — 2017-09-13 - 1.0.2 — 2017-09-13 - 1.0.1 — 2017-09-13 - 1.0.0 — 2017-09-13 ## README # x0 Zero-config React renderer and CLI ```sh npm install rx0 ``` ## Features - Hot-loading development environment - Renders static HTML - Renders JS bundles - Use any CSS-in-JS library - Works with any React component * * Components cannot rely on bundler features like webpack loaders ## Isolated development environment ```sh x0 dev src/App.js ``` Options: ``` -o --open Open dev server in default browser -p --port Set custom port for dev server ``` ```sh x0 dev src/App.js -op 8080 ``` ## Static Render Render a static HTML page ```sh x0 build src/App.js > site/index.html ``` Render a static page with client-side bundle ```sh x0 build src/App.js --out-dir site ``` Render with a custom root HTML component to control CSS, routing, etc. ``` x0 build src/App.js --html src/Html.js ``` Options ``` -h --html Root HTML component -d --out-dir Directory to save index.html and bundle.js to -s --static Only render static HTML (no client-side JS) ``` ## Custom Root HTML Component To handle things like routing and CSS-in-JS libraries, use a custom HTML component. When an HTML component isn't specified as an option, X0 uses a default HTML component. This same component can be imported and customized via props. ```jsx // custom root HTML component import React from 'react' import { Html } from 'x0' import cxs from 'cxs' const Root = props => { // get static CSS string from rendered app const css = cxs.css() return ( ) } export default Root ``` The `Html` component accepts the following props. - `title` - `description` - `image` - `css` - `js` - `stylesheets` (array) - `scripts` (array) - `initialProps` (object) - `children` ## Configuration Other configuration options can be passed to x0 in a `package.json` field named `x0`. ```json "x0": { "title": "Hello", "count": 0 } ``` ## Rendering Multiple Pages To render multiple pages and use routing, add a `routes` array to the `package.json` configuration object. ```json "x0": { "routes": [ "/", "/about" ] } ``` In your main app component, use a library like react-router to handle the routes. When rendering statically, the path will be passed to both the app component and the root HTML component as the `pathname` prop. ```jsx // main app component import React from 'react' import { BrowserRouter } from 'react-router' const App = props => ( {/* ...handle child routes */} ) ``` ```jsx // root component import React from 'react' import { StaticRouter } from 'react-router' import { Html } from 'rx0' const Root = props => ( ) ``` ```sh x0 static src/App.js --html src/Root.js --out-dir site ``` MIT License --- _Source: https://npm.io/package/rx0 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._