React - goatandsheep/goatandsheep.github.com GitHub Wiki

Introduction

React is one of the most popular Javascript frameworks around to help you construct dynamic web apps. It uses a component-pattern, which is basically like making customized components with data moving from parent to child through setting the attributes.

Parts of React

  • props: properties

State management

There are sometimes when you want to rely on a global store for data flow. This can be done through one of the many state managers. Newer versions of React come with Context API and hooks that can manage a central state, but the most common state manager for React is a 3rd party library, called Redux.

It should probably be in a separate tutorial, but Redux and React are like peas and carrots. It can be used in a variety of patterns, but I'm going to go over a simple pattern of my own. This is a video describing how to setup one of the other simple patterns. I probably should go over React-Redux, but in my experience it is a very complicated pattern.

  • Reducers: setter functions that strictly change the store and nothing else, controlling what and how attributes can be changed
    • Inputs: previous state, action
    • Output: next state
  • Actions: functions for state interactions that require additional logic. They don't modify the state directly, rather interacting with the reducers.
  • Subscriptions: takes a callback which is run when the state is changed

Types of Components

  • Container: stateful, connect to Redux, manage actions and data, no markup
  • Presentation: mostly markup, no state connections, really dumb, receive data through props

Tips

  • render must render one element; put multiple elements inside a single div if necessary
  • initialize function is called render
  • Inserting components: <component_name attribute1="value1" />
    • inheritance: just like attribute
      • inherited_function={this.props.function_being_inherited}
    • Numerical values: attribute={value}
  • pure functions:
    • return value is dependent only on value of inputs
    • don't rely on network / database calls
    • two equivalent calls will always have the same predictable response
    • Doesn't override the variable that is passed through it; sends new value
    • redux functions must be pure
  • avoid mutating your state arrays. Use higher order functions, like map

Refs

this.ref.current.focus()

callback refs

Proptypes

validation for inputs

checkPropTypes()

Useful for ensuring only specific prop values are allowed in components

ComponentName.PropTypes = {
  propName: PropTypes.string
}

Hooks

what do they do

useEffect: run some stuff after mount or prop update

second parameter is

useEffect(() => {
  //
}, [count]); // Only re-run the effect if dependency array changes

useState: save value between renders

const [value, setValue] = useState("default")
const [v, setV] = useState(() => int(0))
setValue("newValue")        // value set
setValue(prev => prev + 1)  // function set

Use function set whenever you need to reference the previous version otherwise it can cause problems. You can also use function set for partial modification

const [value, setValue] = useState({ count: 0, position: 'right' })
setValue(prev => { ...prev, count: prev.count + 1 })

useRef: similar to useState but it does not cause component to re-render when it gets changed. It is a fancy way of letting you update the value, without the renderer knowing because it hides the value in an object { current: "value" }. Good for storing element references

To update an array in hooks, map and replace the item in the array

    const newItems = items.map((i) => {
      if (i.id === recipeId) {
        i.value = "newvalue"
        return i
      } else return i
    })
setItems(newItems)

Mixins

how they work

Redux

  • optional separate Javascript framework