$30 off During Our Annual Pro Sale. View Details »

Introduction to Full Stack JS

Introduction to Full Stack JS

Randy Vianda Putra

September 01, 2019
Tweet

More Decks by Randy Vianda Putra

Other Decks in Programming

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