Fullstack 2022/3 – React module - starting 14.11.2022

To check out this repo:

1. clone repository
2. cd into it and run npm install
3. run npm start

The Repo is deployed at https://codemon72-react-course-2022-11.netlify.app/

Examples of

• conditional rendering / short circuiting
• input field as controlled component
• API call inside useEffect / "pure function"
• routing with Wouter
• dynamic routing
• local storage
• styling scoped to component with CSS Modules and with styled-components library

Notes from the Course

conditional rendering examples

// short circuiting:
{ isActive && 'Hello!' }

// conditional rendering with ternary operator:
{isActive ? (
  { text }
  ) : (
  <img //....
  >
)}

// with the OR `||` operator
// (like giving it a default value)
`{ text || 'Hello!' }`
`{ count || 0 }`

// different ways - controlling for 'empty' object 
// rendering only when object has received values (for example 'name'):
{randomPokemon.hasOwnProperty('name') && (
    // ...
)}
// with the `keys()` method
{Object.keys(randomPokemon).length > 0 && (
  //...
)}
// with the `values()` method
{Object.values(randomPokemon).length > 0 && (
  //...
)}
// with the `entries()` method
{Object.entries(randomPokemon).length > 0 && (
  //...
)}

2 (slightly) different ways to handle change in multiple input elements:

Using input attribute 'name' and passing 'name' and 'value' inside the event object from the input field to the handler function, then destructuring it:

const initialPersonData = {
  firstName: '',
  // ...
};

const [personData, setPersonData] = useState(initialPersonData);

const handelFormInputChange = (event) => {
  const { name, value } = event.target;
  setPersonData({ ...personData, [name]: value });
};

<input
  value={personData.firstName}
  name='firstName'
  onChange={handelFormInputChange(event)}
/>

Passing 'name' and 'value' (inside the event object) as separate parameters from the input field to the handler function, then destructuring only the 'value' from the event object:

const initialPersonData = {
  firstName: '',
  // ...
};

const [personData, setPersonData] = useState(initialPersonData);

const handelFormInputChange = (name, event) => {
  const { value } = event.target;
  setPersonData({ ...personData, [name]: value });
};

<input
  value={personData.firstName}
  onChange={(event) => handelFormInputChange('firstName', event)}
/>

uses of ? inside JS:

• as part of the ternary operator
• for 'optional chaining':

// An empty person object with missing optional location information
const person = {}

// The following will equate to undefined instead of an error
const currentAddress = person.location?.address

• in 'nullish coalescing': The nullish coalescing ( ?? ) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined , and otherwise returns its left-hand side operand)

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

wrapping a 'non pure' function inside useEffect

calling an API or a document in react is considered a 'non pure' function because we can never know exactly what we'll get. Therefore we'll wrap the fetch function in a useEffect hook and either trigger it on first rendering with an empty dependency array or by adding a dependency and changing it. Like in the CallApiExercise.

  const [callAPI, setCallAPI] = useState(false)

  useEffect(() => {
  
    if (callAPI) {
      fetch(url)
        .then((response) => response.json())
        //...
    }
  }, [callAPI]);

  return (
      //...
      <button
        onClick={() => {
          setCallAPI(true);
        }} //...
  )

different ways to implement CSS

• Global CSS
  • all styles in one place
  • file can easily get to big
• CSS Modules
  • looks like regular CSS
  • can be scoped to individual component (no name collisions)
  • can reduce bundle size
• styled components / CSS-in-JS
  • 'styled-components' is a library; (there are others like 'Emotion')
  • needs to be installed: npm install styled-components
  • only component related CSS is added to the page
  • no class name collisions
  • regular CSS syntax
  • can be nested like Sass
  • Documentation: https://styled-components.com/

Final Remarks: many thanks to the free https://pokeapi.co/ API