reactive programming with reactjs programming with...are hard to render on the server. this makes...
TRANSCRIPT
![Page 1: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/1.jpg)
Reactive programming
in JavaScript with Reactjs
JFokus 3. february 2015
![Page 2: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/2.jpg)
Forget about…
Established truths
Everything you thought you knew about making web apps
![Page 3: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/3.jpg)
Relax
It’s going to be okay
![Page 4: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/4.jpg)
Hello, I’m Sven
I am a frontend developer from Inmeta Consulting in Norway
![Page 5: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/5.jpg)
The ProblemHow can we build large apps with data
that changes over time?
But: local state that changes over time is the root of all evil
![Page 6: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/6.jpg)
ModelViewControllerThe MVC pattern was developed in
1979
It was deviced as a general solution to the problem of users controlling a
large and complex data set.
It’s not 1979 anymore…
![Page 7: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/7.jpg)
The MVC problemThin views / templates
Models and controllers that grows…
…and grows
until most of your time is spent keeping them in sync
![Page 8: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/8.jpg)
We need a better model
React
A JavaScript library for building composable user interfaces
![Page 9: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/9.jpg)
React gives youA lightweight virtual DOM
Powerful views without templates
Unidirectional data flow
Explicit mutation
![Page 10: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/10.jpg)
A React app consists of
Reusable components
Components makes code reuse, testing, and separation of concerns easy.
![Page 11: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/11.jpg)
Not just the VIn the beginning, React was presented
as the V in MVC.
This is at best a huge simplification.
React has state, it handles mapping from input to state changes, and it
renders components. In this sense, it does everything that an MVC does.
![Page 12: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/12.jpg)
![Page 13: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/13.jpg)
<NewsFeed>
![Page 14: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/14.jpg)
<NewsItem>
![Page 15: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/15.jpg)
<ItemComments>
<ItemTitle>
<ItemCover>
![Page 16: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/16.jpg)
NewsItem.jsx
![Page 17: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/17.jpg)
NewsItem.jsx
![Page 18: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/18.jpg)
NewsItem.jsx
![Page 19: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/19.jpg)
NewsItem.jsx
![Page 20: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/20.jpg)
JSX
A JavaScript XML based extension that makes it easy to mix HTML with
JavaScript
![Page 21: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/21.jpg)
![Page 22: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/22.jpg)
Component Life Cycle
Initial render Get Initial State
Component Will Mount
Render
Component Did Mount
Get Default Props
Called immediately after render
Set initial value of this.state
Set initial value of this.props
Return JSX for component Never update state here
Calling setState here does not cause a re-‐render
![Page 23: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/23.jpg)
Component Life Cycle
Component will receive props
Should component update
Component will update
Render
Component did update
-‐ Takes nextprops as input -‐ Previous props available as this.props -‐ Calling setState() here does not trigger re-‐render
Can abort render if you return false here. If false, componentWillUpdate and componentDidUpdate will not be called.nextProps, nextState available here Cannot use setState() here
Called immediately after render
NOT called for initial render
PROPS Change
![Page 24: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/24.jpg)
Component Life Cycle
Should component update
Component will update
Render
Component did update
Can abort render if you return false here. If false, componentWillUpdate and componentDidUpdate will not be called.
nextProps, nextState available here Cannot use setState() here
Called immediately after render
NOT called for initial render
STATE Change
![Page 25: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/25.jpg)
Component Life Cycle
These methods do not have access to the component’s props or state
StaticsThe statics object allows you to define static methods that can be invoked on the component without creating instances
![Page 26: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/26.jpg)
Component Life Cycle
Component will unmountInvoked immediately before component is unmounted. For cleanup, invalidating timers etc.
Unmount
![Page 27: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/27.jpg)
Virtual DOMRender the DOM
Build a new Virtual DOM
Compute the minimal sets of mutation and queue
Diff with old DOM
Batch execute all updates EACH UPDATE
![Page 28: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/28.jpg)
State PropsFor interactivity in the component. Mutable data
For data passed to the component Should be treated as
immutable.
![Page 29: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/29.jpg)
StateIs updated by calling setState()
Every call to setState() triggers a re-‐render
(except when called within componentDidMount)
![Page 30: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/30.jpg)
Only the changes are rendered
Everything is re-‐rendered
React jQuery
![Page 31: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/31.jpg)
Server Rendering
Traditional JavaScript applications are hard to render on the server. This makes the app uncrawlable, and you
miss out on SEO.
![Page 32: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/32.jpg)
Server RenderingFortunately, React can handle this
with ease.
All you need to do is call renderToString instead of render
and you’ve got a SEO ready component.
![Page 33: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/33.jpg)
Server RenderingAnother option is to call
renderToStaticMarkup.
This is similar to renderToString, except this doesn't create extra DOM
attributes such as data-react-id which is useful if you want to use React as a
simple static page generator.
![Page 34: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/34.jpg)
Testing
![Page 35: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/35.jpg)
JEST
Built on top of the Jasmine test framework, using familiar
expect(value).toBe(other) assertions
![Page 36: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/36.jpg)
JEST
Automatically finds tests to execute in your repo
![Page 37: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/37.jpg)
JEST
Automatically mocks dependencies for you when running your tests
![Page 38: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/38.jpg)
JEST
Allows you to test asynchronous code synchronously
![Page 39: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/39.jpg)
JEST
Runs your tests with a fake DOM implementation (via jsdom) so that your tests can run on the command
line
![Page 40: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/40.jpg)
JEST
In short, if you want to test React code, use JEST.
![Page 41: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/41.jpg)
Practical exampleUnclicked State Clicked State
![Page 42: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/42.jpg)
![Page 43: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/43.jpg)
![Page 44: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/44.jpg)
![Page 45: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/45.jpg)
![Page 46: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/46.jpg)
![Page 47: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/47.jpg)
![Page 48: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/48.jpg)
![Page 49: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/49.jpg)
![Page 50: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/50.jpg)
![Page 51: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/51.jpg)
![Page 52: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/52.jpg)
![Page 53: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/53.jpg)
![Page 54: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/54.jpg)
![Page 55: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/55.jpg)
RoutingReact does not have a native router
There are however a few to choose between
React-routerReact-router-component
Monorouter
![Page 56: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/56.jpg)
React-‐router example
![Page 57: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/57.jpg)
Inline Styles
![Page 58: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/58.jpg)
So inline styles, eh?
There’s actually a good reason for doing this.
![Page 59: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/59.jpg)
So inline styles, eh?
CSS pollutes the global namespace
At scale, this is bad because it leads to paralysis and confusion.
Can I add this element, or change this class? If you’re not sure, you’re in
trouble.
![Page 60: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/60.jpg)
So inline styles, eh?
Inline styles avoid this, because the CSS is scoped to the component you’re
working with.
![Page 61: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/61.jpg)
How it looks
![Page 62: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/62.jpg)
Not your 80s inlineIt's not really "inline". We merely pass a reference to a rule that’s somewhere else in the file, just like
CSS.
Style is actually a much better name than class. You want to “style” the element, not “class” it.
Finally, this is not applying the style directly, this is using React virtual DOM and is being diff-ed the
same way elements are.
![Page 63: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/63.jpg)
Still….
The goal is not to replace CSS as it’s done today. It’s simply focusing on the fundamental problem
with CSS and trying to solve it.
You do not have to use it. If you apply a className tag to your elements, you can use CSS as you’ve
always done.
![Page 64: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/64.jpg)
Mixins
Basically, pure React components that can be incorporated in your other
components
![Page 65: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/65.jpg)
Mixins
Components that use mixins inherits state and props from the mixin
![Page 66: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/66.jpg)
Mixins
![Page 67: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/67.jpg)
Last words
Virtual DOM, a native event system and other technicalities are nice
But Reacts true strength are actually none of these
![Page 68: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/68.jpg)
Last wordsReacts true strengths are:
Unidirectional Data Flow
Freedom from Domain Specific Language (it’s all JavaScript)
Explicit Mutation
![Page 69: Reactive programming with Reactjs programming with...are hard to render on the server. This makes the app uncrawlable, and you miss out on SEO. ServerRendering Fortunately, React can](https://reader034.vdocuments.net/reader034/viewer/2022051601/5abd92587f8b9a8e3f8bf499/html5/thumbnails/69.jpg)
Questions?Source Code available at
github.com/svenanders/react-‐tutorial
http://learnreact.robbestad.com