5 ms·

Honest noob question, what's with all the hype about React? Edit: Awesome replies, thank you!

by noobie 11y ago

natmaster 11y ago
It's like if you've been programming in C all your life and suddenly discover python
Sir_Cmpwn 11y ago
It fundamentally changes the way we think about frontend web development in a very positive way. It makes things more testable, reliable, fast, and easier to write. Combined with things like Redux we also get crazy features like time travel.
- rimantas 11y ago
  If your are optimizing for the development, you ar doing it wrong. So sad to see years of effort on making web more accessible thrown out of the window. How do react/angular/whatever sites work with assistive technologies like JAWS? The first thing learning about these frameworks should be when not to use them.
  - Sir_Cmpwn 11y ago
    There's nothing about React that makes it worse for screen readers.
  - bphogan 11y ago
    I spend a lot of time worrying about this because I consult on accessibility issues, I an an accessibility advocate, and I am a low vision computer user. Provided that developers use the proper HTML tags and ARIA roles, there shouldn't be any different issues here than with other JS libraries. However, I want to stress that React, Ember, and Angular are amazing tools for apps, but if you are using them just to render static content, you're just inviting all kinds of accessibility issues that server-side rendering solved years ago. Web servers are optimized to serve static content quickly. Sending JSON to the client so the client can render HTML for a blog post or news article seems pretty wasteful, and again, invites accessibility issues that don't need to be there.
robertfw 11y ago
- Great way to build component based UIs - Combined with immutable state manager like Redux, it can dramatically simplify front end development. I used to hate working on website frontends. Tangled webs of event handlers and dom mutation. React got rid of the mess and I once again enjoy working on the front end.
hathawsh 11y ago
From my point of view, React brings two important ideas to web app development: 1. The virtual DOM. When I'm writing jQuery-based code, I have to write both a component template and code that updates the DOM in response to input; when I'm writing code for a virtual DOM, the component template is sufficient to update the DOM and I don't have to write that extra code, so there are fewer chances for bugs to creep in. 2. HTML-like syntax embedded in Javascript (JSX). I didn't like this at first until I configured Sublime Text to highlight embedded HTML correctly. Embedded HTML has pros and cons, but I think it's a net positive. React projects also typically include new tech like ES2015, webpack, hot code reloading, and Redux with its time-traveling debugger. You can build your own stack that uses a virtual DOM library, embedded HTML, ES2015, and so on, but it's helpful to start with a common stack that many people understand. That's why React is interesting.
- up_and_up 11y ago
  > I didn't like this at first until I configured Sublime Text to highlight embedded HTML correctly Can you share your sublime settings or syntax configuration you are using?
  - mrcarrot 11y ago
    I'm not the parent, but I wrote this [1] a year ago, and I think at least the first section still works for getting JSX syntax highlighting working. [1]: http://petethompson.net/blog/js/2015/02/25/sublime-text-3-and-modern-js/ http://petethompson.net/blog/js/2015/02/25/sublime-text-3-an...
  - hathawsh 11y ago
    I follow Dan Abramov's recommendations: https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48 https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c...
- foxhedgehog 11y ago
  Just a note paraphrasing a Medium post that I encountered that extends point 2: it's a lot more robust to work with a framework that essentially puts HTML into Javascript rather than many alternatives, which essentially do the reverse. Javascript is a lot more complex than HTML, and yet most of the alternative JS frameworks attempt to compress some version of its logic into templating.
pluma 11y ago
To build on what hathawsh said: 1. Virtual DOM -- but this also includes DOM diffing, which makes it extremely efficient to re-render "the entire app" whenever a change happens (because you're not actually rendering it all but you largely don't have to know that). 2. JSX -- but unlike HTML this is just syntactic sugar for the underlying API. It may look like someone got HTML in your JS but it's really just syntax for nesting components and the rest is plain old JavaScript (compared to HTML templates where you have to learn a proprietary template language to do the same things you can already do in JS). 3. Unidirectional (one-way) data flow with pure components. This isn't enforced by React itself but if you stick to constructing your components this way (which companion libraries like Redux encourage you to do), your entire application becomes easier to reason about because you can think of your React code as one giant render function. A lot of these concepts have appeared in other libraries and frameworks but prior to React we used to think that Angular 1's two way bindings were the holy grail (despite the countless complexities it brought in real applications).
gorkemyurt 11y ago
No one mentioned code sharing between server side and the client side! (There are other ways to achieve this other frameworks/libraries are catching up) If you have a node.js server you can use react for both server side rendering and client side rendering.. So that you get the SS rendering advantages like fast initial page load and SEO but also have a very dynamic web app after the initial render.
- spinlock 11y ago
  Have you built an app that does this? I'm interested in what the overhead is in setting it up vs. Ember's fast-boot.
