We're spearheading the Angular industry with unparalleled expertise in Reactive programming using Angular. But we understand the importance of always being atop the trends in technology. The session was hosted with an interactive demo by Ashish, one of our awesome talents.

1. React 101
@akts

2. What is it ?
A JavaScript library used to build html

3. Setup

4. Quickstart
$ yarn global add create-react-app
(or)
$ npm install -g create-react-app

5. Boilerplate

6. Creating our react app
$ cd ~/Projects
$ create-react-app pok-homes
$ cd pok-homes
$ yarn start

7. Structure

8. Our first Component
$ mkdir src/components
$ touch src/components/hello.js

9. Anatomy of a component
● Import React
● Define component
● Implement render()
● export component

10. Components are dumb
Pass data between components
return <div>Hello {this.props.name}</div>;

11. Planning our App
● App
● Homes
● Map
● Marker

12. Flexbox
<div class="app">
<div class="main">
<div class="search">
</div>
<div class="homes">
</div>
</div>
<div class="map">
</div>
</div>
.homes {
display: flex;
flex-wrap: wrap;
align-content: flex;
}
.home {
flex-basis: calc(50% - 20px);
margin: 10px;
}
.app {
display: flex;
}
.main {
flex-basis: 60%;
display: flex;
flex-direction: column;
}
.map {
flex-grow: 1;
height: 100vh;
top: 0;
position: sticky;
}

13. React state & Component constructor
constructor(props) {
super(props);
this.state = {
...
};
}

14. Ajax
componentDidMount() {
...
}
fetch('https://foo.bar/homes.json')
.then(resp => resp.json())
.then(data => {
console.log(data);
});

15. Map & Markers
https://github.com/google-map-react/google-map-react

16. Fin
● https://www.lewagon.com/blog/introduction-to-react-js
● https://www.youtube.com/watch?v=yZ0f1Apb5CU
● https://devhints.io/yarn
Happy Hacking