Getting started with React for WordPress Developers

I gave my first WordCamp talk on "Getting started with React" at WC Kathmandu, Nepal 2017

It was a great experience.

Transcript

2. Getting started with React
3. I am Muhammad Adnan Full Stack Developer, WordPress Hacker at @WPBrigade, WordPress Core Contributor, Google Summer of Coder, #phpMyAdmin Contributor and Dad. You can find me at adnan.pk Hello!
4. What is React? React is a JavaScript library from Facebook and is especially used to create the interactive UIs. React will efficiently Update and render the right component when the data changes.
6. “ Why you need to learn this??
8. Why you need to learn this? Be visible in WordPress Community
10. Reactjs Features! ◉Super fast! ◉Unidirectional Dataflow! ◉Open source! ◉Declarative ◉Just JavaScript ◉Learn Once, Write Everywhere
11. Components
12. Use of Virtual DOM
13. Unidirectional Dataflow The data flows throughout your reactjs app in a single direction and you have better control over it. Also the application state is contained in specific components and as a result different components of your app remain loosely coupled.
14. What is Declarative? Reactjs is declarative instead of being imperative, Simple example to understand imperative is Google navigation system, when we enter address, guide comes and let us know which steps we have to make to reach from place a to b. And declarative is that we have to reach from a to b, and it doesn’t matter how many steps we take to reach from a to b, but at the same time we know, how to move step by step.
15. What is Declarative?
16. Example Imperative Declarative
17. Just JavaScript
18. Components
19. JSX JSX simply allows us to write HTML like syntax which (eventually) gets transformed to lightweight JavaScript objects.
20. State State is the place where the data comes from.
21. Props Props are half of what make React components special.
22. Component Life Cycle ◉ComponentWillMount ◉ComponentDidMount ◉ComponentWillReceiveProps ◉ShouldComponentUpdate ◉ComponentWillUpdate ◉ComponentDidUpdate ◉ComponentWillUnmount
23. Prerequisites for React ◉ JavaScript knowledge ◉ NodeJS ◉ WebPack ◉ Babel
24. Let’s build a Real React App
26. Let’s build a Real React App
30. Let’s build a Real React App
34. “ https://github.com/hiddenpearls/wp-plugin-reviews-react http://adnan.pk/reviews/
35. It sometimes sounds your mind blown up like this guy
37. Real life examples calypso
38. Resources ◉React docs by Facebook https://facebook.github.io/react/ ◉My React App https://github.com/hiddenpearls/wp-plugin-reviews-react ◉React Fundamentals https://reacttraining.com/online/react-fundamentals ◉https://reactforbeginners.com/ by Wesbos
39. Innovate! Pivot! Innovate! Pivot!
40. Any questions ? You can find me at ◉ @hiddenpearls ◉ adnan.pk Thanks!
41. Sometimes things go out of control