- frankthedog 11y ago
  Does server side rendering actually provide a boost in SEO these days? I know google renders JS apps (would be pretty silly of them to create angular if they didn't) and indexes SPAs, but am unsure on the other search engines.
  - JDDunn9 11y ago
    No. Google and Bing can index JS apps just fine, however many social sites still don't pull the title/descriptions from dynamically generated pages when you click the sharing button.
jeffchien 11y ago
In addition to everyone else's replies, React Native is starting to take off as a next-generation Cordova: Javascript code using native APIs and native UI components rather than using JS and HTML in WebView using native APIs.
gmjosack 11y ago
At first I was really turned off by JSX. HTML in your JavaScript? Yuck! Then I migrated a 12k lines JS + 4k lines Angular templates to TypeScript. I didn't get any of the benefit of static typing in all of those html files. That was really upsetting to me. Getting compile time static safety on JSX components is awesome.
jwr 11y ago
Let me provide a different viewpoint. React is important for ClojureScript developers for slightly different reasons. It is a well-maintained solution for quickly rendering component-based applications based on immutable data structures. In other words, you can think of the user interface as a function of your app's state, where the state is neatly kept in one place, instead of smeared all over the code. And since ClojureScript has excellent immutable data structures, you get great performance right out of the box. Things that do not need to be re-rendered aren't. So, when React arrived it fit like a well-designed glove. Suddenly one could easily create complex apps with few lines of code and great performance. As a side note, there are some aspects of React that we don't care about. JSX is one: various lisp-like languages have been using vector/list syntax for HTML for years, so in ClojureScript you don't have to use a separate syntax or pre-process your files: your functions just return nested vectors with HTML elements. Much more natural.

Honest noob question, what's with all the hype about React? Edit: Awesome replies, thank you!

by noobie 11y ago

Honest noob question, what's with all the hype about React? Edit: Awesome replies, thank you!

natmaster 11y ago

It's like if you've been programming in C all your life and suddenly discover python

Sir_Cmpwn 11y ago

It fundamentally changes the way we think about frontend web development in a very positive way. It makes things more testable, reliable, fast, and easier to write. Combined with things like Redux we also get crazy features like time travel.

rimantas 11y ago
If your are optimizing for the development, you ar doing it wrong. So sad to see years of effort on making web more accessible thrown out of the window. How do react/angular/whatever sites work with assistive technologies like JAWS? The first thing learning about these frameworks should be when not to use them.
- Sir_Cmpwn 11y ago
  There's nothing about React that makes it worse for screen readers.
- bphogan 11y ago
  I spend a lot of time worrying about this because I consult on accessibility issues, I an an accessibility advocate, and I am a low vision computer user. Provided that developers use the proper HTML tags and ARIA roles, there shouldn't be any different issues here than with other JS libraries. However, I want to stress that React, Ember, and Angular are amazing tools for apps, but if you are using them just to render static content, you're just inviting all kinds of accessibility issues that server-side rendering solved years ago. Web servers are optimized to serve static content quickly. Sending JSON to the client so the client can render HTML for a blog post or news article seems pretty wasteful, and again, invites accessibility issues that don't need to be there.

robertfw 11y ago

- Great way to build component based UIs - Combined with immutable state manager like Redux, it can dramatically simplify front end development. I used to hate working on website frontends. Tangled webs of event handlers and dom mutation. React got rid of the mess and I once again enjoy working on the front end.

hathawsh 11y ago

From my point of view, React brings two important ideas to web app development: 1. The virtual DOM. When I'm writing jQuery-based code, I have to write both a component template and code that updates the DOM in response to input; when I'm writing code for a virtual DOM, the component template is sufficient to update the DOM and I don't have to write that extra code, so there are fewer chances for bugs to creep in. 2. HTML-like syntax embedded in Javascript (JSX). I didn't like this at first until I configured Sublime Text to highlight embedded HTML correctly. Embedded HTML has pros and cons, but I think it's a net positive. React projects also typically include new tech like ES2015, webpack, hot code reloading, and Redux with its time-traveling debugger. You can build your own stack that uses a virtual DOM library, embedded HTML, ES2015, and so on, but it's helpful to start with a common stack that many people understand. That's why React is interesting.

up_and_up 11y ago
> I didn't like this at first until I configured Sublime Text to highlight embedded HTML correctly Can you share your sublime settings or syntax configuration you are using?
- mrcarrot 11y ago
  I'm not the parent, but I wrote this [1] a year ago, and I think at least the first section still works for getting JSX syntax highlighting working. [1]: http://petethompson.net/blog/js/2015/02/25/sublime-text-3-and-modern-js/ http://petethompson.net/blog/js/2015/02/25/sublime-text-3-an...
- hathawsh 11y ago
  I follow Dan Abramov's recommendations: https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48 https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c...
foxhedgehog 11y ago
Just a note paraphrasing a Medium post that I encountered that extends point 2: it's a lot more robust to work with a framework that essentially puts HTML into Javascript rather than many alternatives, which essentially do the reverse. Javascript is a lot more complex than HTML, and yet most of the alternative JS frameworks attempt to compress some version of its logic into templating.

pluma 11y ago

To build on what hathawsh said: 1. Virtual DOM -- but this also includes DOM diffing, which makes it extremely efficient to re-render "the entire app" whenever a change happens (because you're not actually rendering it all but you largely don't have to know that). 2. JSX -- but unlike HTML this is just syntactic sugar for the underlying API. It may look like someone got HTML in your JS but it's really just syntax for nesting components and the rest is plain old JavaScript (compared to HTML templates where you have to learn a proprietary template language to do the same things you can already do in JS). 3. Unidirectional (one-way) data flow with pure components. This isn't enforced by React itself but if you stick to constructing your components this way (which companion libraries like Redux encourage you to do), your entire application becomes easier to reason about because you can think of your React code as one giant render function. A lot of these concepts have appeared in other libraries and frameworks but prior to React we used to think that Angular 1's two way bindings were the holy grail (despite the countless complexities it brought in real applications).

gorkemyurt 11y ago

No one mentioned code sharing between server side and the client side! (There are other ways to achieve this other frameworks/libraries are catching up) If you have a node.js server you can use react for both server side rendering and client side rendering.. So that you get the SS rendering advantages like fast initial page load and SEO but also have a very dynamic web app after the initial render.

spinlock 11y ago
Have you built an app that does this? I'm interested in what the overhead is in setting it up vs. Ember's fast-boot.
frankthedog 11y ago
Does server side rendering actually provide a boost in SEO these days? I know google renders JS apps (would be pretty silly of them to create angular if they didn't) and indexes SPAs, but am unsure on the other search engines.
- JDDunn9 11y ago
  No. Google and Bing can index JS apps just fine, however many social sites still don't pull the title/descriptions from dynamically generated pages when you click the sharing button.

jeffchien 11y ago

In addition to everyone else's replies, React Native is starting to take off as a next-generation Cordova: Javascript code using native APIs and native UI components rather than using JS and HTML in WebView using native APIs.

gmjosack 11y ago

At first I was really turned off by JSX. HTML in your JavaScript? Yuck! Then I migrated a 12k lines JS + 4k lines Angular templates to TypeScript. I didn't get any of the benefit of static typing in all of those html files. That was really upsetting to me. Getting compile time static safety on JSX components is awesome.

jwr 11y ago

Let me provide a different viewpoint. React is important for ClojureScript developers for slightly different reasons. It is a well-maintained solution for quickly rendering component-based applications based on immutable data structures. In other words, you can think of the user interface as a function of your app's state, where the state is neatly kept in one place, instead of smeared all over the code. And since ClojureScript has excellent immutable data structures, you get great performance right out of the box. Things that do not need to be re-rendered aren't. So, when React arrived it fit like a well-designed glove. Suddenly one could easily create complex apps with few lines of code and great performance. As a side note, there are some aspects of React that we don't care about. JSX is one: various lisp-like languages have been using vector/list syntax for HTML for years, so in ClojureScript you don't have to use a separate syntax or pre-process your files: your functions just return nested vectors with HTML elements. Much more natural.