React 101

@ssaunier

React?

A JavaScript library used to build HTML

Setup

You need JavaScript in your terminal

Setup

You need a dependency manager

or

Quick Start

yarn global add create-react-app

npm install -g create-react-app

or

Boilerplate

Create an app

cd ~/code/lewagon create-react-app airbnb-clone cd airbnb-clone yarn start # or npm start

Structure

Our first Component

First Component

mkdir src/components touch src/components/hello.js

First Component

1. Import React

2. Define component

3. Implement render

4. Export component

First Component

1. Import React

2. Define component

3. Implement render

4. Export component

First Component

1. Import React

2. Define component

3. Implement render

4. Export component

First Component

1. Import React

2. Define component

3. Implement render

4. Export component

Render it!

props

Planning

This is what we want to build:

What are the components?

What are the components?

App

Flat

Map

Marker

Flat

<div class="flat"> <div class="flat-picture"></div> <div class="flat-title"></div> </div>

Flat Component

Flexbox

<div class="app"> <div class="main"> <div class="search"> </div> <div class="flats"> </div> </div> <div class="map"> </div> </div>

.app { display: flex; } .main { flex-basis: 60%; display: flex; flex-direction: column; } .map { flex-grow: 1; height: 100vh; top: 0; position: sticky; }

Flexbox

<div class="flats"> <div class="flat"></div> <div class="flat"></div> <div class="flat"></div> <div class="flat"></div> </div>

.flats { display: flex; flex-wrap: wrap; align-content: flex-start; }

.flat { flex-basis: calc(50% - 20px); margin: 10px; }

React State

Constructor

Source

github.com/lewagon/flats-boilerplate

Ajax

Map + Marker(s)

Google Map React

Event

Flat

What should happen when clicking on a flat picture?

Controlled Component

Search

<input type="text" placeholder="Search..." value={this.state.search} onChange={this.handleSearch} />

Thanks!

Going Further

Going Further

lewagon.com/react