blogreactofficial-blog

[blogreactofficial-blog]

How to use strict mode in React

In today post we are going to learn about what is strict mode and how to use strict mode in React. Strict mode is used for finding problems in our React app.

What is Strict Mode

React provides a component i.e React.StrictMode which find problems in our React app and show them as warning in the console.

Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants. Strict mode checks are run in development mode only. They do not impact the production build.

Example

import React from 'react'; function ExampleApplication() {  return (    <div>      <Header />      <React.StrictMode>        <div>          <ComponentOne />          <ComponentTwo />        </div>      </React.StrictMode>      <Footer />    </div>  ); }

In the above example React.StrictMode will runs the checks for all his children and will gonna show the warning regarding that in the console.

StrcitMode checks for problems in 5 areas and those are

Identifying components with unsafe lifecycles

Warning about legacy string ref API usage

Warning about deprecated findDOMNode usage

Detecting unexpected side effects

Detecting legacy context API

1. Identifying unsafe lifecycles

When strict mode is enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components.

2. Warning about legacy string ref API usage

React 16.3 added a third option that offers the convenience of a string ref without any of the downsides. Since object refs were largely added as a replacement for string refs, strict mode now warns about usage of string refs.

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.inputRef = React.createRef();  }  render() {    return <input type="text" ref={this.inputRef} />;  }  componentDidMount() {    this.inputRef.current.focus();  }

3. Deprecated findDOMNode usage

With the introduction of ref a lot of dom node handling become easy. StrictMode will display warning regarding any use of deprecated findDOMNode usage in your React app. We always prefer to use ref for controlling our elements now.

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.wrapper = React.createRef();  }  render() {    return <div ref={this.wrapper}>{this.props.children}</div>;  } }

4. Detecting unexpected side effects

Strict Mode detect for any unexpected side effects in the lifecycle methods of your app. Because lifecycle methods might be called more than once, it’s important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state.

5. Detecting legacy context API

The legacy context API is error-prone, and will be removed in a future major version. It still works for all 16.x releases but will show this warning message in strict mode.

I hope you have learned how to use strict mode in React.

[blogreactofficial-blog]

How to do routing in React

In this post we are going to learn how to do routing in React. Routing is the main concept that most of the web applications have independent of there language.

What is Routing

Routing is nothing but going from one url/page to another url/page within your web app. React doesn’t provide routing functionality out of the box. To handle routing you need to install react-router package.

How to install react-router

Installation of react router is same as any other normal package. You can install it using npm or yarn.

npm install react-router-dom

How to use React-router

You can use react-router in just 3 simple steps

Adding your router

Generating your routes

Navigate using link component or push function.

Adding your Router

You can choose one of these two routers

BrowserRouter

HashRouter

BrowserRouter

You can choose BrowserRouter if you have a backend server which is going to respond to every request from the browser.

import { BrowserRouter } from 'react-router-dom';

HashRouter

It should be only used for static web apps. In this case server is only gonna respond for files that it knows about.

import { HashRouter } from 'react-router-dom';

Generating your Routes

Routes are nothing but a way to specify path are there respective component. The Routers accepts only single child for that reason you need to wrap your routes with a parent div or you can also use Switch. Switch is nothing but a Component provided by the react router which basically render first child whichever match the path/url.

import { Switch, Route } from 'react-router-dom';    

<Switch>      <Route exact path='/' component={Home}/>      <Route path='/roster' component={Roster}/>      <Route path='/schedule' component={Schedule}/> </Switch>

Navigate using Link component or push function.

The last step is redirecting the user to another router on click of a link or a button.

Using Link

You can think Link Component as a tag which is similar to a tag of html.

import { Link } from 'react-router-dom';

<Link to='/'>Home</Link>

Using Push

You can also use push function to redirect to the new route. You can access push function from history which will be get from top most component of a route and it can also be get using HOC withRouter component from react-router-dom.

history.push("/")

[blogreactofficial-blog]

React.memo is used for performace. In the end of this article you will gonna learn what is React.memo and why should you use it in the React. https://blogreact.com/what-is-react-memo-and-how-to-use-it/

[blogreactofficial-blog]

In this post we are going to learn about how to use multi language in React. Here localization means changing language of text in our  React App.

Have you ever wondered how websites supports multi language feature. It’s not a rocket science. It’s pretty easy. We are going to use a 3rd party package for multi language support in our app.

react-localization

We are going to use package named react-localization in our app to support multi language and the best thing about this is that it is just 2.4kb code.

The library uses the current interface language, then it loads and displays the strings matching the current interface locale or the default language (the first one if a match is not found) if a specific localization can’t be found.

It’s possible to force a language different from the interface one.

Installation

The installation of this package is pretty straight forward. You can install it using below command:-

npm install --save react-localization

How to use

To use this package you first need to import it.

import LocalizedStrings from "react-localization";

After importing we need to create a new instance of this and need to provide an object of our text.

let strings = new LocalizedStrings({  en: {    how: "How do you want your egg today?"  },  it: {    how: "Come vuoi il tuo uovo oggi?"  } });

After adding the text we need to use the text in our render function.

{strings.how}

and to change the language we need to use its helper function. Which gonna receive only one parameter i.e language code.

