REACT is an Open source view library created and maintained by facebook. It's a greattool to render the User Interface (UI) of modern web application.

1. @RajohnsonAndry
Modern web application
With
REACT

2. React?
An Open-Source view library
Created and maitained by
Facebook

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 -g create-react-app

6. Boilerplate
,,,,

7. Create an app
cd ~/code/demo
yarn create react-app my-app
cd my-app
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
https://github.com/andryjohn/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!
@RajohnsonAndry