DEV Community: Harry J Beckwith

React learning guide

Harry J Beckwith — Mon, 06 Sep 2021 13:32:48 +0000

How do you go about learning React?

Find a list of core concepts in react. (see list below)
Write small code examples for each with a written description on what is going on.
Combine all the small examples into a working application.

What is React?

React is a javascript library for building user interfaces.
A client-side javascript library.
All about building modern reactive user interfaces for the web.
Declarative, component focused approach.

How does react work?

React creates a virtual DOM which means changes can be made to the UI and only that specific part that was updated not the whole page.

What is declarative code?

is a way to write code that describe what you want to do.
rather than imperative which is how you do something.

What is JSX?

JSX is javascript and XML combined meaning you can write html inside javascript. This allows you to write components in React easily.

State vs props

State is used to handle data in the application which will be reactive and update in turn then update the UI.
Props are used to pass data/or state through to other components in the application that react to the state update.

What is reactDOM?

is a package that provides DOM (document object model) specific methods. These methods can be used to manage the DOM in an effective easy way.

Explain hooks?

Hooks are a new addition in React 16.8. This is a move away from class based components. You can access the state by using a hook called useState. Some of the main hooks are useState, useEffect, useContext, useReducer and useRef. There are a few more also.

What is Redux?

Redux is a state management library for React. It allows you to centralise state in once place rather passing state through multiple components.

Core concepts

useState

The above gist

line 1: we import useState
line 4: we use array destructuring, count is our state setCount is the function we use to update the state.
line 4: 1 is passed into useState this is are starting state
line 7: setCount is called passing the starting state count plus 1
line 16: count is placed into the JSX
line 17: onClick is used to call the function that updates our count

prevState

The above gist

line 4: we set our state to and object
line 9: function to update state
line 10: we use prevState as we want to keep the previous state and update only part of the object
line 13: we use the spread operator to create a copy of the object
line 14: we select the key we want to update, and change the value
line 19 down: we click to call the function and update the key displaying it to the DOM.

The above, prevState is used so we keep the old state and update only the selected value.

props

props are used to pass information (state or other) to components and share this information. Once the source of the props is updated all components using this prop will then update.

line 7: message prop name is set to a string hello world!
HelloWorld.js takes props and returns the props.message

Lifting up state

The above gist

line 6: state is set
line 8: function that updates state
line 15: Button component, updateMessage set to the handleUpdateMessage function

Button.js

line 3: click event from the pass props handleButtonClick
line 4: we access the parent function through props, passing in the message hello!

Button is clicked now the parent App.js updates the state, line 14: now shows the hello message.

useRef

Use ref can be used to reference input fields and get the value from the input.

Above gist

line 1: useRef is imported
line 6: we store useRef() in a const
line 15: ref is set the useRef const
line 9: we access the value from the input. using .current.value
line 9: state is updated, message is updated in the DOM.

Fragments

Avoid div soup and write cleaner html. React allows one root DOM element. This means sometimes using div where it's not really needed. Fragments solve this.

Without fragment

With Fragment

Forward refs

Refs cannot be used when adding the ref tag to a component. In order to use refs when passing to a child component you can use forwardRefs.

Above gist

App.js

Line 1: import useRef
Line 2: import import component
Line 5: create useRef
Line 8: focus on the input with ref
Line 13: add pass ref to child component

InputText.js

Line 1: import forwardRef
Line 3: Wrap component in forwardRef function, pass props and ref as required
Line 4: set the ref to the input

Now back in App.js we on click

Line 14: we set the focus to the child input.

Use effect

Use effect is a way to call code on page and respond to any updates inside the use effect method, calling the code again.

Im not sure if the above made much sense. However it's a method that is used for when the component is mounted and when an effect triggers the code inside the use effect method.

Let's look at an example. This example is an email and password login. We want to check on page load if the user is logged in.

Using useEffect we can check local storage for logged in user.

The above gist has a few things going on. But we only need to focus on line 10 for now.

Inside we check for local storage item, if its then we update the state.

What this allows us to do is, on page refresh we can fire the useEffect method - checking local storage. if true then we update the state to so the user is logged in.

useEffect dependencies

Use effect takes an array as the second argument. In here the dependencies that are being updated (state should be passed in ) this way react knows which state to look out for changes and fire the function again.

The below gist shows a login screen, the useEffect function takes the two dependencies as array items. Now if either update the function is called again.

Gist showing useEffect dependencies

useReducer

Sometimes you have more complex state - for example if it got multiple states, multiple ways of changing it or dependencies to other states.

more powerful state management.

More complex to use.

good replacement for useState when you have state that belongs together.

