7 ms·

React.js in Real Life at Codecademy

111 points by ancatrusca 12y ago

filearts 12y ago
Bit of a shameless plug, but you can now get your flux on straight in Plunker http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf in a familiar UX. I've included minimal starter template for React.js and React.js (with addons) as well as transparent jsx transformation. I'm open to more complete starter examples if anyone better at React.js wants to contribute them!
- bcjordan 12y ago
  I'd love to see a JSPM version of that to easily bring in dependencies * http://jspm.io/ http://jspm.io/ * https://www.youtube.com/watch?v=iukBMY4apvI https://www.youtube.com/watch?v=iukBMY4apvI
- luisrudge 12y ago
  As a matter of fact, I created a really simple react yeoman generator[0]. All other generators are pretty bloated with lots of stuff. Maybe that's ok for new applications, but I was just trying to learn react and they all were heavily bloated. [0] https://github.com/luisrudge/generator-simple-react-browserify https://github.com/luisrudge/generator-simple-react-browseri...
- deleted 12y ago
  [deleted]
- deleted 12y ago
  [deleted]
- modi123 12y ago
  test
- modi123 12y ago
  test
- deleted 12y ago
  [deleted]
- deleted 12y ago
  [deleted]
- deleted 12y ago
  [deleted]
sillysauce 12y ago
This article kind of comes at a perfect time for me. I just recently started working on a project with a code editor and I've been battling for a while how to communicate changes through react. I plan to use ace, and require the ability to get and apply patches as the user types into the ace editor, get code when they need to compile, as well as be able to modify other properties of the editor. At the most complex level, I need to keep two ace editors in-sync, doing this with cure javascript and ace is simple, as you just need to apply a patch from one editor to the other. Building large and complex applications has always been the big problem for me with React, and the author states it right up front we ran into issues finding examples of how React could apply to an application as complex as ours, given that most tutorials focus on the specifics of toy-sized demo apps as opposed to more general discussions of the problems specific to larger applications. This is just something that is going to take time though.
- natmaster 12y ago
  This is why they gave the presentation on Flux, which is architecturally how Facebook solves this problem. Basically the first principal you must learn is to find the lowest common ancestor to store state. (http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html http://facebook.github.io/react/blog/2013/11/05/thinking-in-...) After realizing this the immediate thing people do is pass call backs through children so grandchildren's actions can communicate with where the state is. This leaks through all the components however, which is why Flux separates actions out into something that all the components have access to.
  - insin 12y ago
    Worth pointing out that you don't need a full Flux implementation to get the benefits of going sideways to an action module: https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md https://github.com/ryanflorence/react-training/blob/gh-pages...
- adamnemecek 12y ago
  this is something i really like about ember. there's a good number of large scale open source projects that you can steal ideas from.
uptown 12y ago
Just started looking into React yesterday. What I've read thus far doesn't discuss your server-side at all. Is it agnostic to what's running on your server ... any JSON-based RESTful back-end will do, or are there benefits to using a specific stack for your back-end?
- cbee17 12y ago
  React is indeed agnostic to your server-side stack. Only thing is you'll need a node.js server if you want server-side rendering. (Codecademy runs ours separately from the rails app so we can do server side rendering.)

111 points by ancatrusca 12y ago

Bit of a shameless plug, but you can now get your flux on straight in Plunker http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf in a familiar UX. I've included minimal starter template for React.js and React.js (with addons) as well as transparent jsx transformation. I'm open to more complete starter examples if anyone better at React.js wants to contribute them!

bcjordan 12y ago
I'd love to see a JSPM version of that to easily bring in dependencies * http://jspm.io/ http://jspm.io/ * https://www.youtube.com/watch?v=iukBMY4apvI https://www.youtube.com/watch?v=iukBMY4apvI
luisrudge 12y ago
As a matter of fact, I created a really simple react yeoman generator[0]. All other generators are pretty bloated with lots of stuff. Maybe that's ok for new applications, but I was just trying to learn react and they all were heavily bloated. [0] https://github.com/luisrudge/generator-simple-react-browserify https://github.com/luisrudge/generator-simple-react-browseri...
deleted 12y ago
[deleted]
deleted 12y ago
[deleted]
modi123 12y ago
test
modi123 12y ago
test
deleted 12y ago
[deleted]
deleted 12y ago
[deleted]
deleted 12y ago
[deleted]

sillysauce 12y ago

This article kind of comes at a perfect time for me. I just recently started working on a project with a code editor and I've been battling for a while how to communicate changes through react. I plan to use ace, and require the ability to get and apply patches as the user types into the ace editor, get code when they need to compile, as well as be able to modify other properties of the editor. At the most complex level, I need to keep two ace editors in-sync, doing this with cure javascript and ace is simple, as you just need to apply a patch from one editor to the other. Building large and complex applications has always been the big problem for me with React, and the author states it right up front we ran into issues finding examples of how React could apply to an application as complex as ours, given that most tutorials focus on the specifics of toy-sized demo apps as opposed to more general discussions of the problems specific to larger applications. This is just something that is going to take time though.

natmaster 12y ago
This is why they gave the presentation on Flux, which is architecturally how Facebook solves this problem. Basically the first principal you must learn is to find the lowest common ancestor to store state. (http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html http://facebook.github.io/react/blog/2013/11/05/thinking-in-...) After realizing this the immediate thing people do is pass call backs through children so grandchildren's actions can communicate with where the state is. This leaks through all the components however, which is why Flux separates actions out into something that all the components have access to.
- insin 12y ago
  Worth pointing out that you don't need a full Flux implementation to get the benefits of going sideways to an action module: https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md https://github.com/ryanflorence/react-training/blob/gh-pages...
adamnemecek 12y ago
this is something i really like about ember. there's a good number of large scale open source projects that you can steal ideas from.

uptown 12y ago

Just started looking into React yesterday. What I've read thus far doesn't discuss your server-side at all. Is it agnostic to what's running on your server ... any JSON-based RESTful back-end will do, or are there benefits to using a specific stack for your back-end?

cbee17 12y ago
React is indeed agnostic to your server-side stack. Only thing is you'll need a node.js server if you want server-side rendering. (Codecademy runs ours separately from the rails app so we can do server side rendering.)