le wagon - react 101
TRANSCRIPT
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
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