jxnblk / Static React
Zero-configuration CLI React static renderer
Stars: ✭ 358
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Static React
Phpinsights
🔰 Instant PHP quality checks from your console
Stars: ✭ 4,442 (+1140.78%)
Mutual labels: cli, static
Rage
A simple, secure and modern encryption tool (and Rust library) with small explicit keys, no config options, and UNIX-style composability.
Stars: ✭ 826 (+130.73%)
Mutual labels: zero-configuration, cli
Awesome Toolkits
A curated list of open source, high-quality, popular and well maintained "zero-configuration" (#0CJS) toolkits
Stars: ✭ 488 (+36.31%)
Mutual labels: zero-configuration, cli
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+360.89%)
Mutual labels: zero-configuration, cli
Age
A simple, modern and secure encryption tool (and Go library) with small explicit keys, no config options, and UNIX-style composability.
Stars: ✭ 9,409 (+2528.21%)
Mutual labels: zero-configuration, cli
Mhy
🧩 A zero-config, out-of-the-box, multi-purpose toolbox and development environment
Stars: ✭ 128 (-64.25%)
Mutual labels: zero-configuration, cli
Compose Cli
Easily run your Compose application to the cloud with compose-cli
Stars: ✭ 353 (-1.4%)
Mutual labels: cli
Haul
Haul is a command line tool for developing React Native apps, powered by Webpack
Stars: ✭ 3,581 (+900.28%)
Mutual labels: cli
Hygen
The simple, fast, and scalable code generator that lives in your project.
Stars: ✭ 4,107 (+1047.21%)
Mutual labels: cli
Syncpack
Manage multiple package.json files, such as in Lerna Monorepos and Yarn/Pnpm Workspaces
Stars: ✭ 356 (-0.56%)
Mutual labels: cli
Hues
Colored terminal text made easy for Python and happiness.
Stars: ✭ 345 (-3.63%)
Mutual labels: cli
Taskwarrior Tui
`taskwarrior-tui`: A terminal user interface for taskwarrior
Stars: ✭ 339 (-5.31%)
Mutual labels: cli
Pundle
👾 peaceful bundles - js bundler, built from the ground up for speed and extensibility
Stars: ✭ 354 (-1.12%)
Mutual labels: cli
static-react
Zero-configuration CLI React static renderer
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/ directory
Fetching Data
Use the getInitialProps static method to fetch data or get server-side props for things like CSS-in-JS libraries.
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 (
<html>
<h1>Data</h1>
<pre>
{JSON.stringify(data, null, 2)}
</pre>
</html>
)
}
}
CSS-in-JS
Use the getInitialProps to pass side effects from CSS-in-JS libraries as props.
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 (
<html>
<head>
${css}
</head>
<body>
<Box px={3} py={4}>
Beep boop
</Box>
</body>
</html>
)
}
}
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].