10 important React.js Concepts

React is a popular javascript library. It is used in web development to make interactive websites. Now I discuss about 10 important react.js concepts. Here they are:

1. Component: React is all about component. React components are like function. A React component takes an optional input and returns a React element which is rendered on the screen. We can reuse a component. Component can contain other component. There are two types of components.

· Class Component

· Functional component

2. React state: state is like an object. It holds information that may change. When the state objects change, the component re-renders. Lets see an example:

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {brand: “Ford”};

}

render() {

return (

<div>

<h1>My Car</h1>

</div>

);

}

}

3. React props: Props are arguments passed into React components. To send props into a component we use syntax similar to HTML tag attributes. Props is used to pass data from parent component to child component.

4. React Hook: Hook is a special kind of function. Hook function can only use in functional components. All hook functions begin with the word “use”. Hooks are used to implement state changes and lifecycle in functional components. To change state you can use useState() hook and to implement lifecycle you can use useEffect() hook. The interviewer might ask you about internal workings of useState() and useEffect() hook.

5. Data Binding: ReactJS follows the concept of one-way data binding. So, in this regard, props are passed from parent to child component.

6. React Virtual Dom: Virtual Dom is an in-memory representation of the actual elements (dom) that are being created. It’s a programming concept. representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

7. Event Handlers: Event handlers in ReactJS are used similarly like JavaScript. But events fired by those handlers are ‘synthetic’ in nature. It means that events in ReactJS are actually wrappers around the browser’s native events in order to fix issues related to cross-browser compatibility.

8. JSX: JSX is an XML/HTML-like syntax used by React. It allows us to write HTML in react. By using JSX we can write HTML code at the same file with javascript code. Babel will transform these expressions into actual JavaScript code.

By using JSX one can write the following JSX/JavaScript code:

var nav = (

<ul id=”nav”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Clients</a></li>

<li><a href=”#”>Contact Us</a></li>

</ul>

);

And Babel will transform it into this:

var nav = React.createElement(

“ul”,

{ id: “nav” },

React.createElement(

“li”,

null,

React.createElement(

“a”,

{ href: “#” },

“Home”

)

),

React.createElement(

“li”,

null,

React.createElement(

“a”,

{ href: “#” },

“About”

)

),

React.createElement(

“li”,

null,

React.createElement(

“a”,

{ href: “#” },

“Clients”

)

),

React.createElement(

“li”,

null,

React.createElement(

“a”,

{ href: “#” },

“Contact Us”

)

)

);

9. How rendering works: Every setState() call informs React about state changes. Then, React calls render() method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

10.Functions vs classes: Classes are used from the very beginning in React. Functions are first used in react version 16.8 which was released in 2019. Class components are stateful components. Functions are easier to understand. Classes often have methods, which are functions that are associated with a particular class, and do things associated with the thing that the class is — but if all you want is to do something, a function is all you need.

simple person