https://github.com/jxnblk/static-react

Zero-configuration CLI React static renderer
https://github.com/jxnblk/static-react

cli react static zero-configuration

Last synced: about 12 hours ago
JSON representation

Zero-configuration CLI React static renderer

• Host: GitHub
• URL: https://github.com/jxnblk/static-react
• Owner: jxnblk
• Created: 2015-02-28T00:28:14.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2018-06-19T04:33:08.000Z (over 6 years ago)
• Last Synced: 2025-01-20T09:04:44.207Z (8 days ago)
• Topics: cli, react, static, zero-configuration
• Language: JavaScript
• Homepage:
• Size: 506 KB
• Stars: 348
• Watchers: 7
• Forks: 29
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# static-react

Zero-configuration CLI React static renderer

[![Build Status][badge]](https://travis-ci.org/jxnblk/static-react)

[badge]: https://img.shields.io/travis/jxnblk/static-react.svg?style=flat-square

## Usage

```

npm i -g static-react

```

```

static-react RootComponent.js > index.html

```

Static-react include babel presets and React – there is no need to install them separately

## Examples

See the [examples/](examples) directory

## Fetching Data

Use the `getInitialProps` static method to fetch data or get server-side props for things like CSS-in-JS libraries.

```jsx

import React from 'react'

import fetch from 'isomorphic-fetch'

export default class extends React.Component {

  static getInitialProps = async () => {

    const data = await fetch('https://api.example.com/data')

    return {

      data

    }

  }

  render () {

    const { data } = this.props

    return (

      

        
Data

        

          {JSON.stringify(data, null, 2)}

        

      

    )

  }

}

```


## CSS-in-JS

Use the `getInitialProps` to pass side effects from CSS-in-JS libraries as props.

```jsx

import React from 'react'

import { Box } from 'rebass'

export default class Root extends React.Component {

  static getInitialProps = async (app) => {

    const { ServerStyleSheet } = require('styled-components')

    const { renderToString } = require('react-dom/server')

    const sheet = new ServerStyleSheet()

    renderToString(

      sheet.collectStyles(app)

    )

    const css = sheet.getStyleTags()

    return { css }

  }

  static defaultProps = {

    css: ''

  }

  render () {

    const { css } = this.props

    return (

      

        

          ${css}

        

        

          

            Beep boop

          

        

      

    )

  }

}

```

---

MIT License