React

In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.

Take the example of creating a custom button. In the past, you would create a CSS class (perhaps .primary-button) with your custom styles and then use it whenever you want to apply those styles. For example:

<button class="primary-button">Click me</button>

In the world of components, you instead create a PrimaryButton component with your button styles and use it throughout your site like:

<PrimaryButton>Click me</PrimaryButton>

Components become the base building blocks of your site. Instead of being limited to the building blocks the browser provides, e.g. <button />, you can easily create new building blocks that elegantly meet the needs of your projects.

es6 modules are this format

import React from 'react';

import { Component } from 'react';

• every component in react is its own class
• best practice capital letter on class name
• never touch the dom - only once when mounting the app to the page
• <React.Fragment> tag allows things to not be 'contained'
• jsx {} means iim writing in js
• componentised css / inline css - import css directly into component file
• golden rule - dont touch the Dom

Props

How the data gets to where it needs to go like a bus/car

passing anything other than string use {}

{this.props.tagline}

State

Where date lives - its home

an object that lives inside a component that stores all data that that component and its children needs

an object that holds data that itself needs as well as children may need

state = single source of truth

think about updating data not dom elements

copy existing state

const fishes = {...this.state.fishes}

Stateless functional components

A render function that gets given information but doesn't do anything else

if component only has render method convert to stateless functional

implicit return - removing the {return()} from the stateless functional component

const Header = (props) => (
  <Header>
    <h1>{props.tagline}</h1>
  </Header>
);

export default Header;

also its props. not this.

React router

(or next.js)

Export vs export default

import React from 'react';

export default function blh() {}

named export

import { React, React2 } from 'react';

export function React() {}
export function React2() {}

inputs

defaultValue="defaulttext" defaultValue={func()}

refs

Getting input from a form

myInput = React.createRef();

<input ref={this.myInput}/>

this in components

video 11

this is present in the default methods eg componentdidmount() render() etc but not your own ones they're not bound by default

class StorePicker extends React.component {
  constructor() {
    super();
    this.goToStore = this.goToStore.bind(this);
  }
  
  goToStore(event) {
    console.log(this) // works
  }
}

OR

goToStore = (event) => {
      console.log(this) // works
}

events

events are inline

handleClick() {alert('heyy')}

<button onClick={this.handleClick}>text</button

JSX

{Object.keys(this.state.fishes).map(key => key => <p key={key} details={this.state.fishes[key]}>{key}</p>)}

Lifecycle methods

Computed property names

const updatedFish {
  ...this.props.fish, // take a copy of current fish
  [event.currentTarget.name]: event.currentTarget.value // update the value for that name
}

Static

import PropTypes from 'prop-types';

class addFishForm extends React.component {
  nameRef = React.createRef();

static propTypes = {
  addFish: PropTypes.func
}

}

using static means values wont be copied over to every instance of a component - they live with the 'mama' component - useful for setting property type requirements

await async

if we want to ut the store into the variable

const store = base.fetch() returns a promise

if we want to put the store (result) into the variable not the promise

const store = await base.fetch()

Created on: 12th October, 2022

Last updated: 14th October, 2022

Tagged With:

• react