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

Let's React - DevRocket UK

By Yacine Rezgui

Let's React - DevRocket UK

  • 2,661