The document outlines the steps to create a modern web application using React, a JavaScript library maintained by Facebook. It details the setup process, component structure, and basic styling using Flexbox for a housing application featuring listings and a map. Additionally, it includes code snippets for component creation and handling user input for a search feature.

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