Git Product home page Git Product logo

react-universal-web-apps's Introduction

React SSR Example Application

The application contains several variants, each in its separate branch, progressively demonstrating various paradigms for writing universal JavaScript with React, React Router, Node and Express.

Enjoy.

Simple Application

The application is under simple branch.

The basis for the entire application stack, this application starts (and ends) with client-side React, with no handling of rendering on the server. The data is not retrieved, rather fed via props from the top level route.

Naive Universal Application

The application is under simple+ssr branch.

This version of the application performs the following:

  1. render HTML on server, based on data necessary
  2. deliver the HTML to the browser
  3. send the data , used to render the HTML, to the browser as well
  4. allow React to resolve the necessary re-renders

A Little Less Naive Universal Application

The application is under simple+ssr+context branch.

This application improves on the previous variant by abstracting data propagation and delegating it to React Context. This is achieved by introducing a new wrapper component that does most of the "heavy" lifting required for Context usage in React components.

More Complex, But Still Naive, Application

The application is under simple+ssr+context+promise branch.

This application expands the previous by adding another page and delegating data retrieval to static methods on the components themselve (limited to Route components).

Flux Universal Application

The application is under flux+ssr+context+promise branch.

This variant of the application makes the transformation from our naive Flux-less application to still (hopefully less) somewhat naive Flux-full one.

react-universal-web-apps's People

Contributors

dnutels avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.