useReducer takes two arguments, a function and the initial state.

The variable name dispatch calls the reducer function, which in turn updates the state.

Using this methods allows us to handle complex logic in the reducer function.

Conclusion

That's some of the core basic concepts, with small examples. The trick now is too combine to create a small application.

Link to follow showing a small project with core basic concepts. Thanks.

Rules of React hooks

Harry J Beckwith — Thu, 26 Aug 2021 08:35:48 +0000

Only call React Hooks in React functions.
React component functions and Custom hooks.

Only call React hooks at the Top level.
Don't call them in nested functions.
Don't call them in any block statements.

useEffect: always add everything you refer to inside the useEffect() as a dependency.

React hooks useReducers()

Harry J Beckwith — Thu, 19 Aug 2021 11:14:40 +0000

Can be used as a replacement for useState, if you need more "powerful state management".

More complex to use and requires more set up than useState.

Majority of the time useState is used.

returns an array with two values, array de structuring is good to use here.

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn)

state = state snapshot used in the component.

dispatchFnc = a function that can be used to dispatch a new action e.g trigger an update of the state.

reducerFn = A function that is triggered automatically once an action is dispatch (via dispatchFn()) - it receives the latest state snapshot and should return the new updated state.

initialState = The initial state

initFn = A function to set the initial state

Example...


// create reduction fnc stored input goes into state
const emailReducer = (state, action) => {
  if(action.type === 'USER_INPUT') {
    return { 
      value: action.val, 
      isValid: action.val.includes('@') 
    }
  }
  return {value: '', isValid: false}
}
//creating a reducer. dispatch email fnc that calls email reducer which updates the state (emailState)

const [emailState, dispatchEmail] = useReducer(emailReducer, { value: '', isValid: null })

// calling the dispatch with updated input
 const emailChangeHandler = (event) => {
    dispatchEmail({ type: 'USER_INPUT', val: event.target.value })

  };

React Hooks useEffect()

Harry J Beckwith — Thu, 19 Aug 2021 08:47:58 +0000

Using hooks in javascript is a way to tuck into pre built methods that come with React 16.8 up.

What is it?

The Effect hook is used to prevent infinite loops occurring within you applications. It allows you to perform side effects in function components.

For example on landing on the page, the logic inside the component, triggers a state change on page load. The component now re renders (due to the state change), which then calls the logic again, this creates an infinite loop.

Using Effect allows to control when the logic can be called. Avoiding the infinite loop.

How to use it?

import React, { useEffect } from 'react';

useEffect(()=>{},[])

The Effect hook, takes a function and an array of dependencies.

When to use it?

Used when the page is reloaded to check logic and update state. Or when returning to a page.

Also to re run logic when state has been changed.

Code example

  const [enteredEmail, setEnteredEmail] = useState('');
  const [formIsValid, setFormIsValid] = useState(false);

 useEffect(() => {
    setFormIsValid(
      enteredEmail.includes('@')
    );
  },[enteredEmail])

  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

Above, we use Effect to run when the page is loaded. Checking the state for validation. We can then also re run this Effect function when the dependencies passed into the array [enteredEmail] change.

Effect takes a clean up function also like so

useEffect(() => {
    console.log('effect running')

    return () => {
      console.log('effect running clean up')
    }
  },[enteredEmail])

The return function that logs effect running clean up. Runs every time firstly before anything else inside the effect hook. Apart from the first time the function is called (page load).

Clean up can be used for example with a setTimeout function and clearTime out. To insure the Timeout is finished. Example of clean up...

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('check validity!')
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    }, 500)

    return () => {
      console.log('clean up')
      clearTimeout(identifier)
    }

  },[enteredEmail, enteredPassword])

Active class v-for

Harry J Beckwith — Fri, 05 Feb 2021 15:52:02 +0000

v-for Vendetta 😄

Using v-for inside a template is pretty common within a Vue app. It can become tricky if you wanted to toggle an active class on the selected item only and not every item inside the loop. Let's see how…

Template app.vue

<template>
     <div>
        <div 
        v-for="(item, i ) in items" 
        :key="i"
        :class="{ active: i === activeItem}"
        >
         // some looped items from data here
         // button for active toggle 
            <button @click="selectItem(i)"> {{item}} make item active </button>
        </div>
    </div>
</template>

The above, we have a basic app.vue file template. A v-for looping over items with i set for the index. The class is then bound to active, only when the index is equal to the activeItem, will this equal true and produce the active class.

Data and methods

<script>
export default {
    data() {
        return {
            activeItem: null,
            items: ['mike', 'chris', 'bob']
        };
    },
    methods: {
        selectItem(i) {
            this.activeItem = i;
        },
    },
};
</script>

