React JS Full Tutorial in Tamil

• In React every components has various lifecycle methods .

• All the lifecycle methods are comes under the four phases.

1. Initial Phase

2. Mounting Phase

3. Updating Phase

4. Unmounting Phase

Initial Phase

• In this phase the developer has to define the props and initial state of the component this is generally done in the constructor of the component

• getDefaultProps()
       It is used to specify the default value of this.props. It is invoked before the creation of the component.

• getInitialState()
       It is used to specify the default value of this.state. It is invoked before the creation of the component.

Mounting Phase

• After the initialization of the component is completed ,then the component is mounted on the DOM and rendered for the first time in the webpage.

• componentWillMount() Function: This function is invoked before the component is mounted on the DOM .

  • This function gets invoked once before the render() function is executed for the first time.

  • In the case, when you call setState() inside this method, the component will not re-render.

• componentDidMount() Function: This function is invoked after the component is mounted on the DOM .

  • This function gets invoked once after the render() function is executed for the first time.

  • Now, you can do any DOM querying operations.

Updating Phase

• Updation is the phase where the states and props of a component are updated followed by some user events such as clicking or pressing button.

• componentWillUpdate() Function:

  • This function is invoked before the component is rerendered .

  • This function gets invoked once before the render() function is executed after the updation of State or Props.

• componentDidUpdate() Function:

  • Similarly this function is invoked after the component is rerendered.

  • This function gets invoked once after the render() function is executed after the updation of State or Props.

• render()

  • It is invoked to examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number.

  • If shouldComponentUpdate() returns false, the code inside render() will be invoked again to ensure that the component displays itself properly.

• shouldComponentUpdate() Function:

  • It is invoked when a component decides any changes/updation to the DOM.

  • It allows you to control the component's behavior of updating itself. If this method returns true, the component will update.

  • Otherwise, the component will skip the updating.

Unmounting Phase

• componentWillUnmount()

  • This method is invoked immediately before a component is destroyed and unmounted permanently.

  • It performs any necessary cleanup related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements.

  • If a component instance is unmounted, you cannot mount it again.

• CSS – Cascading Style Sheets

• In React we use CSS to style the React App or Component.

• Here we are going to discuss mainly three ways to style React Components.

1.Inline Styling

2.CSS Stylesheet

3.CSS Module

• Inline styling :

To style an element with the inline style attribute, the value must be a JavaScript object. The styling must written inside two sets of curly braces {‌{}} .

If the properties have two names, like background-color, it must be written in camel case syntax.

• CSS Stylesheets :

You can write your CSS styling in a separate file, just save the file with the .css file extension, and import it in your application.

• CSS Modules : CSS Modules are convenient for components that are placed in separate files.

The CSS inside a module is available only for the component that imported it.

It means any styling you add can never be applied to other components without your permission, and you do not have to worry about name conflicts.

You can create CSS Module with the .module.css extension like a myStylessheet.module.css name.

Why we use redux in react ?

• Redux is an open-source JavaScript library for managing application state and building user interfaces .

• You can write Redux apps with React, Angular, Ember, jQuery, or vanilla JavaScript.

• If you have few components in your application, With the help of props, we can pass these variables from parent component to various other components (child components) .

• But as the number of components increases in the application , if we need to pass these props to other components located far away from each other in the component tree.

• At this moment, the usual way of transferring state as props to be complex

• Actions - Actions have a type of fields that tells what kind of action to perform. It includes information such as type of action, time of occurrence, location of occurrence, its coordinates, and which state it aims to change.

• Reducers - Actions only tell what to do, but they don’t tell how to do, so reducers are the functions that take the current state and action and return the new state and tell the store how to do.

• Store - The store contains the state of the components which need to be passed to other components.

• View − The view will receive data from the store and re-render the app.

• Sass - Syntactically Awesome Stylesheet

• Sass reduces repetition of CSS and therefore saves time.

• Sass have lot of features that do not exist in CSS, like variables, nested rules, imports, inheritance, built-in functions etc;

• Install Sass in your React App by running this command in your terminal

                         npm install node-sass

• Sass files has the ".scss" file extension.

