Important Topics of React

Difference between Element and Component:

An Element is a plain object describing what you want to appear on the screen in terms of DOM nodes or other components. Elements can contain other elements in their props. Once element is created, it is never muted.

The object representation of React Element would be as follows:

const element = React.createElement(
‘div’,
{id: ‘login-btn’},
‘Login’
)

The above React.createElement will return an object.

{
type: ‘div’,
props: {
children: ‘Login’,
id: ‘login-btn’
}
}

And finally it renders to the DOM using ReactDOM.render():

<div id=”login-btn”>Login</div>

Whereas Component can be created in different ways. It can be a class with render() method. Alternatively, in some cases, it can be defined as a function. In either case, it takes props as an input and return JSX tree as output.

const Button = ({ onLogin }) =>
<div id={‘login-btn’} onClick={onLogin}>Login</div>

Then JSX get transpiled into React.createElement function:

const Button = ({ onLogin }) => React.createElement(
‘div’,
{ id: ‘login-btn’, onClick: onLogin },
‘Login’
)

How to create component in react?

There are two possible ways to create react component. These are:

Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements:

const Greeting = ({ message }) => {
return <h1>`Hello ${message}`</h1>
}

Class Components: You can use ES6 class to create a component. The above function component can be written as:

class Greeting extends React.Component {
render (
return <h1>{`Hello, ${this.props.message}`}</h1>
);
}

What are Pure Components? React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.

What is state in React? State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components. Let’s create an user component with message state,

class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: ‘Welcome to React world’
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
)
}
}

Props in React: Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.

The primary purpose of props in React is to provide following component functionality:

Pass custom data to your component.

Trigger state changes.

Use via this.props.reactProp inside component’s render() method.

For example, let us create an element with reactProp property:

<Element reactProp={‘1’} />

This reactProp (or whatever you came up with) name then becomes a property attached to React’s native props object which originally already exists on all components created using React library.

props.reactProp

Difference between HTML and React event handling: In HTML, the event name should be in lowercase:

<button onclick=’activateLasers()’>

Whereas in React it follows camelCase convention:

<button onClick={activateLasers}>

In HTML, you can return false to prevent default behavior:

<a href=’#’ onclick=’console.log(“The link was clicked.”); return false;’ />

Whereas in React you must call preventDefault() explicitly:

function handleClick(event) {
event.preventDefault()
console.log(‘The link was clicked.’)
}

In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer “activateLasers” function in the first point for example)

How to create refs?: There are two approaches

This is a recently added approach. Refs are created using React.createRef() method and attached to React elements via the ref attribute. In order to use refs throughout the component, just assign the ref to the instance property within constructor.

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

You can also use ref callbacks approach regardless of React version. For example, the search bar component’s input element accessed as follows,

class SearchBar extends Component {
constructor(props) {
super(props);
this.txtSearch = null;
this.state = { term: ‘’ };
this.setInputSearchRef = e => {
this.txtSearch = e;
}
}
onInputChange(event) {
this.setState({ term: this.txtSearch.value });
}
render() {
return (
<input
value={this.state.term}
onChange={this.onInputChange.bind(this)}
ref={this.setInputSearchRef} />
);
}
}

You can also use refs in function components using closures. Note: You can also use inline ref callbacks even though it is not a recommended approach

What is React Fiber?: Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.

What is Lifting State Up in React? When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.