react-node-ssr
## Overview Simple library for rendering React components on server side in Node.js with customizable posibilities, instead of using template engines
Last updated 2 years ago by steevehook .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-node-ssr 
SYNC missed versions from official npm registry.

React Node SSR

Overview

Simple library for rendering React components on server side in Node.js with customizable posibilities, instead of using template engines

Size: 1.9 KB

build status dependency status Coverage via Codecov JavaScript Style Guide

PRs Welcome

React Node SSR

Install dependencies:

  1. yarn add react react-dom react-node-ssr
  2. yarn add babel-cli babel-preset-react babel-preset-env nodemon -D

Make sure you have babel configured in .babelrc:

{
    "presets": [
        "react",
        "env"
    ]
}

Add a serve or start script in package.json

{
    "scripts": {
        "serve": "nodemon --exec babel-node --presets react,env ./examples/server.js"
    }
}

Basic example to follow along:

Welcome.jsx

import React from 'react';

class Welcome extends React.Component {
    render() {
        return (
            <div>
                <h1>Welcome Howdy!</h1>
            </div>
        );
    }
}

export default Welcome;

server.js

import express from 'express';
import React from 'react';
import ReactNodeSSR from 'react-node-ssr';
import Welcome from './Welcome';

const app = express();

app.get('/', (req, res) => {
    const html = ReactNodeSSR
    .title('Page Title')
    .meta({charset: 'UTF-8'})
    .meta({name: 'viewport', content: 'width=device-width, initial-scale=1.0'})
    .meta({'http-equiv': 'X-UA-Compatible','content': 'ie=edge'})
    .lang('en')
    .style({rules: 'body {background: red}'})
    .link({rel: 'stylesheet', href: '/style1.css'})
    .link({rel: 'icon', type: 'image/png', href: 'favicon.png'})
    .script({src: '/srcipt1.js', defer: 'defer'})
    .render(<Welcome/>);
    
    res.send(html);
});

app.listen(3000, () => console.log('Up and running!'));

generated HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page Title</title>
<link rel="stylesheet" href="/style1.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<style>body {background: red}</style>
<div data-reactroot=""><h1>Welcome Howdy!</h1></div>
<script src="/srcipt1.js" defer="defer"></script>
</body>
</html>

Docs:

  1. title(t: string) - Set HTML page title
  2. lang(l: string) - Set HTML page language
  3. meta(m: object) - Set HTML page meta data
  4. script(s: object) - Add external script inside HTML page
  5. link(l: object) - Add external link inside HTML page
  6. style(s: object) - Add inline critical style inside HTML page
  7. render(c: React.Component) - React component to render in HTML template

Have fun!

Upcoming:

  • Express like middleware
  • More possibilities for customizing the html template
  • Integrations with template engines
  • Integration with webpack builds
  • Possibility to import css in js or css modules or scss files directly into React components
  • Redux like store for HTML template
  • Add possibility to attach handlers in statically generated HTML from server using React
  • Email templates crafting with the help of React

Current Tags

  • 1.2.2                                ...           latest (2 years ago)

18 Versions

  • 1.2.2                                ...           2 years ago
  • 1.2.1                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 25
Last Day 0
Last Week 20
Last Month 3
Dependencies (4)
Dev Dependencies (18)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |