DEV Community: Dillon

Getting Hooked on React

Dillon — Tue, 21 Feb 2023 21:47:55 +0000

Hooks are special functions. Hooks CAN ONLY be called inside the body of a function component.

Rules of Hooks:

Thou shalt call the Hook within the scope of a react application.
Thou shalt call your hooks from the toop level of the component. (this error would call if you were to try to call your hook in a conditional. it doesn't like this because calling it within a conditional means that you could simply not call it in a specific case.)

useState - enables us to hook into the component's state
useId - enables us to store a unique identifier on the component instance

You should not mess with or try to update state.

In javascript, you could do this, but it is a big "no-no" in react.

React.useRef(initial value) -- if you leave this blank, it is undefined.

React states shouldn't be mutated, react refs are meant to be mutated.

Refs are an object to what is being referred. So, if you are calling a funciton using useRef, you have to slide in the refName.current.value to get to the value you want. Otherwise, you aren't getting past the {current: "whatever"}

State

Dillon — Mon, 20 Feb 2023 15:45:01 +0000

State - used for values that change over time.

useState creates state variables

useState takes a single value, which is the base state, initial value.

React.useState(0);

useState is a hook

useState returns an array with current value of state variable and a funciton you can use to update the astate variable

in the example of Jonny Appleseed's apple counter you would have the following syntax

function Appledieapp() {
const [apple, setApple] = React.useState(0);
return (
setApple(apple + 1)}>
Apples: {apple}

);
}

Wrapper Function

Dillon — Mon, 20 Feb 2023 00:27:42 +0000

If you want to specify arguments for a function, you need to use the wrapper function

it looks like this...

if the function were to be called by clicking a button

function thisFunctionName(param){
stuff the function does
}

thisFunctionName('param')}>
Button text

A Kafka Object Metamorphizes Into An Array

Dillon — Sun, 19 Feb 2023 22:42:23 +0000

Object.keys

This pulls the keys of an object and puts them into an array. for ex.

{flavor: cherry,
price: 12.99,
size: large}
Object.values
Object.entries

Iterating over object data

Dillon — Fri, 17 Feb 2023 02:15:48 +0000

To convert object data into array data, there are three different ways.

Object.keys(), Object.values(), Object.entries()

Object.keys(arrayName) will return an array of the keys in the object.

Object.values(arrayName) will return an array of the values in the object.

Object.entries(arrayName) will return an array of the key-value pairs in the object.

Fragments

Dillon — Thu, 16 Feb 2023 16:11:29 +0000

Fragments are special components that do not produce DOM nodes.

The syntax is pretty similar to normal function, except...

function Whatever(){
return (

What you want

Baby I got it

);
}

export default Whatever;

In lieu of the open and close tags, you can just have <></>.

***This is the way to overcome the error Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>

React Application Structure

Dillon — Thu, 16 Feb 2023 02:12:56 +0000

For the most part, React apps have a common structure.

index.js This is best thought of as a the place where the first bit of code is executed. You also call createRoot and render from react-dom here.

This file typically renders

App.js This is kind of the floor plan or the schematics of the app.
Modules

REDUCE for Array

Dillon — Thu, 16 Feb 2023 01:27:54 +0000

.reduce()

Reduce iterates over array elements. Reduce needs one additional argument.

books.reduce((accumulator, otherParam) => {
return accumulator;

}, 0); the 0 here is the starting point or what gets iterated over.

If we wanted to count up the number of books sold from among our array, we would have the following...

const books = [
{title: The Great Gatsby, author: Fitzgerald, sales: 2},
{title: Odyssey, author: Homer, sales: 1889},
{title: Hyacinth, author: Julien Linde, sales: 275},
{title: Goldfinch, author: Tart, sales: 1089}
];

const bookSales = books.reduce((accumulator, book) => {

return accumulator + book.sales;

}, 0);

console.log(bookSales)

MAP, MAP, MAP

Dillon — Thu, 16 Feb 2023 00:32:35 +0000

.map

Let's Goooooooooo

Map can transform the array. It doesn't change or mutate the old one, it creates a new one.

you can do this really neat thing with arrays where you can utilize the .map feature to add only to those nested objects where a certain criteria is met, the ones that don't meet the criteria don't have any value added, not even to say that it is false.

say you have an array of books. Each book has a objects that have its title, author, and number of sales. from number of sales you know that if the total sales exceeded 100 (sales in thousands), it was a best seller.

here's the code that would allow you to add in the value if the object should have the best seller line added.

const updatedBooks = books.map(book=> book.sales > 100 ? {...book, bestSeller: true} : book);cons

console.log(updatedBooks)

btws... you will have to add in quotes around the author and title values

.forEach()

This is powerful and lets us work off the arrays we have built.

Using the array we created above with the bestSeller value included, we can alert the user if the book was a best seller. We will demonstrate chaining here.

books.map(book=> book.sales > 100 ? {...book, bestSeller: true} : book).forEach(book => {
if (book.bestSeller) {
console.log(${book.title} written by ${book.author} was a best seller!!
}

})

React Application Structure

Dillon — Wed, 15 Feb 2023 23:51:00 +0000

For the most part, React apps have a common structure.

index.js This is best thought of as a the place where the first bit of code is executed. You also call createRoot and render from react-dom here.

This file typically renders

App.js This is kind of the floor plan or the schematics of the app.
Modules

My Learning React Notes

Dillon — Tue, 14 Feb 2023 21:39:35 +0000

.js in React files have the following format

IMPORTS This is where you put stuff you are importing.

import React from 'react';
import {createRoot} from 'react-dom/client';

***note for mobile, it is react-native
react-dom is for the web

The Element

How to create a react element

cont elementName = React.createElement(

)

EXPORTS const contaier = document.querySelector('#root') **This is basically the instruction telling it where to go. *the page(s) where you want to put this element say this is where they go by your putting #root in. const root = createRoot(container); **you have to create the container that the element will go in. root.render(element);

Understanding Arrays

Dillon — Tue, 14 Feb 2023 16:28:47 +0000

To create an array

const = arrayName = [];

To add items to an array, you can use the .push

myToDoList.push(todoA, todoB);

alternatively you could do
myToDoList.push(todoA);
myToDoList.push(todoB);
myToDoList.push(todoc);

to return the last item

console.log(myToDoList.[myTodoList.length-1])

to remove the last item

myToDoList.pop();