Forem: Violeta

Using Next.js Router

Violeta — Tue, 30 Mar 2021 01:52:24 +0000

Next.js is a React framework that helps us build applications in a faster and easier way, offers make building large scale production ready React applications easier, leaving aside the part of the initial configuration since all that configuration comes by default.

In a typicall React application you need to add extra libraries to add some features like routing, authentication, etc. Next.js provides these features and you don't have to add as many third party libraries to solve common problems

To create a new Next.js project use:

npx create-next-app

How use Next.js Routing

In a traditional React app (not using Next.js) we configure routing based on code, for example:

<Router>  
      <Switch>
          <Route path="/" exact component={App}/>
          <Route path="/detail" exact component={Detail}/>
          <Route path="/admin" exact component={AdminMain}/>
        </Switch>     
</Router>

In this example, you specify the path and the component you want to show in that path, your components can be in any folder in your source, there is no specific way to organize the components within the code.

Next.js provide us with a more natural file base routing, you just need to follow some guidelines and then Next.js will infer the routes.

First you need a special folder named pages

Then, you organize your React components in a folder structure inside your pages folder according to your needs, for example, if we have the components and folder structure:

The index.js from pages will be our main page (for example: mypage.com)

The about.js from pages will be displayed when you access to mypage.com/about

For clients folder:

The index.js from pages/clients will be the page for mypage.com/clients

In Next.js you can add brackets to a page ([param]) to create a dynamic route, in this case the [clientid].js is the page for a specific client like mypage.com/clients/clientABC,

You can also catch all paths by adding three dots inside the brackets like in pages/clients/[...others].js, in this case Next will search for a path that satisfy this structure, something like mypage.com/clients/clientABC will match with pages/clientes/[clientid].js but mypage.com/clients/search/clientABC will match with pages/clients/[...others].js

To get access to the URL values in code Next.js provide a hook we can use, we need to import:

import { useRouter } from 'next/router';

useRouter give us various methods and data propierties we can use, for example: pathname provides the path of the component showed in the screen, query gives access to the value we get on a specific path

In our code we usually have to navigate to a page through a Link or an action triggered by a button, if you need a link Next.js have a Link component

import Link from 'next/link';

With Link you can use href property to specify the path which you want to navigate

<Link href="/clients">Client List</Link>
//or
<Link href={`/clients/${clientId}`} >{clientName}</Link>

or you can provide an object to href where you specify some values that next.js is expecting like pathname and query which is an object with the value you want to pass, in this case, clientId

<Link href={{
     pathname: '/clients/[clientId]',
     query: {clientId: client.id}
}} >{clientName}</Link>

If you use a button you can use router.push, with this you can specify the route:

function onClickHandler(){
   router.push('/clients');
}

or you can pass and object :

function onClickHandler(){
   router.push({
      pathname:'/clients/[clientId]',
      query: {clientId: client.id}
   });
}

Next.js also give us an easy way to manage a 404 page, you just need to add a file on your root pages folder and this file has to be named 404.js and Next.js always will render the component in this file when a 404 error occur.

useEffect Hook

Violeta — Sun, 07 Feb 2021 04:31:17 +0000

Hooks give us the ability to use the state and other React features writing a functional component instead a class based component.

One of the most used hooks is useEffect, this hook allow us to use something like lifecycle methods but in a functional component.

The first argument of useEffect is always a function and the second argument is an array of dependencies, this argument allows to take control of when we want to execute the function.

If you want to use useEffect hook you need to import:

import { useEffect } from 'react';

useEffect has 3 ways to use it:

When a component is rendered only the first time

  //Run at initial render 
  useEffect(() =>{
    console.log("Run at initial render ");   
  }, []);

You have to pass an empty array and code inside the function only will be executed one time, only when component is rendered

When a component is rendered the first time and every time dependencies in array had changed

  //Run at initial render and every render if total has changed 
  useEffect(() =>{
    console.log("Total has changed to: "+total); 
  }, [total]);

You can pass an array with the variables you want, you can pass one or more values and the function will be executed every time one variable changes.

When a component is rendered the first time and every time it rerenders

useEffect(() =>{    
    console.log("First time and after every render "); 
  });

With this method you don't pass an array.

Be careful with the array dependencies because you could fall into an infinite loop or have performance issues, especially when no dependencies are declared.

You can see an easy example here

Using Redux with React

Violeta — Mon, 01 Feb 2021 15:22:30 +0000

The purpose of this post is to explain in a simple way how to use redux in a react application.

React is component based, every component can share properties between other components from parent to child using the props system, the props are immutable data a component cannot change.

Every component manage its own state, the state contains information that is relevant to one component at a
specific time, has an initial default value and its value eventually varies usually in response to a user action.
Every time the value of state changes the components are updated immediately.

Sometimes you need to share information between components at same level or from child to parent, not from parent to child, and change values in response a user action, to solve this you can use Redux.

Redux is a state management library, it makes complex applications easier to handle.

Case to solve

I have two compoments: ClientForm and ClientList, when I enter a new Client I need validate if the new client already exist in my client list and if not, add the client to the list, these are separate components and are at the same level.

How to solve

