First of all ...

Robert Pop

Senior Software Engineer & Ninja Developer

But ... 

Not really...

Regular developer who enjoys coding

REACT

???

A JavaScript library for building user interfaces

Javascript ?!

The web has 3 main parts:

• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript

HTML (Hypertext Markup Language)

CSS (Cascading Style Sheets)

JavaScript

Back to React

Enchanted JavaScript for easily building User Interfaces (UI's) for our users

React Basics

• JSX

• Props

• State

• State & Data

JSX

Not HTML or String

Then what?

A syntax extension to JavaScript.

JSX produces React “elements”

Demo

Props

But first ...
Components !

Small independent functions that can be reusable.

"They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen."

Inputs? wait what ...

Let's do a demo

State

State is an object used to "describe" our components.

It allows us to write dynamic and interactive UI's.

But how ?

Remember... State is an object.

React knows when the state has changed.

Demo

I want to get Data

Remember when I said that react knows then the state has changed ?

Component Life Cycle

• ComponentDidMount

• ComponentWillUnMount

• ComponentDidUpdate

Demo

Demo 2

About that data

Demo again...