1 of 25

Who’s Lecturing Today?

https://forms.gle/kXbwAUbu7bJefNBf9

2 of 25

3 of 25

Lecture 8 - Intro to React

Taught by Nitya and Emir

4 of 25

}

5 of 25

6 of 25

Introduction to React

7 of 25

What Is React?

​

​

  • JavaScript library for building interfaces
  • It lets us compose complex UIs from small and isolated pieces of code called “UI components”

8 of 25

Why Use Frameworks and Libraries at All?

​

​

  • Makes your life easier

9 of 25

10 of 25

Why Use React?

  • React is by far the most popular frontend framework used today
  • It is also one of the easiest to work with and has a huge amount of online support
    • Development Speed
    • Combining HTML, CSS, and Javascript
    • App Performance
    • Testability
    • Dynamic Rendering
    • State

11 of 25

Installation

12 of 25

nodejs.org

13 of 25

Useful Tools

14 of 25

Prettier

  • Tool that helps reformat our code and make it pretty
  • Download Prettier from the VSCode extensions
  • prettier.requireConfig to true
  • editor.formatOnSave to true

15 of 25

ESLint

  • Enforces code style in projects
  • When you start new projects, use ESLint to keep your code consistent

16 of 25

Getting Started

17 of 25

18 of 25

DEMO

19 of 25

Components

  • Components are a way segment and reuse pieces of code in a React project
  • Can separate out data and logic into different files
  • Improves readability

20 of 25

Props

  • Short for properties!
  • Way to pass data into a components
  • Preserve the reusability of components, but also ensure that each component can look or behave differently

21 of 25

State

  • Another way to handle data inside a component
  • Instead of being passed from a parent like props, state is handled inside the component itself

22 of 25

Lifting State Up

  • In React, data is passed only from Parent to Child. But how can we pass data from Child back to Parent?
  • Not a good practice to use props in the parent components to pass data up the tree
  • Instead, have the parent component maintain the state for the child component

23 of 25

Lifting State Up

A

B

C

How can B and C share data?

24 of 25

DEMO

25 of 25

Announcements

  • Project 2 is due tonight at 11:59 PM
  • HW4 will be released tonight and is due on 3/15

​