React learning guide
Tags: react, javascript, frontend, developer
Published: 2021-09-06 13:32:48

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpa41njjntficjo0satd.png)

<h3>How do you go about learning React?</h3>

- 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.


<h3>What is React?</h3>

- 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.

<h3>How does react work?</h3>

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.

<h3>What is declarative code?</h3>

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

<h3>What is JSX?</h3>

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

<h3>State vs props</h3>

- 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.

<h3>What is reactDOM?</h3>

- 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.

<h3>Explain hooks?</h3>

- 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.

<h3>What is Redux?</h3>

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

<i>Core concepts</i>

<b>useState</b>

{% gist https://gist.github.com/harrybeckwith/6ab7af831f6537d7c8fd6592563e2aa7 %}

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

<b>prevState</b>

{% gist https://gist.github.com/harrybeckwith/f7198fa8636f74b4c397149b3652e05d %}

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.

<b>props</b>

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.

{% gist https://gist.github.com/harrybeckwith/2bb455a87731fa6a086708e79d2a464f %}

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

<b>Lifting up state</b>

{% gist https://gist.github.com/harrybeckwith/83fab5d98e7e357a2da8d2529c4e9ce2
%}

The above gist

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

<i>Button.js</i>

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.

<b>useRef</b>

{% gist 
https://gist.github.com/harrybeckwith/ed4a285084168aa8dddd86059e2b8315
%}

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.

<b>Fragments</b>

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

{% gist 
https://gist.github.com/harrybeckwith/5f6580a8b5d839e342d41acafbb647e2
%}

With Fragment

{% gist
https://gist.github.com/harrybeckwith/58d8d4307c5b3c65f14b1b80dca84434
%}

<b>Forward refs</b>

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.

{% gist 
https://gist.github.com/harrybeckwith/1333f84032260192d7a0519777a580b8
%}

Above gist

<i>App.js</i>

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


<i>InputText.js</i>

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.

<b>Use effect</b>

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.

{% gist
https://gist.github.com/harrybeckwith/36655e01fe5ad880a29d3b1be731d5c9 %}

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.

<b>useEffect dependencies</b>

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
 
{% gist 
https://gist.github.com/harrybeckwith/9085794f88df4fb11712cfb829aa6edc
%}

<b>useReducer</b>

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.

{% gist 
https://gist.github.com/harrybeckwith/bca155d1c0f762662f75e702db2d8b7f
%} 

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.

<b>Conclusion</b>

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.