Comment by lobster_johnson | Hacker News Reader

Comment by lobster_johnson | Hacker News Reader

Parent Full thread

lobster_johnson

> I first tried to do this: [...] ...which actually worked, but generated a React error message about an unmounted component.

I suspect that you were doing something wrong that triggered this error. Unmounting components based on state is perfectly idiomatic React, and I do it all the time:

    {this.state.mode === 'map' && <Map/>}

You pay for the added DOM work, of course, but this is usually negligible in my experience, especially in your case. You do have to make sure you follow the component lifecycle so that you don't try to use getDOMNode() or similar with a component that is not currently mounted.

How does React work under the hood. JavaScript would normally throw an error if it found <Map /> in the source code. How does React do this? Is it JS?

This is not React's, but a javascript preprocessor called JSX that compiles to JS (like LESS -> CSS).

http://facebook.github.io/react/docs/jsx-in-depth.html

Something like <Map foo={bar}/> would compile to a function call Map({foo: bar}). Behind the scenes, React is not dealing with HTML.

You can use React without JSX, but it's useful.

Is React a client-side framework, or server-side?

It's primarily client-side, but React components output a virtual representation of the DOM, so it's relatively simple to render a page on the server and return HTML.

Generally you run the JSX pre-processor server-side and then everything else gets run client-side.

It's a client-side framework. You'll generally run the JSX preprocessor as part of your website's build process (i.e. before uploading it to a server).

both; either

Reply on news.ycombinator.com