All Projects → ctrlplusb → React Async Bootstrapper

ctrlplusb / React Async Bootstrapper

Licence: mit
Execute a bootstrap method on your React/Preact components. Useful for data prefetching and other activities.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Async Bootstrapper

Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (+3.54%)
Mutual labels:  ssr, server-side-rendering, react-dom
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-56.64%)
Mutual labels:  ssr, server-side-rendering
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-61.06%)
Mutual labels:  ssr, server-side-rendering
Rpg Boilerplate
Relay (React), Postgres, and Graphile (GraphQL): A Modern Frontend and API Boilerplate
Stars: ✭ 62 (-45.13%)
Mutual labels:  ssr, server-side-rendering
Onthefly
🔗 Generate TinySVG, HTML and CSS on the fly
Stars: ✭ 37 (-67.26%)
Mutual labels:  ssr, server-side-rendering
Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-61.06%)
Mutual labels:  ssr, server-side-rendering
Coren
React offline server-rendered framework
Stars: ✭ 102 (-9.73%)
Mutual labels:  ssr, server-side-rendering
Loadable Components
The recommended Code Splitting library for React ✂️✨
Stars: ✭ 6,194 (+5381.42%)
Mutual labels:  ssr, server-side-rendering
React Universal Boiler
A bold way to begin your next great universal React application. Uses Webpack 3, React 16, Redux, and more for a great developer experience.
Stars: ✭ 65 (-42.48%)
Mutual labels:  ssr, server-side-rendering
Mern
🎉 This is boilerplate for MERN stack with integrations like Redux and SSR 🎉
Stars: ✭ 77 (-31.86%)
Mutual labels:  ssr, server-side-rendering
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-23.89%)
Mutual labels:  ssr, server-side-rendering
Angular Ssr Swa
Stars: ✭ 15 (-86.73%)
Mutual labels:  ssr, server-side-rendering
React Lazy Load Image Component
React Component to lazy load images and components using a HOC to track window scroll position.
Stars: ✭ 755 (+568.14%)
Mutual labels:  ssr, server-side-rendering
Fast React Render
[DEPRECATED] Use last versions of React and Node.js for better performance
Stars: ✭ 102 (-9.73%)
Mutual labels:  server-side-rendering, react-dom
React App
Create React App with server-side code support
Stars: ✭ 614 (+443.36%)
Mutual labels:  ssr, server-side-rendering
Ssr Window
Better handling for window object in SSR environment
Stars: ✭ 55 (-51.33%)
Mutual labels:  ssr, server-side-rendering
Hyperapp Render
Render Hyperapp to an HTML string with SSR and Node.js streaming support.
Stars: ✭ 93 (-17.7%)
Mutual labels:  ssr, server-side-rendering
Universal Starter
Angular 9 Universal repo with many features
Stars: ✭ 518 (+358.41%)
Mutual labels:  ssr, server-side-rendering
React Imported Component
✂️📦Bundler-independent solution for SSR-friendly code-splitting
Stars: ✭ 525 (+364.6%)
Mutual labels:  ssr, server-side-rendering
React Infinite Tree
The infinite-tree library for React.
Stars: ✭ 63 (-44.25%)
Mutual labels:  server-side-rendering, react-dom

react-async-bootstrapper 👢

Execute a bootstrap method on your React/Preact components. Useful for data prefetching and other activities.

npm MIT License Travis Codecov

TOCs

Introduction

This library is a simple implementation of react-tree-walker, allowing you to attach a bootstrap method to your React/Preact "class" components. I would highly recommend you review react-tree-walkers documentation so as to gain more familiarity with what is being wrapped up by react-bootstrapper.

I have created this implementation that responds to a bootstrap method to allow me to have a standard implementation that would allow for interop between multiple packages requiring a bootstrapping process. For example I have create react-async-component which provides code splitting support, and react-jobs which enables data fetching. Both packages use this library to allow for a single bootstrapping parse satisfying the needs of both.

Simple Example

import bootstrapper from 'react-async-bootstrapper'

// Our super naive global state. Don't copy this, it's just illustrative. You'd
// likely want to use something
const globalStateManager = {
  products: {},
}

class Product extends Component {
  // 👇
  bootstrap() {
    // Fetch our product and load up our state
    return fetch(`/api/products/${this.props.productId}`).then(response => {
      // store in our global state
      globalStateManager.products[this.props.productId] = response.json()
    })
  }

  render() {
    const product = globalStateManager.products[this.props.productId]
    return (
      <div>
        {product.name} - {product.price}
      </div>
    )
  }
}

const app = (
  <div>
    <h1>My favourite product</h1>
    <Product productId={1337} />
  </div>
)

// Now for the bootstrapping/rendering process (on a client/server)
bootstrapper(app)
  .then(() => {
    // Bootstrapping is complete, now when we render our application to the DOM
    // the global products state will be populated and so our components
    // should render immediately with the data.
    ReactDOM.render(app, document.getElementById('app'))
  })
  .catch(err => console.log('Eek, error!', err))

Yep, not a particularly useful idea in the context of executing on the front end only, but when doing server side rendering of your react application this pattern can be extremely useful.

API

The API is very simple at the moment, only exposing a single function.

bootstrapper

The default export of the library. The function that performs the magic.

const bootstrapper = require('react-async-bootstrapper')

or

import bootstrapper from 'react-async-bootstrapper'

Paramaters

  • app (React/Preact application/element, required)

    The react application you wish to walk.

    e.g. <div>Hello world</div>

  • options (Object, optional)

    Additional options/configuration. It currently supports the following values:

    • componentWillUnmount: Enable this to have the componentWillUnmount lifecycle event be executed during the bootstrapping process. Defaults to false. This was added as an experimental additional flag to help with applications where they have critical disposal logic being executed within the componentWillUnmount lifecycle event.
  • context (Object, optional)

    Any context you wish to expose to your application. This will become available to the entire application and could be useful for exposing configuration to your bootstrap methods.

    e.g. { myContextItem: 'foo' }

Returns

A Promise that resolves when the bootstrapping has completed.

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].