Webinar React: Get Started, Concept and Implementation

1. REACT
INTRODUCTION TO

2. AGENDA
▸ WHAT IS REACT
▸ WHO IS USING REACT
▸ CORE CONCEPT OF REACT
▸ WHY REACT
▸ HOW TO USE REACT

3. ABOUT ME
HI, I’M RIZA
CURRICULUM DIRECTOR, CO-FOUNDER
“HACKTIV8 ADA UNTUK MENCIPTAKAN
DEVELOPER HANDAL YANG BISA BERJAYA DI
NEGARA SENDIRI"

4. ABOUT ME
HI, I’M RIZA
riza@hacktiv8.com
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
appscoast.id

5. REACT
WHAT

6. WHAT
REACT IS A JAVASCRIPT LIBRARY FOR BUILDING
USER INTERFACES. IT’S V OF MVC

7. USING REACT
WHO

8. WHO

9. WHO

10. https://www.facebook.com/FacebookforDevelopers/videos/10153626299178553/

11. REACT CORE CONCEPT

12. Component
One Way Data Flow
Virtual DOM

13. In React, we build component, not template

14. <CommentBox />
<CommentList />
<Comment />
<CommentForm />

15. Unidirectional Data Flow

16. DOM VIRTUAL DOM

17. REACT COMPONENTS VIRTUAL DOM
DIFF-ING THE DOMBROWSER’S DOM
VIRTUAL DOM

21. SEPARATION OF CONCERN

23. WTF???!!

24. 2. Get template
as string
3. Append data
to template string
1. Request
4. Send template to client as HTML
Controller View/Template

25. 1. Request
Controller
2. Send template to
client as Virtual DOM

26. WHAT JSX ACTUALLY DOING FOR YOU

27. THERE IS SO MANY
ALTERNATIVES, SO WHY
REACT??!

28. React /
Native
Browser
Windows
Desktop
XBOX
Windows
Phone
Android
Tizen
Netflix
iOSiOS
LEARN ONCE, WRITE ANYWHERE

29. VIRTUAL DOM IS
CRAZY FAST!

30. COMPONENT-BASED
IS THE FUTURE

31. GREAT DEBUGGING TOOLS

32. AND THE BRAINS BEHIND
FACEBOOK ARE
MAINTAINING THIS PROJECT

33. LET’S DO SOME
REACT!

34. $ npm install -g create-react-app
$ create-react-app leaderboard

35. OUR FIRST REACT COMPONENT
1 var CommentBox = React.createClass({
2 render: function() {
3 return (
4 <div className="commentBox">
5 Hello, world! I am a CommentBox.
6
</div>
7 );
8 }
9 });
10
11 ReactDOM.render(
12 <CommentBox
/>,
13 document.getElementById('content')
14 );

36. OUR FIRST REACT COMPONENT IN ES6 FLAVOR
1 class CommentBox extends React.Component {
2 render() {
3 return (
4 <div className="commentBox">
5 Hello, world! I am a CommentBox.
6 </div>
7 );
8 }
9 };
10
11 ReactDOM.render(
12 <CommentBox />,
13 document.getElementById('content')
14 );

37. 1 // Props
2
3 <Hello say=“Halo Bandung!” />
4
5 console.log(this.props.say) // => “Halo Bandung!”
6
7
8 // States
9 class Hello extends React.Component {
10 constructor() {
11 super()
12 this.state = {say: “Halo Bogor!”}
13 }
14 render () {
15 <Hello say={this.state.say} />
16 }
17 }
‘MODELS’ IN REACT

38. WHAT WE WILL BUILD

39. LET’S DO SOME
REACT LIVE CODE!

40. REPOSITORY
THIS CODE AVAILABLE ON…
https://github.com/rizafahmi/
react-leaderboard-codepolitan

41. REACT
PROBLEM SET
http://bit.ly/h8-problemset

42. WEBINAR PROMO
PESAN SPONSOR

43. BEFORE WE SAY GOODBYE
IF YOU LIKE OUR WEBINAR…
http://bit.ly/hacktiv8-webinar