samuraijane

React 103

React props are similar to the argument and parameter of a JavaScript function

A JavaScript function that takes one or more <1> is defined with the same number of <2>

// definition --> `name` is the <3>
function greeting(name) {
  return `Hello ${name}`;
}

samuraijane

Redux 101

An overview of managing global state

• When we talk about <1>, we mean variables that can be accessed throughout the application regardless of what the view may be
• With React and its useState hook, state is managed locally– that is, the state variables are exposed only within the component where they are defined
• As such, they are specifically tied the component's corresponding <2> in the browser
• This type of architecture is known as <3>
• The <4> means the data, as defined by the state of a variable or variables, available to the view
• The <5> is the data that is rendered in the browser at a given point in time
• And the <6> is the logic that decides if the model should change

samuraijane

React 104

Controlled components

• The state of form elements in an HTML/JavaScript project is tracked by <1>.
• A controlled component in React is really just a regular <2> that you are already familiar with.
• But the term refers to a component that has a form element whose <3> is tracked by <4>.
• The value of an <input />, for example, in a controlled component is set by the <5> part of the useState hook.
• If an <input /> does not have a <6> attribute, its state is controlled by HTML.
• Changes in state cause a React component to <7>.
• When component goes from controlled to uncontrolled, React will throw a <8>.

samuraijane

React 301

An overview of react-router

• <1> refers to what the browser shows in the view at a given URL
• If a url ends in a <2>, it means that routing is controlled by the server
• react-router is an NPM library
• One advantage of <3> routing is the site is faster
• When the browser handles routing, it means we can avoid sending additional requests to the <4>
• One challenge we have with browser-side routing is dealing with to <5>
• You can think of routing is a <6> relationship

samuraijane

CSS 101

Selectors and style rules

Key terms and phrases

1. class attribute
2. colon
3. curly braces
4. dev tools
5. id attribute
6. link tag, and its attributes href and rel

samuraijane

CSS 102

Specificity and inheritance

Key terms and phrases

1. !important
2. inline styles
3. inheritance
4. specificity

samuraijane

CSS 103

Flow and position

Key terms and phrases

1. element levels
   • block
   • inline
   • inline block
2. flow
3. position

samuraijane

CSS 104

Spacing

Key terms and phrases

1. border
2. box model
3. margin
4. padding

samuraijane

CSS 105

Box dimensions

Key terms and phrases

1. height
2. width

Starter code

HTML

samuraijane

CSS 106

Text

Key terms and phrases

1. color
2. font-family
3. font-size

Starter code

HTML