Notes

Props

Props stands for properties. A system for passing data from a parent component to a child component. The goal is to customize or configure the child component.

Props are objects so the fields have to be called as methods: props.author for instance.

It is possible to use defaultProps to instantiate the default behaviour of a component.

In case of not a function type of error when passing props, you need to turn the props into an arrow function for this to work.
It is possible to refector elements of a props by destructuring the props, so:

const images = props.images.map((image) => {
        return <img key={image.id} src={image.urls.regular} alt={image.description} />
    })

would become:

const images = props.images.map((description, urls, id) => {
    return <img key={id} src={urls.regular} alt={description} />
})

Functional components

Used anytime to show simple content to the user. (the card for example -- create JSX pass some props and return it).

Alternative writing:

const SearchBar = () => (
    <div></div>
)

Class components

For complex content, respond to user input, network request. Can use the state input.

Class components are not classes in terms of Ruby or Python, they are a Javascript Class. They also must be extended to a subclass (react component). And they must define a render method that returns some amount of JSX.

When components are reloaded they are also reloading the child components.gt

State

Rules

Only usable with class components (not always true)
state =/= props
State is a JS object that contains data relevant to a component
Updating state on a component causes the component to almost instantly rerender
State must be initialized when a component is created
State can only be updated with the setState function

Video 61: refactorisation on state and constructors, you can remove the whole constructor by passing a state to the class. => what is the state in a react application? Code is passed to Babel and understand the code that is compiled and extends + implements the constructor function.

     constructor(props) {
         super(props)
         this.state = { lat: null, errorMessage: '' }
     }

always try to have one statement in the render method, in case it isn't possible try to use a helper function with the complex cases and returning to the render method. see video 70
onInputChange: In that case:

    <input type="text" onChange={this.onInputChange}>

The function onInputChange is not called as a function (onInputChange()) but as a callback so the function is not run everytime the component is rendered but when the component is called. Other functions: onClick, onSubmit and onChange

replace handlers by arrow functions, insead of:

    <input type="text" onChange={this.onInputChange}>

you get:

    <input type="text" onChange={(e) => console.log(e.target.value)}>

React Ref

gives you direct access to DOM elements
we create refs in the constructor, asssigne them to instance variables and then pass to a particular JSX element as props

  constructor(props) {
        super(props)

        this.imageRef = React.createRef()
    }

Redux

state management library
makes creating complex application easier
not required to create a react app
not explicitly designed to work with React
the redux cycle:
- action creator
- action
- dispatch
- reducers
- state

3.5 KiB Raw Blame History