Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

React JS - "one more" framework

No description
by

Yevhenii Kravchenko

on 18 May 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of React JS - "one more" framework

Overview
Debugging
Chrome Extension
Virtual DOM
React.js - "one more" framework
Powered by Facebook
Since may 2013
Current version 0.13.2
React
~ 21k
Vivaldi, Brackets and Atom use React.js
Components (not a web componentы)
Just the UI (V in MVC)
JSX
Virtual DOM
Synthetic events
Isomorph friendly
One-way data flow
NOT a framework
Components
JSX
https://facebook.github.io/react/docs/jsx-in-depth.html
is a JavaScript syntax extension that looks similar to XML.
ProductItem
Products
Search
ES6 Syntax !
Hello World
Properties
http://facebook.github.io/react/docs/getting-started.html
http://fb.me/JSXTransformer-0.13.1.js
Transform on the fly
Transform "offline"
<script type="text/jsx ..."
npm install -g react-tools
jsx --watch src/ build/
browserify
webpack
...
Differences
http://facebook.github.io/react/docs/dom-differences.html
class
className
htmlFor
for
JSX is optional
VS
<div>
Hello, {this.props.name}
</div>
React.createElement("div", null, "Hello, ", this.props.name)
Props vs State
Props
State
Dynamic state of component
setState()
replaceState()
getInitialState()
Immutable component properties
Validateable types
setProps()
replaceProps()
this.state = {...} in constructor()
Immutable DOM
Re-render entire application instead of update function (like 90th)
It's
really
fast
Diff algorithm
v 0.13
Component Hooks (Lifecycle)
Unmounting
: componentWillUnmount
One way data flow
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Warnings
Mounting
: componentWillMount
Mounting
: componentDidMount
Updating
: componentWillReceiveProps
Updating
: shouldComponentUpdate
Updating
: componentWillUpdate
Updating
: componentDidUpdate
Demo
- Stefan Penner on The Future of Ember
Jest
Relay
GraphQL
Native
React Router
DOM
I hate CSS
CSS problems
Global variables
Elimination duplications and unused styles
Dependency management
Minification
Unclear behaviour
CSS in JS
Before next slide I want you to forget everything you know about web development
Keep an open mind :)
Inline Styles !!!
Global variables
Elimination duplications and unused styles
Dependency management
Minification
Unclear behaviour
Style definitions are local variables
Static linters
Module systems you want
Uglify, ...
Predictability increased
MVC does not scale
Rethinking best practices
React Router
Who is playing?
at SoftServe for
> 2 years
Web developer
https://twitter.com/kravtschenko
skype: evgeniy_kravtschenko
email: yevhenii.kravchenko@gmail.com
Full transcript