This document discusses React.js and web development. It begins with an introduction to React.js and its history. It then covers key React concepts like components, JSX syntax, and the virtual DOM. It discusses why the author likes React, describing it as easy to learn and use with true reusable components. It also provides an overview of how the author uses React on both the client-side with tools like Webpack, Babel, and Flux and the server-side with Node.js, Express, MongoDB, and other technologies.

1. React.js
@emadb
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

3. History of web development…

5. MV(something) in the
browser

8. Enterprise Javascript

11. Quiz time!

12. What’s the difference between
Service, Factory, Provider?

14. UNLEARN EVERYTHING
@michelebertoli

15. var HelloWorld = React.createClass({
render: function() {
return (
<h1>
Hello world
</h1>
);
}
});
React.render(<HelloWorld />,
document.body);

17. Whooot?
• Markup and behaviour
• Separation of concerns
• Template language?
• Components
• JSX syntax

18. var HelloWorld = React.createClass({
displayName: "HelloWorld",
render: function() {
return React.createElement("h1",
null, "Hello World");
}
});
React.render(
React.createElement(HelloWorld, null),
document.body);

19. COMPONENTS

23. render
Every time the state change the component render itself

24. DOM is slow
Javascript that access to the DOM is slow
console.dir(document.createElement('div'));
A DIV contains about 135 first level properties/function (700 on
second level).

25. Virtual DOM
• Our code act on a fake DOM (virtual dom)
• React.js take care of keep virtual DOM and real DOM
synchronised
• Every ReactElement is a light, stateless, immutable,
virtual representation of a DOM Element
• A virtual DOM div element contains only 6 properties.

27. Why I like react so much
• Easy to learn, easy to use
• True reusable components (1 single file per component)
• Functional approach
• Human error messages
• Active community

28. I said “Easy to learn!”
Less than 1 hour to learn everything you
need to be productive.
Challenge

29. How I use it

30. Server side
• Node.js Express api
• MongoDb/Mongoose
• Passport
• Mocha/Chai

32. Client side
Npm
Webpack
Hot-reload
Babel.js
Eslint
LibSass

33. npm
var React = require(‘react’)
$ npm install react —save
import React from ‘react’

34. Everything you need is in your
package.json

35. • A transpiler
• Converts ES6 javascript to “old” ES5.
• Compiles JSX files to plain js.

37. Webpack
Bundles javascript, css, sass, fonts and images with their
dependencies into assets

40. Superagent
Super Agent is light-weight progressive ajax API crafted
for flexibility, readability, and a low learning curve after
being frustrated with many of the existing request APIs. It
also works with Node.js!

43. Flux

44. Flux:Actions
ActionCreatorReact View
Dispatcher
Action
API

45. Flux: Dispatcher
Store
Action
Dispatcher
Store Store

46. Flux: Store
Store
React View
Dispatcher
Change
event
Request new
state

48. Few more things…
• Server side rendering
• Redux
• Relay

50. Thank you!
Emanuele DelBono
@emadb
https://github.com/emadb/spot-react