posthtml-static-react - A PostHTML plugin to render custom elements as static React components.

  •        3

A PostHTML plugin to render custom elements as static React components. Note: If you use JSX syntax (as the example above) you will need to transform your scripts - either precompile with babel or at runtime with babel-node. YMMV.

https://github.com/rasmusfl0e/posthtml-static-react#readme

Dependencies:

posthtml-match-helper : ^1.0.0
react : ^0.14.0
react-dom : ^0.14.0

Tags
Implementation
License
Platform

   




Related Projects

posthtml - PostHTML is a tool to transform HTML/XML with JS plugins

  •    Javascript

PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier. All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.

html-to-react-components - Converts HTML pages into React components

  •    Javascript

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered. This utility was designed to free React developers from a boring task of translating HTML into components.

babel-plugin-react-transform - Babel plugin to instrument React components with custom transforms

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This plugin wraps React components with arbitrary transforms. In other words, it allows you to instrument React components in any way—limited only by your imagination.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

dumb-react

  •    Javascript

Dumb React is a collection of React components used to create a static (dumb) website screen. Why do this? Many React tutorials or boilerplates I've encountered are either too basic ("here's a button component!") or more often too complex ("here's a simple babel typescript redux cssmodules isometric oh god oh god oh god..."). I wanted to be able to draw a straight line from how a simple component ("atom" in atomic design speak) makes its way into a full page. There are a ton of different ways to build reusable components and put dynamic content inside them, and many teams — even ones that aren't building highly-interactive web apps that would actually benefit from a tool like React — are reaching for React to create component-driven experiences. So in that spirit, I wanted to create a demo that shows how to construct a whole screen (even if it's a dumb, static one) out of React components.


react-static - ⚛️ 🚀 A progressive static site generator for React.

  •    Javascript

A progressive static-site generator for React. React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites. It's been carefully designed to meet the highest standards of SEO, site performance, and user/developer experience.

bisheng - Transform Markdown(and other static files with transformers) into a SPA website using React

  •    Javascript

Bi Sheng was the Chinese inventor of the first known movable type technology. bisheng is designed to transform Markdown(and other static files with transformers) into static websites and blogs using React.

Gatsby - Blazing fast static site generator for React

  •    Javascript

Gatsby is a blazing fast static site generator for React. Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

  •    Javascript

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

theme - Style your React Native components on one place

  •    Javascript

The React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code. @shoutem/theme is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web. All the documentation is available on the Developer portal.

react-transform-boilerplate - A new Webpack boilerplate with hot reloading React components, and error handling on module and component level

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This is highly experimental tech. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .

react-snapshot - A zero-configuration static pre-renderer for React apps

  •    Javascript

Server-side rendering is a big feature of React, but for most apps it can be more trouble than its worth. Personally, I think the sweet spot is taking static site snapshots of all your publicly-accessible pages & leaving anything requiring authentication as a normal, JS-driven Single Page App. This is a project to do that. Automatically, without any configuration, just smart defaults. Retrospective progressive enhancement.

suicrux - 🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]

  •    Javascript

Ultimate universal starter with lazy-loading, SSR and i18n. /static folder + url-loader. Everything in /static/public/ is copied to /dist/client with copy-webpack-plugin.

express-react-views - This is an Express view engine which renders React components on server

  •    Javascript

This is an Express view engine which renders React components on server. It renders static markup and does not support mounting those views on the client.This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.

create-react-app-buildpack - Heroku Buildpack for create-react-app: static hosting for React

  •    Shell

Deploy React.js web apps generated with create-react-app. Automates deployment with the built-in bundler and serves it up via Nginx. See the introductory blog post and entry in Heroku elements. This buildpack deploys a React UI as a static web site. The Nginx web server provides optimum performance and security for the runtime. See Architecture for details.

After.js - Next.js-like framework for server-rendered React apps built with React Router 4

  •    Javascript

Next.js is awesome. However, its routing system isn't for me. IMHO React Router 4 is a better foundation upon which such a framework should be built. Routes are just components and don't / should not have anything to do with folder structure. Static route configs are fine.

nextein - A static site generator with markdown + react for Next.js

  •    Javascript

nextein is a wrapper around next.js that allows you to write static sites using markdown and react. NodeJS v8.x+ is required to run nextein commands.

static-react - Zero-configuration CLI React static renderer

  •    Javascript

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

react-transform-hmr - A React Transform that enables hot reloading React classes using Hot Module Replacement API

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. A React Transform that enables hot reloading React classes using Hot Module Replacement API. Hot module replacement is supported natively by Webpack and available in Browserify with browserify-hmr.