Introduction to React.js

react-intro.md

What is state?

The condition of the component at a particular time

• Initial state is what the component should be like when the page is loaded for the first time

• Modifying your state

  • this.setState()
  • render() gets called every time this.setState() is invoked
  • By calling setState every time the state of the app changes, we can change our UI accordingly

• Do NOT mutate the state directly

  • always use this.setState()
  • examples:

What is lifecycle?

• All components in React follow a specific cycle, from its creation and mounting (when it is inserted into the DOM) to its unmounting and destruction (when it is removed from the DOM)
• This cycle is known as the lifecycle
• Main phases: mounting, updating and unmounting

What are components?

• Remember to capitalise the first letter of the component name, e.g., <Button>, <GameBoard>

What is extends?

• Inherits from the parent class
  • This will allow you to access the parent's methods
• This is how a React component has access to setState()

constructor & super?????

• The constructor's job is to create a new instance of the class, while super allows you to access the parent's methods
• Do we really still need the constructor and super? Read here: https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599

What is JSX?

• Still JS although it looks like HTML!
• Allows you to combine and write JS and HTML together!
• e.g., <button> {loading ? "Stop loading" : "Start loading"} </button>
• JSX is still JS, so use camelCase, e.g. background-color should be backgroundColor
• How does JSX work underneath the hood? Read here: https://www.reactenlightenment.com/react-jsx/5.1.html

ternary operator

• Concise way to write if-else statements
• syntax:

  condition to check ? code to run if condition evaluates to true : code to run if condition evaluates to false

Key things to note

• JSX is still JS, so use camelCase
• Components should start with a capital letter
• Do NOT ever mutate the state directly