In 2013, Facebook released a new JavaScript framework which would soon be adopted by loads of companies to build complex Front-End web applications. React is now mature, a great community quickly formed and produced by-products and extension like Redux or React Native. This workshop aims at showcasing the basics of React and discuss when choosing it the most relevant.

1. React 101

2. React?
A JavaScript library used to build HTML

3. Setup
You need JavaScript in your terminal

4. Setup
You need a dependency manager
or

5. Quick Start
yarn global add create-react-app
or
npm install –-global create-react-app

6. Boilerplate

7. Create an app
cd ~/code/meetup
create-react-app airbnb-clone
cd airbnb-clone
yarn start # or npm start

8. Structure

9. Our first Component

10. First Component
mkdir src/components
touch src/components/hello.js

11. First Component
1. Import React
2. Define component
3. Implement render
4. Export component

12. First Component
1. Import React
2. Define component
3. Implement render
4. Export component

13. First Component
1. Import React
2. Define component
3. Implement render
4. Export component

14. First Component
1. Import React
2. Define component
3. Implement render
4. Export component

15. Render it!

16. props

18. Planning

19. This is what we want to build:

20. What are the components?

21. What are the components?
App Flat
Map
Marker

22. Flat

23. <div class="flat">
<div class="flat-picture"></div>
<div class="flat-title"></div>
</div>
Flat Component

24. 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;
}

25. 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;
}

26. React State

27. Constructor

28. Source
github.com/andry-rajohnson/flats-boilerplate

29. Ajax

30. Map + Marker(s)

31. Google Map React

32. Event

33. Flat
What should happen when clicking on a flat picture?

34. Controlled Component

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

36. Thanks!

37. Going Further