Let's React !

Yacine Rezgui

French Tunisian

Web Developer @ Import.io

github.com/yrezgui

@yrezgui

What is ReactJS ?

• Project created by Facebook
• Library for building user interfaces
• Used in Instagram and WhatsApp

Why I need to switch ?

I like my ng-* attributes

• Hard to debug Angular Expressions 
• Did you try +5000 bindings ?
• Damn $scope.$apply
• AngularJS 2 is too different bro'

Let's see the code

HTML in JavaScript ?!

JSX

JSX is a JS syntax extension that looks similar to XML

You can use a simple JSX syntactic transform with React

Virtual DOM

By keeping in memory the DOM,

ReactJS just re-renders the updated elements

State or Props ?

Lifecycle

• component (Will / Did / WillUn) Mount
• component (Should / Will / Did) Update
• getInitialState
• getDefaultProps

And if I want to play with innerHTML ?

Let's Render !

• render
• renderToString
• renderToStaticMarkup

Let's componentize our app !

Still want awesomeness ?

ImmutableJS

React Canvas

React Native

Thank you !

@yrezgui

github.com/yrezgui

medium.com/dev-rocket