yi-mei-wang

Do I understand...

1. What is state?

2. What is setState() and what does it do?

3. What happens when I call setState()?

4. How do the values inside the state get rendered?

yi-mei-wang

Step 1:

Install axios npm install axios

Step 2:

Import axios import axios from 'axios'; ​

Step 3:

Use axios

yi-mei-wang

1. Form validation

• Disable buttons when the form inputs are empty
• Show error feedback

2. JWT in header

• headers: {Authorization : `Bearer ${authToken}`}
• What are headers?
  • Lets the client (front end) and the server (back end) pass additional information
  • Check in the Network tab in Chrome Dev tools
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

yi-mei-wang

1. Syntax of functions (declaration with function keyword vs arrow functions)

2. Passing props to direct children (one level)

3. Passing props down to grandchildren (multiple levels)

<NameOfComponent nameOfProp={name of value or function}/> > <Container handleClick={this.handleClick}/> > <Button handleClick={props.handleClick}/>

4. Import components from another file import from "";

yi-mei-wang

How to manage the state

1. state is an obj (state={})
2. setState() - updates the state

How to use lifecycle methods

1. render() - convert what is inside return() into HTML
2. componentDidMount() - after the first render, only runs once
3. componentDidUpdate() - after setState()

How to write components in React

yi-mei-wang

Today's agenda!

1. Comments

2. Lists (just an array)

   1. Slice syntax
   2. name_of_list[start:end:step]

3. Dictionaries (just an object)

4. Accessing items inside a dict

yi-mei-wang

Regex in Python

1. Use the regex library by typing

   import re

2. A regex pattern looks like this:

r""

yi-mei-wang

What we will do in this lecture

1. Set up Conda env

2. Install the necessary packages

   1. pip install flask
   2. pip freeze > requirements.txt

3. Set up Git repo

yi-mei-wang

Setting up

1. Create Conda environment
2. Install peewee, peewee-db-evolve
3. Save your installation into requirements.txt
4. Create a db

Tasks

1. Create your tables, you may refer to your todo-list schema from our previous challenge if you want

yi-mei-wang

1. Download Postman

2. HTTP status codes (Click to read more)

   1. Grouped by classes
      ![Status codes](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/3b7e74ea-efff-4930-bf7a-97c073c48517/Screenshot_2019-11-19_at_4.49.51_PM.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45KUEIKXPY%2F20191119%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191119T085121Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEI3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQDt1UwmEeNLrNVvptlt9DOmOGP3SsSDc94BMluLdGdB9gIgCaSr1QEfLXUCThlgsiIW4geb19pbIwO7QyXe6WbrZ9Qq3AIItv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAAGgwyNzQ1NjcxNDkzNzAiDLcepDbmxz2yKqLJJCqwApTd%2FXeyR%2Fz5Yu9OTOVKf9N3bqRkDWW92b%2BmGEmoUn9ekCktM8fcYrNOxpYmOes%2F8%2B7e5hJhJjePVeugD54xNSFqmNp8P8gDGilOz2eDySnptTvNf9izlWNjk8QQQ0mZv24zaW9nfV%2Bwng7YmmiaKNBPIyK4btPpZioN1288oscuxVSoVjnJMAkGZthmsYjp%2BuzHrZPOEhxjt9%2FR7jrhSKjgN%2BIUsGYk9KgFUEufd9uxy9yBZyUeuGju%2BpjKtY0