• Sass uses the $ symbol, followed by a name, to declare variables

                         $variablename: value;

• A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling.

• Transpiling is a term for taking a source code written in one language and transform/translate it into another language.

• Forms play a major role in any website for login , signup etc;

• In React Forms work little different.

• In HTML, form data is usually handled by the DOM.

• In HTML elements like input tag, the value of the input field is changed whenever the user type.

• In React, form data is usually handled by the components.

• But, In React, whatever the value user types we save it in state and pass the same value to the input tag as its value, so here its value is not changed by DOM, it is controlled by react state.

• In React, whenever you want to render something on the screen, you need to use a render method inside the component.

• The render method will only render a single root node inside it at a time.

• However, if you want to return multiple elements, the render method will require a 'div' tag and put the entire content or elements inside it.

• This extra node to the DOM sometimes results in the wrong formatting of your HTML output and its not good semantic html code.

• Advantage of using react fragments is it take lesser memory and quicker execution.

• Hook state is the new way of declaring a state in React app.

• Hook uses useState() functional component for setting and retrieving state.

• useState is the Hook which needs to call inside a function component to add some local state to it.

• The useState returns a pair where the first element is the current state value/initial value, and the second one is a function which allows us to update it.

• After that, we will call this function from an event handler or somewhere else.

• The useState is similar to this.setState in class.

React Hooks State

• Hook state is the new way of declaring a state in React app.

• Hook uses useState() functional component for setting and retrieving state.

• useState is the Hook which needs to call inside a function component to add some local state to it.

• The useState returns a pair where the first element is the current state value/initial value, and the second one is a function which allows us to update it.

• After that, we will call this function from an event handler or somewhere else.

• The useState is similar to this.setState in class.

React Hooks Effect

• The Effect Hook allows us to perform side effects (an action) in the function components.

• It does not use components lifecycle methods which are available in class components.

• Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.

• React Router is mainly used for developing a Single Page Web Applications. It plays an important role to display multiple views in a single page application.

• Routing is a process in which a user is directed to different pages based on their action or request.

• When a user types a specific URL into the browser, and if the URL path matches any 'route' inside the router file, the user will be redirected to that particular route.

• Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple views.

React Router Installation

• React Router is a standard library system . If you want to create routing in the React application using React Router Package.

• It is not possible to install react-router directly in your application. To use react routing, first, you need to install react-router-dom modules in your application. The below command is used to install react router dom.

• $ npm install react-router-dom --save

• react-router-dom: It is used for web applications design.

                                   import { BrowserRouter as Router, Route, Link, NavLink, Switch }

• Route - is the conditionally shown component based on matching a path to a URL.

• BrowserRouter - is the router implementation It uses HTML 5 history API (i.e. pushState, replaceState and popState API) to keep your UI in sync with the URL.

• Memory Router: Memory router keeps the URL changes in memory not in the user browsers. It does not read or write to the address bar so the user can not use the bowser’s back button as well as the forward button. It is very useful for testing and non-browser environments like React Native.

• Link - is your replacement for anchor tags. Sometimes, we want to need multiple links on a single page. This <Link> component is used to create links which allow to navigate on different URLs and render its content without reloading the webpage.

• NavLink - component is used to add styles to the active routes and add properties activeStyle. The activeStyle properties mean when we click on the Link, it should have a specific style so that we can differentiate which one is currently active.

• Switch - The <Switch> component is used to render components only when the path will be matched. Otherwise, it returns to the not found component.

•If you like your user can contact you via gmail but from your website and you want to redirecting your user to there gmail app or browser once they click the contact me on mail button or link in your website.

•Then you use this below line on your gmail console.

1.First copy the below command line

navigator.registerProtocolHandler("mailto", "https://mail.google.com/mail/?extsrc=mailto&url=%s","Gmail");

2.Open your gmail on your pc or desktop and then press

ctrl+shift+j on windows, you see the console on your browser window and then you paste the above lines of code and click enter.

3. Click the allow/accept button on the pop-up window.

4. Now your Gmail App is as your default mail client for all mailto: links in Chrome and Firefox.