Here is 10 new things That i have learnt today.

1) Props can’t directly changed:

Every functional component ideally consider as a ‘pure’ function. That means Props are immutable and we can expect same result for each props against each single input value.

We cannot change the props value in child component rather we can read it to use in child class.

Let’s see an example to clarify it.

const Username=(props)=>{props.username = 'new name';  //invalidreturn <h1>Hello {props.username}</h1>;}

2) React App requires:

The most basic React app requires mainly three things:

· ReactDOM.render() to render our app

· A JSX element (called a root node in this context)

· A DOM element within which to mount the app (usually a div with an id of root in an index.html file)

import React from "react"import ReactDOM from "react-dom"const greeting = <h1>Hello React</h1>;ReactDOM.render(greeting, document.getElementById("root"));

3) Events and Event Handlers:

There are numerous types of events in Js but the most essential react events to known are onClick and onChange.

i) onClick handles click events on JSX elements (namely buttons)

ii) onChange handles keyboard events (namely inputs)

Example:

<input type=”text” name=”myInput” onChange={handleChange} /><button onClick={handleSubmit}>Submit</button>

4) State Vs Props:

State:

State generally use to maintain data inside a component. It is local accessable property for that specific component. The component itself will update the state using the setState function.

Props:

Usually by using props data can send from parent component to child component.So that props are immutable, it can read-only in the child component that receives them. However, callback functions can also be passed, which can be executed inside the child to initiate an update.

5) What is Web Accessibility

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.

How to Make the Web Accessible

· Semantic Code

· Images, alt-tags and title tags

· Accessible by Keyboard

· Content Control

· Follow ARIA Good Practices

· DOM Manipulation by CSS

· Multimedia content

· Avoid Tables and Complex Layouts

· Choose Colors Carefully

· Design Forms with Accessibility in Mind

6) Lazy Loading:

Lazy loading is a way to delay loading of any object when it is needed to optimize the loading time. To do that a new function helps to load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later.

7) Semantic HTML

Semantic HTML is like pure HTML. It is the foundation of accessibility of web-applications. Elements such as <header> , <footer> and <article> are all considered semantic because they accurately describe the purpose of the element.

Example:

function Hello(){return(<h1>Hello World</h1>)}

8) Higher-Order Components

A higher-order component is a function that takes a component and returns a new component.

Example

const NewComponent = HigherOrderComponent(CallbackComponent);

9) Code splitting

Code splitting is a technique with which we can address both costs of loading JavaScript and be compliant to the concepts of laziness at the same time. One of the most common paradigms in code splitting is to split components at the route level. This will leave us with a separate bundle for each top level route. Example:

const Home = Loadable({
loader: () => import(‘./Home’),
loading: () => <div>Loading… </div>
})const Blog = Loadable({
loader: () => import(‘./Blog’),
loading: () => <div>Loading…</div>
})const App = () => {
<Router>
<Switch>
<Route exact path=”/” component={Home}/>
<Route path=”/blog” component={Blog}/>
</Switch>
</Router>
}

The improvement that we get here is that the user will have to load only the resources for the page that he visits.

10) The Lifecycle of a React Component

Every react application are a combination of multiple components or single component. Lifecycle methods are used to interact within components.

Generally, a React Component’s life cycle can be divided into three categories:

i) Mounting

ii) Updating

iii) Unmounting

Mounting

When React creates an instance of a component and inserts it into the DOM (mounting), the following methods are called:

· constructor()

· componentWillMount()

· render()

· componentDidMount()

Updating

When we want to change any property of a component, an update of that component is performed. However, this means that the component has to be re-rendered, which causes the following methods to be called:

· componentWillReceiveProps()

· shouldComponentUpdate()

· componentWillUpdate()

· render()

· componentDidUpdate()

Unmounting

At some point, our components will be removed from the DOM again. That process is called unmounting and means that the following method is called:

· componentWillUnmount

Thats all.Happy learning.