DEV Community: JRIVERADDIAZ

Hooks useState & useEffect

JRIVERADDIAZ — Fri, 10 Mar 2023 06:44:09 +0000

Now is the turn of the react.js hooks means the main functionality of the react.js, sometimes at the beginning of the learning route is a little bit hard to understand cause there is a level of abstraction on those, basically you can learn it, but understanding these are a pre-code container which allows us to make some changes, keep alert for a change on the app, save states on the page, etc.

The question here is:
what does it make?
how can I use it?

useState

This hook allows us to make some changes to the state of the page, I mean you gonna save something on the state (object, number boolean, string, array, etc.)

the structure is easy to understand :

useEffect

This hook allows us to handle state and lifecycle methods for a component

this hooks is a listener of a change that renders the virtual DOM when a change is made,

Redux Basic Configuration and folder & files Mid.

JRIVERADDIAZ — Fri, 10 Mar 2023 05:03:47 +0000

Hi fellas , in this text I'll explain the basic redux files and folders admin this files are completely able to be save in to another folder, if you have a big app or if you're building a big one also this is a nob to mid level text so you'll need to learn the basics cause if not maybe you gonna mix the knowledge and it will be hard and frustrating but let's move on

first of all the extensions we'll gonna use on this:

npx create-react-app
npm i react-router-dom@6 install the router v6 dependency
npm i redux
npm i react-redux
npm i redux-devtools-extension
npm i redux-thunk

once he have a the npx complete and the un-useful files were deleted we need to create a new folder
inside the src folder called store and the file called store.js

repeating the same process we'll need to build another folder and file called actions, reducers, store & types

this is the structure, we want to build

src
├───actions
|      └ actions.js
├───reducers
|      └ reducer.js      
├───store
|      └ store.js
└───types
|     └ types.js
└───App.js
└───index.js

next we gonna type code and start to save the types as you've the redux use a switch to manage the actions in order to get, update, create or delete the properties on the stored object without mutate it out so instead we have all the logic on the same function let's split out


export const types = {

  authLogin: '[auth] auth login',

}

once we've built it out the next step is open the store.js and just to get in deeper this store will be the truth of all the info we gonna manage on the app

concepts: like the name explain is the storage of the info that we want to manage let's gonna think as a bag of objects were gonna be on it and after we gonna request and dispatch


import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import { rootReducer  } from "../reducers/rootReducers";

const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

export const store = createStore(
    rootReducer,
    composeEnhancers(
        applyMiddleware(thunk)
    )
)

Provider pattern.

JRIVERADDIAZ — Fri, 10 Mar 2023 03:51:10 +0000

The provider pattern is one of the most basic patterns that allows understanding the context API on react and use context hook, sometimes is very hard to implement cause is weird if you are a beginner, the basic trouble here is that the props heritage is too hard to maintenance if you are making a UI that have to use the info stored on it, also if some data is needed on all the app we can make it using this pattern that is the main purpose.

As you can see in this image the props have passed through the children of this component and if this is spread along the app using a component stack will be hard to understand the code.

In this diagram, you'll see the props are passed through the parent down to the children and the context that is on the app sharing the info all around the app.

The context is just there, you have to call it and the code is clear than using props a plus is that you can mutate the state.

As you can see on this image we are using the context, that is included on the react.js create react app or create vite

We have to make create a context wich can be (bollean, objetcs, arrays, numbers, string) that will be propagated all around the app.

We need to use the children, this allow us to wrap the information from the context all around the app, and make the context callable usign the useContext() hook.

Now, this is an example, in a common react.js component.

How, we are making a request to the global context, using useContext hook.

This allow us to make it out and get the info stored on it

React.JS components, props & state

JRIVERADDIAZ — Sun, 05 Mar 2023 03:43:32 +0000

Components, props & states, those three are the basis of react.js, and are on our daily tasks and walk throught us, react devs, align these 3 pieces to make the bread, in this article, we’ll get in deeper until the bone.

Components

The components are the pieces of coding that allows to build APP'S, in short without redundancies, the components are the pieces of the puzzle that allow us to make the UI in a shorter time frame, also this is the very esasiest way cause in a vanilla delelopments the code can be confused.

components are functions that returns pieces of the UI, in a jsx sintax that will be transpileda along with the functionallity, also the components has a life-cicle wich is very easy to understand,the react,js creates a virtual dom that is a copy of the DOM, the DOM three is all those html elements on the app, now the life-cicle steps are:

-Instantiation: The component is created and initialized with its initial state and properties.

-Mounting: The component is added to the virtual DOM or real DOM and rendered on the screen.