First, we set the activeItem data = null.

Then we change this data with the selectItem method, which takes the index as a parameter and updates the activeItem to match the index of the clicked item. Now when we click on the first item, activeItem = 0, i = 0, therefor the first item will be given the active class, and the other items will not.

A pretty simple solution but works well, if possible you can change the data being looped over and store a isActive key and value and toggle this way also.

Vuex -- how to use

Harry J Beckwith — Thu, 04 Feb 2021 13:31:28 +0000

When an app becomes complex in terms of where data is being passed between multiple components, it is time to make use of Vuex. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralised store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Why use Vuex?

Vuex provides one source of truth
Every component has access to the global state
The global state is reactive, just like local state
Reduces component data tracking from becoming complex.
Vuex provides a state pattern to make updates standardized.

To set up Vuex you have to install the npm package.

npm i vuex --save

Inside the src folder, we can now set up a store.js file.

Heres how the store.js file would look.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
});

Inside main.js we can link the store to the Vue instance by importing the store file and added to Vue…

import Vue from 'vue';
import App from './App.vue';
import { store } from './store/store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

Right now we have the store set up 🥳 but we cannot access or edit yet 😕.

Mutations

Commit + track state changes
The best practice is for actions to call mutations then mutations update the state directly.
Using the dev tools we can roll back mutations back to the previous state value.

Getting the state from Vuex into computed properties.

Inside the store.js we can create getters, these interact directly with the state in the store. They are used to get the state. We can then display the getters inside components through computed properties.

Documentation for getters here.

Store.js file with state and getters set up.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: { id: 'aaa', name: 'Adsasas' },
    events: [
      {
        id: 1,
        title: 'title one',
        organizer: 'a'
      },
      {
        id: 2,
        title: 'title two',
        organizer: 'b'
      },
      {
        id: 3,
        title: 'title three',
        organizer: 'c'
      }
    ],
    categories: [
      'sustainability',
      'nature',
      'animal welfare',
      'housing',
      'education',
      'food',
      'community'
    ]
  },
  mutations: {},
  actions: {},
  getters: {
    catLength: state => {
      return state.categories.length
    },
    doneToDos: state => {
      return state.todos.filter(todo => todo.done)
    },
    activeTodosCount: state => {
      return state.todos.filter(todo => !todo.done).length
    },
    getEventById: state => id => {
      return state.events.find(event => event.id === id)
    }
  }
})

How to link the getters to components?

Use computed properties, but first, we can map the getters for easy access like so.

<template>
<div>
  <h1>Create Event {{ userName }}</h1>
  <p>There are {{catLength}} categories</p>
  <ul>
    <li v-for="cat in categories" :key="cat">
        {{cat}}
    </li>
  </ul>
  <p>{{ getEventById(3) }}</p>
</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapState(['user', 'categories']),
    ...mapGetters(['getEventById', 'catLength'])
  }
}
</script>

You have to import mapGetters from Vuex to be able to place inside the computed properties. Using the spread operator and pacing each getter as a string array item we can then reference individual getters inside the template.

We can also create getters that take arguments which are then used as a computed property and take input inside the template. The example for this is the getter getEventById in the above two code blocks.

Mutations

Can update/mutate Vuex State.
They are synchronous, they happen one after another.

Mutations documentation here..

Actions

Are asynchronous, they may not happen in the order they appear in the code.
Can wrap business logic around mutations
Always put Mutations within Actions — as business logic, later on, would be easy to apply, this increases the scalability.

Here we can see that mutation has been created that takes an event and pushes to the events array. The action is the code that we will dispatch to from the component, in turn, this calls the mutation and updates the store state.

Let's see how to call the action inside a component.

Actions documentation here..

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    categories: ['travel', 'fun', 'social', 'work', 'other'],
    events: [],
  },
  getters: {
    cat: state => {
      return state.categories;
    },
    getEventById: state => id => {
      return state.events.find(event => event.id === id);
    },
    events: state => {
      return state.events;
    },
  },
  mutations: {
    ADD_EVENT(state, event) {
      state.events.push(event);
    },
  },
  actions: {
    createEvent({ commit }, event) {
      commit('ADD_EVENT', event);
    },
  },
});

this.$store.dispatch('createEvent', this.event)

Referencing the store and dispatch with the name that matches actions function name, this will now send the this. event data into the action, then call the mutation and update the state.

Using the pattern above is a way to set up and use Vuex as the data point in your application was helps avoid tracking through components to see where the data needs to pass to. This can become bloated in larger applications so a module approach is needed to aid larger apps. Modules documentation can be found here.