strings.setLanguage(“en”);

If you want to go more deep it  also provides 3 more helper functions.

getLanguage() – to get the current displayed language

getInterfaceLanguage() – to get the current device interface language

formatString() – to format the passed string replacing its placeholders with the other arguments strings

import React, { useState } from "react"; import "./styles.css"; import LocalizedStrings from "react-localization"; let strings = new LocalizedStrings({  en: {    how: "How do you want your egg today?"  },  it: {    how: "Come vuoi il tuo uovo oggi?"  } }); export default function App() {  const [lang, setLanguage] = useState("en");  strings.setLanguage(lang);  return (    <div className="App">      <div>{strings.how}</div>      <button        onClick={() => {          setLanguage("en");        }}      >        English      </button>      <button        onClick={() => {          setLanguage("it");        }}      >        Italian      </button>    </div>  ); }

[blogreactofficial-blog]

How to use multi language in React In this post we are going to learn about how to use multi language in React. Here localization means changing language of text in our React App.https://blogreact.com/use-multi-language-in-react/

[blogreactofficial-blog]

How to use React visibility sensor

In this post you will learn how to use react visibility senor. If you manually try to achieve a functionality which gonna detect when a component is coming into viewport. That will be too confusing because in that functionality you need to add a scroll listener and need to calculate component size etc. Which maybe not a good idea. The alternative is to use a 3rd party library which is react visibility sensor.

React Visibility Sensor

This pacakge is a Sensor component for React that notifies you when it goes in or out of the window viewport.

Installation

You can install this pacakge with below command

npm install react-visibility-sensor

How to use react Visibility Sensor

To use it you need to import the component using below command import VisibilitySensor from "react-visibility-sensor";

and just need to wrap your own component with VisibilitySensor.

<VisibilitySensor onChange={onChange}>      <div>...content goes here...</div>    </VisibilitySensor>

Let’s create an example where we are going to render a large list and only going style visible list items.

 {lists.map(list => {            return containmentDOMRect ? (              <VisibilitySensor key={list} containment=               {containmentDOMRect}>                {({ isVisible }) => {                  return (                    <div                      style={{                        height: 100,                        lineHeight: "100px",                        color: "white",                        backgroundColor: isVisible ? "#593" : "#F33",                        margin: 5                      }}                    >                      I am #{list}                    </div>                  );                }}              </VisibilitySensor>            ) : null;          })}

It provides a prop to its child i.e isVisible. Based on that prop we can use our own custom styling for child components.

How to show components with partial visibility

It also take care of that if you want to display components with partial visibility you can add a prop partialVisibility to VisibilitySensor. Which is false by default.

How to use custom container for the React visibility Sensor

If you want to use custom container then you can use the prop containment which gonna accept a dom element. By default it uses browser viewport.

Where you can use it

You can use it on various places but most common are given below:

You can use it show thanks for visiting messages at scroll end of a page.

To load new data using api only when a specific component is visible.

Lazy load the component.

Load more content or comments when scrolls.

A bunch of more areas.

[blogreactofficial-blog]

Form validation in Reactjs

Form validation in Reactjs is always a big pain for the new developers. In this post we are going to learn about how to handle form validation in Reactjs. What are the types of inputs and what kind of restrictions we can add to form inputs.

Types of form input in Reactjs

In forms we have have total 22 types of inputs. Most of the time we don’t even use all 22 types of inputs in Reactjs.

Most used Input types

The below 9 inputs types are most commonly used in the Reactjs forms.

<input type=”date” />

<input type=”email” />

<input type=”number” />

<input type=”password” />

<input type=”submit” />

<input type=”tel” />

<input type=”url” />

<input type=”time” />

<input type=”file” />

Other Input types

The below inputs types are used rarely.

<input type=”button” />

<input type=”checkbox” />

<input type=”color” />

<input type=”datetime-local” />

<input type=”hidden” />

<input type=”image” />

<input type=”month” />

<input type=”radio” />

<input type=”range” />

<input type=”search” />

<input type=”text” />

<input type=”week” />

<input type=”reset” />

Required inputs vs optional inputs

So, the inputs can be required or it can be optional. To make an input required we provide required true prop to the input. The below input is required.

<input required />

To make an input optional we provide false value to the required prop to input or we can also skip the required prop to make it optional.

<input />

Attributes of an Input

An input can have following common attributes

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

Form validation in Reactjs

Adding validation min and max to an input

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

Example:-

Salary (between 100 and 500): <input type="number" name="salary" min="100" max="500" />

Adding custom regex pattern validation to input

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Example:-

An input field that can contain only three letters (no numbers or special characters)

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />

Making inputs required

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example:-

<input type="text" name="salary" required />

ref: W3School

Checkout best way to handle forms here in Reactjs.

[blogreactofficial-blog]

How to use React visibility sensor In this post you will learn how to use react visibility senor. If you manually try to achieve a functionality which gonna detect https://blogreact.com/how-to-use-react-visibility-sensor/

[blogreactofficial-blog]

How to create own reusable dialog in Reactjs

Today post is going to be more interested because today we are going to learn how to create own reusable dialog in Reactjs. https://blogreact.com/how-to-create-own-reusable-dialog-in-reactjs/