-Updating: When the component's state or props change, the component re-renders to reflect the changes.

-Unmounting: The component is removed from the virtual DOM or real DOM and destroyed.

keep this on mind please cause some errors can be avided having this info while you're developing an APP.

This is an example of a component, that is handling a title it should be called in an app title fragment and also it is the react.js philosophy to make the development and management easy for us.

This is a layout as you can see, the app is composed by 4 components that allow us to make each of these independet in between, and also we can make each of them share information but we have to take care cause there are some anti-patterns that will cover into another articles.

Props:

There is something called PROPS that can be confused with STATE but what is it?, the props are properties wherever it is (booleans, numbers, string even functions, etc.), those props are just properties that cannot be modified cause the root is a static information none as states, props are immutable.

State:

The state is a piece in the memory that works as a very small info repo, we can explain it as a box that should have a non-mandatory-typo, but it have should be specified(as an object, string, number, or boolean, etc) this can be muted and modified by other components that manage some info in between them.

please feel free to reply if any misinformation is found or missing information has to be added or info needs to be modified

Controlled & Uncontrolled forms

JRIVERADDIAZ — Tue, 03 May 2022 04:26:23 +0000

Controlled and Uncontrolled form inputs React.js

Hi there!, in this article, we'll learn about the controlled and uncontrolled inputs, wich allow us to manage forms,
this info will help you to choose the best option.

Basically when somebody asked you, what are controlled and uncontrolled forms?, you would answer, the controlled forms are linked to the state and help to manage live, while it's been modified we can structure the code to sanitize, manipulate, etc. the input and the uncontrolled are attached to the dom native handling the input before we click on enter or sumbmit the info on the input, alow us to sanitize, manipulate, etc. before, so lets see ->

The uncontrolled input handlers:

the uncontrolled component indicates that the info will taken by a uncontrolled way, that means we have to catch the data linking the input to the state directly using a useState waiting for the submit in order to make something, so the input state (initial values, changes on the input etc.) are not handled by react just handled by the dom nativelly such as value tag, etc.)

import React, { useState } from 'react';

function App() {

  const [search, setSearch] = useState('')

  const submit = (e) => {
    e.preventDefault();
    setSearch(e.target.search.value);
  }

  console.log(search);

  return (<>

    <form onSubmit={submit}>

      <input
        type='text'
        name='search'
        autoComplete='off ' ></input>
      <button> submit </button>
    </form>
  </>
  );

}
------------------- Example 2 -------------------

import React, { useState } from 'react';

function App() {

  const [search, setSearch] = useState('')

  const submitTwo = (e) => {
    e.preventDefault();
    setSearch(e.target.value);
  }

  console.log(search);

  return (<>
    <form>

      <input 
        type='text'  
        name='search' 
        autoComplete=' off ' 
        onChange={submitTwo} ></input>
      <button> submit </button>

    </form>
  </>

  );
}

export default App;

as you can see the input uncontrolled catch the info at the moment you clicked on the button it didn't catch out before or during the typing process.
you are able to click on it 'n' times also it means you're able to get the info but it's not dynamic or reactive

friendly reminder put attention on the onClick event and onSubmit that's the key

why uncontrolled?? it means the info will be catched once we submit and call the handler, it's less dynamic and we are not able to sanitize while we are typing, and we'll need to sanitize every info on an input filed but in this uncontroled, it's posible but just when we request it out , it is not wrong or bad it's just uncontrolled , it doesn't mean is wrong or something bad it is uncontrolled and has it's own benefits.

The controlled input handlers:

the controlled form handle inputs means to a handle way by react (initialvalue, changes on the input etc.) wich allows to get each piece of data since it been filled, it's so helpful cause along with a format data function it can be formatted while the info is adding to the input also your able to apply the functionality you wants imagination is the limit

import React, { useState } from 'react';

function App() {
  const [search, setSearch] = useState('')

  const submitOne = (e) => {
    e.preventDefault()
    setSearch(e.target.value)
    console.log(search)
  }

  const sentInfo = (e) => {
    e.preventDefault()
    console.log(search)

  }

  return (<>

    <form onSubmit={(e) => sentInfo(e)} >

      <input
        type='text'
        name='search'
        autoComplete='off'
        value={search}
        onChange={submitOne}
      ></input>
      <button> submit </button>
    </form>

    <p>{search}</p>
  </>

  );
}

export default App;

friendly reminder the value it's important in order to complete this controlled input format

this value on the input will take each typed piece of info and along with a external matching function will help to check each character in order to get just the required onces

also like this doc shows each once is correct and useful just choose what's the best option, in regards the project you're working with so smile and keep coding.