React seminar of PekanbaruJS #2 meetup

2. I am
Rully Ramanda
ruliarmando
krooco@gmail.com
ruliarmandoLead Web Developer
@rullyramanda

3. Objectives
● What is React
● Who is using React
● Core concept of React
● Why React
● How to use React

4. What is React?

5. What
React is a library for building user interfaces

6. It is the V of the MVC

7. Traits
● Declarative
● Component-based
● Learn once, write
anywhere

8. Declarative
Saying what you want
Imperative
Saying how to achieve it

9. Declarative Imperative
A tower of 3 blocks
1. Put down block A
2. Put down block B on A
3. Put down block C on B

10. Component based

11. Write once, run anywhere
It’s Java

12. Learn once, write anywhere

13. React Native

14. React VR

15. Who use React?
International

16. Who use React?
Local

17. REACT CORE CONCEPTS

18. Core Concepts
Components
Virtual DOM
One way data flow

19. Components

20. DOM VS Virtual DOM
VS

21. The Story of DOM
http://www.learnreact.design/2017/06/08/what-is-react/

34. The end of story

38. React with JSX React without JSX

39. React puts HTML in JS Other frameworks puts
JS in HTML

40. How it works?

42. One way data flow

43. Data flow (simplified)

44. Flux pattern

45. Redux

46. So why you should use React?

47. Learn Once Write Anywhere
Browser Android
iOS Windows
Desktop
Windows
Phone
Tizen
XBOX
Netflix

48. Virtual DOM is crazy fast!

49. Component based is the future!

50. Great debugging tools
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

51. Great debugging tools

52. Live reloading (How cool is that?)

53. Live reloading (web)

54. Why?
Maintained by the Facebook itself
Not me of course!!

55. Increasing job trends

56. Getting started with React

57. Tools

58. The easier way

59. create-react-app
● npm install -g create-react-app
● create-react-app <app_name>
● cd <app_name>
● npm start / npm run build

60. create-react-app

61. Let’s do some
React live coding

62. http://bit.do/coba-react

63. Component Lifecycle

64. Must have libraries

66. Styling libraries (CSS in JS)

68. Some cool UI libraries

69. http://www.material-ui.com/#/

70. https://react-bootstrap.github.io/

71. https://ant.design/

72. http://blueprintjs.com/

73. Go check
https://github.com/enaqx/awesome-react
For more cool libraries

74. That’s it.

75. Thank You!

76. Q&A

77. is hiring
Send your CV to hrd@medicaboo.com