Introduction to React

[mabelleeyanhwa]

trafficstars

session #1:

• what is React? (just a javascript library)
• why React? (build single page apps. contrast application development with and without React: https://thoughtworks-jumpstart.gitbook.io/jumpstart/front-end-web-development/react#why-cant-i-do-it-without-react)
• Vanilla React demo: https://github.com/thoughtworks-jumpstart/vanilla-html-js-react/
• go through gitbook to show each of the major pieces required to understand React
  • setup (create-react-app)
  • JSX
  • React elements
  • functional components and props (React principle: the data flows down)
• lab: https://github.com/thoughtworks-jumpstart/react-todo-list

session #2:

• class components and state
• event handlers and listeners
• ensuring this is not lost in handlers by defining them as arrow functions
• importing / exporting variables (named/default exports)
• CSS (place everything in index.css
• conditional rendering (3 styles: if statements, ternary statements, and &&)
• lab: apply everything they've learned in https://github.com/thoughtworks-jumpstart/react-todo-list

session #3:

• thinking in React: how to break down a wireframe/app idea into React components
• passing data to event handlers
• lifting state up
• passing event handlers as props
• lab: create a simple note-taking app in React

[mabelleeyanhwa]

@all-contributors What a cool interactive React lesson! Let's add @elsonlim-tw for writing content in our JumpStart guides 👍

[allcontributors[bot]]

@mabelleeyanhwa

I've put up a pull request to add @elsonlim-tw! :tada: