• Stars
    star
    109
  • Rank 319,077 (Top 7 %)
  • Language
    JavaScript
  • Created over 9 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Wherein I demonstrate that React components can be fetched asynchronously and dynamically loaded…

React Remote Components - A Demonstration

What if, we could reuse React components by dynamically loading them from remote URLs?

This is a demonstration of just such a technique.

Running the demo

  1. Clone this repository
  2. Install the React tools: npm install --global react-tools
  3. Optionally install a live reloading server: npm install --global live-server
  4. Compile the JSX source files to the build directory: jsx --watch src/ build/
  5. Optionally run the live reloading server: live-server
  6. Visit the test HTML (http://127.0.0.1:8080/test.html) page to see the result.

What's happening here?

We create two simple example React components, named SimpleComponent and GreeterComponent. These components are not very interesting by React standards and their behavior is purely illustrative. The important thing, is that we want to load these components remotely — e.g. at runtime, via an Ajax request.

To get started, in our main app.js file, we declare a simple Javacript object that describes the names of our remote components, their src URLs and optional props that can be passed to them.

We pass our list of remoteComponents to the loadRemoteComponents function, which returns a Promise.all that in turn returns an array of fulfilled promises, each returned from the loadComponent function.

The loadComponent function is where things get interesting. We take the name and src URL from a component (e.g. GreeterComponent and ./build/greeterComponent.js) and we make an XMLHttpRequest to the src URL to retreive the source code of our GreeterComponent. Note: this remotely fetched source code is from the ./build/ directory, which means it has already been compiled by jsx.

Once the compiled component code has been fetched from the remote, we evaluate the code in the global context of window. Note: this technique will probably need some refinement to cater to older browsers (E.g. IE6 et al).

The loadComponent function finally resolves its promise, returning an object containing a reference to the actual name of the newly evaluated component and any properties specified: E.g. {name: GreeterComponent, props: {name: 'Bob'}}.

When all the loadComponent promises have been resolved, we call the .then(loadApp) passing in the list of objects containing references to the newly evaluated remote components.

The loadApp function, calls React.render, inserting a single parent React component (MainComponent) into the DOM, passing in the remote components as the children property.

The MainComponent React component renders itself and then renders each of its children using React.createElement.

So what?

This is a demonstration, partly to satisfy my curiosity that it could be done, and partly because I actually want to use this technique to provide "hot loaded" code in projects that are not necessarily ready for React and modern Javascript build tools (E.g. Ruby on Rails).

More Repositories

1

inline_svg

Embed SVG documents in your Rails views and style them with CSS
Ruby
701
star
2

underway

Get started with GitHub Apps. Fast. ⚓️🚢
Ruby
33
star
3

datomic-tutorial

It's a start
Clojure
14
star
4

cloudflare-cache-purge-buildpack

Purges your Heroku application's Cloudflare cache on deployment
Shell
14
star
5

remote-svg

Client-side library to embed and transform remote SVG documents into a HTML page
JavaScript
9
star
6

tvos-pug

Write TVML templates in Pug (Formerly Jade) and wrap them in Javascript functions for use in a TVOS application
JavaScript
9
star
7

CppUTestScons

A starting point for TDDing in C++ using SCons & CppUTest
Python
9
star
8

counterstring

Counter strings are self documenting strings with respect to their length. This class will create counter strings of arbitrary length.
Ruby
7
star
9

dotfiles

Configuration files for bash, vim and more.
Vim Script
5
star
10

littlenote

Very simple note taking. Write little and often.
Ruby
3
star
11

cukes_sinatra_test

Example of end-to-end integration testing of a Sinatra app with Cukes, Capybara and Mechanize
Ruby
2
star
12

gauze

JavaScript that filters and sorts HTML elements
JavaScript
2
star
13

petrified

#apps4nsw dev day project involving heavy petting
JavaScript
2
star
14

rspec-experiments

Fiddling around with RSpec concepts
Ruby
1
star
15

missed-links

Aggregates URI from social media feeds
Ruby
1
star
16

http_post_parrot

Listens for HTTP POSTs on arbitrary routes and repeats what it hears
Ruby
1
star
17

inline_svg_test_app

A simple Rails app for local testing of the inline_svg gem
Ruby
1
star
18

strange

Make sense of time
Ruby
1
star