Introduction to Full Stack JS

Transcript

1. Intro To Full Stack JS Code Is Fun - 1 September, 2019
2. Randy Vianda Putra, live in Bandung - Lead Frontend Engineer @WorkLifeBeyond - Researcher @evilfactorylabs Hello modulloe@gmail.com github.com/randyviandaputra @randyvp
3. Agenda - What is Full Stack - What is JavaScript - Why JavaScript - What is Node.js - Why Node.js - What is React - Why React
4. Let’s Start
5. What is Full Stack ?
6. ?
7. ?
8. ?
9. What is JavaScript ? ?
10. What is JavaScript ? • Programming Language • JavaScript is a cross-platform • Object-oriented scripting language used to make webpages interactive (e.g. having complex animations, clickable buttons, popup menus, etc.) • There are also more advanced server side versions of JavaScript such as Node.js
11. • Supports all modern browsers • Doesn't support old browsers • Can use new features in production with conversion to es5
12. Why JavaScript ? ?
13. ?
14. Why JavaScript ? • Easy to learn • It's everywhere • Backend and Frontend • Learn to Become a Full Stack JavaScript
15. What is Node.js ? ?
16. What is Node.js ? • Nodejs is a platform for executing JavaScript programs outside the browser. • Nodejs uses a runtime engine called V8, which is a JavaScript runtime engine from Google Chrome. • Server Side JavaScript
17. Why Node.js ? ?
18. Why Node.js ? • Easy to learn • Full Stack JS • Open source • Very reliable and often used to develop real-time applications
19. What is React ? ?
20. What is React ? A JavaScript Library for building UI (User Interfaces), not a framework like Backbone, Angular etc, the V in MVC
21. Who’s using React ? ?
22. Who’s using React ?
23. Concept of React ? ?
24. Concept of React ? Component Virtual DOM JSX One Way DataFlow
25. Component ? ?
26. Build Component, not template
28. Virtual DOM ? ?
30. JSX ? ?
32. Controller View
34. https:/ /babeljs.io
35. One Way DataFlow ? ?
37. Why React ? ?
38. “ LEARN ONCE, WRITE ANYWHERE 38
39. “ VIRTUAL DOM IS CRAZY FAST! Makes re-rendering on every change fast 39
40. “ Component Based Is the future of web development 40
41. “ React dev tools React Chrome extension make debugging so much easier 41
42. “ Easy to read and understand views 42
43. “ Facebook are maintaining this project 43
44. https:/ /github.com/adam-golab/react-developer-roadmap
45. Install React $ npm install -g create-react-app $ create-react-app project_name
46. Fundamentals React ?
47. Component Stateless (function) Statefull (class) Represent a piece of UI
49. Props - Passed down to component from parent component and represents data for the component - accessed via this.props
50. State - Represents internal state of the component - Accessed via this.state - When a component's state data changes, the rendered markup will be updated by re-invoking render() method
51. Links - https:/ /reactjs.org - https:/ /developer.mozilla.org/id/docs/Web/JavaScript - https:/ /nodejs.org/api/ - https:/ /www.youtube.com/user/TechGuyWeb
52. “ “Whatever programming language you choose, I wish you luck in the beautiful world of JavaScript.”
53. 53 Thanks Any questions?
54. Source Code https://bit.ly/2zGXozu