Intro to React

by Piero Savastano aka pieroit

Study material

- tutorial "Thinking in React"

- official tutorial

- official React documentation

- play with code online with codesandbox

What is React

javascript library
to build interactive user interfaces
data driven
open source
by Facebook Inc.

Composable and reusable components

<ContactList />

<Contact />

<Contact />

<Contact />

<Contact />

<Contact />

<Pic />

CUSTOM HTML !!!

<Call />

<Name />

<Phone />

Data driven: flux architecture

Data

UI

Action

First practice, then theory

1 - create GitHub account

2 - fork demo from codesandbox

3 - start creating

JSX

React code is written in JSX
JSX is a powered version of Javascript
JSX compiles to Javascript
JSX lets you put HTML inside Javascript code
exercise base JSX and composable JSX
online tutorial on JSX

let name = "Ivan"

let myJSX = (
    <div>
        Ciao {name} !
    </div>
)

props

passed from parent component
- ```
<MyComponent myProp="lol" />
```
read only
- ```
this.props.myProp
```

state

internal data

read and write

```
this.state.myState
```
```
this.setState({
  myState: 'open'
})
```

Components have props and state

React

By Piero Savastano

React

655

Piero Savastano