Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Full Stack JS

Introduction to Full Stack JS

73eeac32b9932a63ed361f1ff5c5e92a?s=128

Randy Vianda Putra

September 01, 2019
Tweet

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

  27. None
  28. Virtual DOM ? ?

  29. None
  30. JSX ? ?

  31. None
  32. Controller View

  33. None
  34. https:/ /babeljs.io

  35. One Way DataFlow ? ?

  36. None
  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

  48. None
  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