It seems like we need a shared client list between the components, we can't pass it through props because components are at the same level and props are immutable so we can't add new values to the list.

Redux provides a repository(store) outside the components where we can manage the state and is responsible for keeping the information updated and providing it to the component that requests it.

Implementing Redux

First create a react app, go to the root folder and install redux and react-redux libraries with:

npm install redux react-redux

redux is the redux library and react-redux makes react and redux work together

In the src folder add folders for: actions, reducers and components

Redux Components

Action

An Action is event that describes something that happened in the application, in this case add client or list clients. Every action has a type and a payload.

In the actions folder create files: types.js and index.js

types.js contains the types of actions we will use, these are just constants to prevent any typing error

export const ADD_CLIENT = 'ADD_CLIENT';

index.js will contain the actions for the application.

import {
    ADD_CLIENT   
}from './types'; 

export const addClient = (client) => {     
    return { 
        type: ADD_CLIENT, 
        payload: client 
    };
};

Reducer

A Reducer is a function that handles events based on the received action type and decides how to update the state if necessary.

In the reducers folder create files clientReducer.js and index.js
clientReducer will contain the actions to handle events from clients

index.js contains a special function which combines all reducers in your app

import { combineReducers } from 'redux';
import clientReducer from './clientReducer';

export default combineReducers({
    clientReducer,

});

in clientReducer we have the functions in response to the action:

import {
    ADD_CLIENT,
}from '../actions/types'; 


export default (state = []  , action) =>{ 
    switch(action.type){

        case ADD_CLIENT:               
            return [...state,  action.payload] ;  

        default:
            return state;
    }
}

Store

Store is a centralized repository where the app state lives.

Provider

Provider is the one that provides values in the state to the other components of the application.

We will configure the provider in src/index.js:

import { Provider } from 'react-redux';
import { createStore  } from 'redux';
import reducers from './reducers';

const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </Provider>,

You need to import Provider, createStore and your reducers to create store and pass the store to the provider.

mapStateToProps

indicates how to transform the state of the store into the props that you want to pass to a component, you define this function in the componentent where you need use the state

const mapStateToProps = (state) =>{   
  return { 
    clientList: state.clientReducer, 
  };
}

in this case we have a clienteReducer which has an array of clients, in mapStateToProps we indicate that the array will referenced as clientList in the props

//searching if the client exists 
    const val  = props.clientList.filter(
        cli => cli.name == client.name);

connect

The connect function connects a React component to a Redux store

export default connect(mapStateToProps, {
  //actions
  addClient,  
})(ClientForm);

Once we have mapStateToProps and connect function in our component we can call through the props values from the store or send values to the store

For example, adding a new client we validate if the client exists in the client list (getting the cliente list from the store) and if not exists add new client ( setting the cliente to the store and updating the list with the new values for the ClientList conent)

const addCliente = () =>{    
    //searching if the client exists 
    const val  = props.clientList.filter(
        cli => cli.name == client.name);
    //if not exists add client to list 
    if(val.length === undefined || val.length === 0){
        props.addClient(client);
        setClient({name: '', email: ''});
    }else{
        alert("Client already exists ");
    }
  }

The complete code is here

Material-UI Theme configuration

Violeta — Sat, 30 Jan 2021 03:22:20 +0000

A theme allows you to establish a consistent design throughout the application and helps to meet the design requirements of your business or Brand.
Material-UI has a default theme you can customize, i’m going to show how configure Material-UI on a React App for light and dark theme.

Firts, in the root folder of your react app you need to install material ui and material ui icons with the sentences:

npm install @material-ui/core

npm install @material-ui/icons

If you want to use Roboto fonts, you have to add next line on your index.html

<link rel="stylesheet" 
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Configuring the theme

You can see the default theme configuration here, the theme object contains all properties you can change.

In the src folder add a file theme.js, i’m going to create a new folder theme inside my src folder and inside a theme.js file and overwrite the palette and typography properties.

Using createMuiTheme you create a new theme overriding the default configuration with the new values

Palette

Palette object contains the colors for material ui componentes and you can define mode ligth or dark (type property) for your application.
You can use the material ui palettes based on material desing guidelines or you can develop your own band palette

Typography

Let you change the font family and size.

import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import blue from '@material-ui/core/colors/blue';

const theme = createMuiTheme({
  palette: {
    type: "ligth",  
    primary: {
      main: indigo[900],
    },
    secondary: {
      main: blue[300],
    },
  },
  typography: {   
    fontFamily:'Roboto',
    fontSize: 14,    
  },
});
export default theme;

Once the theme is configured we use the ThemeProvider component to apply the theme to the entire application, for this we add it in our index.js. If you want to use dark mode you have to include your App in a Paper component otherwise you can't see the dark mode on screen.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme/theme';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Paper style={{height:"100vh", width:"100vw", }}>
      <App />
    </Paper>
  </ThemeProvider>,
  document.getElementById('root')
);

Now adding an AppBar, Buttons and Inputs components we can see the theme colors according theme specifications, for example:

<Button variant="contained" color="primary">
  Primary  
</Button>

<Button variant="contained" color="secondary">
  Secondary  
</Button>

<Button variant="contained" >
  Default  
</Button>

You can see the code here