3 ms·

Can you build an SPA using just React? At the very least it seems like you'll need a URL router, and something like underscore.js to fill in the gaps.

by JDDunn9 12y ago

krat0sprakhar 12y ago
Correct! The author has sections outlined for React-router / Flux[0] which, I believe, will be used to detail out the other parts of the app. [0] - https://github.com/mikechau/react-primer-draft#react-router https://github.com/mikechau/react-primer-draft#react-router
mbrock 12y ago
The "URL router" in my current project begins with "onhashchange = function () {" and is essentially a five line conditional. It might grow to ten lines. All it does is set the root props based on query parameters. Not rocket science. I'm using Fetch.js and a Promise polyfill in order to do AJAX stuff (the native XHR API is a bit tedious). But basically the answer is: yes, you can! You can even write an SPA using nothing but the regular W3C APIs! React just makes it very easy to keep the DOM in sync with your application state.
- krat0sprakhar 12y ago
  I, for one, would love to know more about how this is done. Is your code open-sourced by any chance? Thanks!
masklinn 12y ago
> Can you build an SPA using just React? Sure. You may not want to depending how big and complex the application is, but it's definitely possible. A router and an immutable collections library (immutablejs or mori for instance) are very convenient additions, but by no means necessary. Hell you don't need a precompilation phase either by skipping JSX (and unsupported ES6 constructs).
pachydermic 12y ago
I had to write my own router, but the event system [1] allows you to catch left-clicks or touch events and let you decide how to handle them and the lifecycle functions [2] allow you to update history/URL params to reflect the state of your app. If you have app state which isn't easily serializeable, then you'd have difficulty providing a good URL structure for people but you'd probably have that issue even if you weren't using react. 1: https://facebook.github.io/react/docs/events.html https://facebook.github.io/react/docs/events.html 2: https://facebook.github.io/react/docs/component-specs.html https://facebook.github.io/react/docs/component-specs.html
danesparza 12y ago
Yes. I have built a few. The router I chose was Flatiron director (link: https://github.com/flatiron/director https://github.com/flatiron/director ). I used jQuery for Ajax calls. Everything else was React + Flux.
- yazaddaruvala 12y ago
  jQuery is a bit overkill for ajax, no? Checkout: http://youmightnotneedjquery.com/#ajax http://youmightnotneedjquery.com/#ajax Also: http://visionmedia.github.io/superagent/ http://visionmedia.github.io/superagent/
nwienert 12y ago
If you'd like an exceptionally easy way to bootstrap a SPA (whether you need mobile or not), try out reapp: https://reapp.io https://reapp.io It includes react-router, and quite a few good libraries/examples for flux, requests, immutable.js, etc.

Can you build an SPA using just React? At the very least it seems like you'll need a URL router, and something like underscore.js to fill in the gaps.

by JDDunn9 12y ago

Can you build an SPA using just React? At the very least it seems like you'll need a URL router, and something like underscore.js to fill in the gaps.

krat0sprakhar 12y ago

Correct! The author has sections outlined for React-router / Flux[0] which, I believe, will be used to detail out the other parts of the app. [0] - https://github.com/mikechau/react-primer-draft#react-router https://github.com/mikechau/react-primer-draft#react-router

mbrock 12y ago

The "URL router" in my current project begins with "onhashchange = function () {" and is essentially a five line conditional. It might grow to ten lines. All it does is set the root props based on query parameters. Not rocket science. I'm using Fetch.js and a Promise polyfill in order to do AJAX stuff (the native XHR API is a bit tedious). But basically the answer is: yes, you can! You can even write an SPA using nothing but the regular W3C APIs! React just makes it very easy to keep the DOM in sync with your application state.

krat0sprakhar 12y ago
I, for one, would love to know more about how this is done. Is your code open-sourced by any chance? Thanks!

masklinn 12y ago

> Can you build an SPA using just React? Sure. You may not want to depending how big and complex the application is, but it's definitely possible. A router and an immutable collections library (immutablejs or mori for instance) are very convenient additions, but by no means necessary. Hell you don't need a precompilation phase either by skipping JSX (and unsupported ES6 constructs).

pachydermic 12y ago

I had to write my own router, but the event system [1] allows you to catch left-clicks or touch events and let you decide how to handle them and the lifecycle functions [2] allow you to update history/URL params to reflect the state of your app. If you have app state which isn't easily serializeable, then you'd have difficulty providing a good URL structure for people but you'd probably have that issue even if you weren't using react. 1: https://facebook.github.io/react/docs/events.html https://facebook.github.io/react/docs/events.html 2: https://facebook.github.io/react/docs/component-specs.html https://facebook.github.io/react/docs/component-specs.html

danesparza 12y ago

Yes. I have built a few. The router I chose was Flatiron director (link: https://github.com/flatiron/director https://github.com/flatiron/director ). I used jQuery for Ajax calls. Everything else was React + Flux.

yazaddaruvala 12y ago
jQuery is a bit overkill for ajax, no? Checkout: http://youmightnotneedjquery.com/#ajax http://youmightnotneedjquery.com/#ajax Also: http://visionmedia.github.io/superagent/ http://visionmedia.github.io/superagent/

nwienert 12y ago

If you'd like an exceptionally easy way to bootstrap a SPA (whether you need mobile or not), try out reapp: https://reapp.io https://reapp.io It includes react-router, and quite a few good libraries/examples for flux, requests, immutable.js, etc.