Introduction to React Johann Romefort Engineering Evangelist at Stylight follow Johann : @romefort follow Stylight : @codetailors 

It’s the latest hot thing 

Who uses React? 

Hacker News Hiring Trends September 2015 

Fast Growing Community ngmodules.com react-components.com 1y ago: Today: 870 modules less than 100 modules 1600 modules 1259 modules 

What is React? “A Javascript Library for building (composable) user interfaces” 

React is not: • Another MVC framework: React is just the V in MVC. • It does not use templates: • everything is broken down into components assembled by Javascript
 

Why React? • Simple and Performant • Declarative • Virtual DOM • Everything is a component • Small: Just a library, not a framework • Unidirectional Data-flow • Isomorphic Javascript 

Simple and Performant • No complicated API to learn • mixing markup and code seems like an heresy at first • but it simplifies a lot of things 

What makes UI hard to build? • Human verified: Very hard to automate testing • Lots of state • by simplifying the markup, DOM manipulation and data flow, React tried to make things more predictable by reducing complexity. 

The Virtual DOM 

What’s a Virtual DOM anyway? • Probably the main reason you’ll love React • Mutating the DOM is the most expensive operation • Batches mutation into Virtual DOM • React maintain a virtual representation of the DOM in memory so it can only mutate the parts of the DOM that need to be updated via a Diff algorithm 

Re-rendering • 1 - Build new Virtual DOM subtree • 2 - Diff the new virtual DOM against old one • 3 - Compute minimal set of DOM mutations • 4 - Batch execute updates 

Everything is a component • They are • Composable • Reusable • maintainable 

React Component Lifecycle • Mounting • componentWillMount • componentDidMount • Updating • componentWillReceiveProps • shouldComponentUpdate • componentWillUpdate • componentDidUpdate • Unmounting • componentWillUnmount 

Unified one-way dataflow • Simpler to reason about • Events flow up, Data flows down • reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow. • No databinding like in AngularJS • render method is just called everytime the data changes 

Props vs State • props and state are JS Objects • Props are immutable: Components cannot change their props but are responsible for putting together the props of their child components • State starts with default value but can be mutated most likely from a user event • State are internals to components and “private” 

JSX 

What’s JSX? • JSX is a JavaScript syntax extension • It’s basically XML in your JS :) • You don’t have to use it if you don’t want to 

Isomorphic JS • Shared JavaScript that runs on both the client & server • On first load: server-rendered HTML • Then client-side JS take over. • Faster loading time :) 

No content

Hello React app.js app.html 

No content

React Dev Tools 

Thank You! All the meetups we are organising: http://meetup.com/stylight-tech-events Follow us on twitter: @codetailors