May 8, 2021
How to start your web development skill with React JS
What is React?
React JS is a JavaScript library used in web development to build interactive elements on websites. But if you’re not familiar with JavaScript or JavaScript libraries, that’s not a helpful definition. So let’s take a step back and deal with those terms first.
Why React so popular?
It’s no secret that React has played a huge role in many software development projects, including many of our own. But it’s been a couple of years since React took its place as one of the best JavaScript libraries in the market, and I feel like it’s time to revisit React and understand the reasons behind its success.
With the demand for both React development services and React developers skyrocketing as we speak, I can see how many businesses could be interested in learning if React is the best choice for them. And considering all of the things you can use React for, this could also be a great resource for startups and business leaders.
1. It’s Simple to Read and Easy to Use
2. It’s Designed for Easy Maintenance
3. It’s Robust, Interactive, and Dynamic
4. It’s SEO-Friendly
5. It’s Easy to Test
6. React Native Changed Mobile Development
Why You Should Use React.js For Web Development?
Why Should You Use React?
You must be wondering why you should use React.js. After all, as the uses of JavaScript have increased in recent years, we now have multiple options available in the market like Angular and Vue.js. So, why React?
Let’s explore six key reasons to use React.js.
1. React is Flexible
2. React Has a Great Developer Experience
3. React Has Facebook’s Support/Resources
4. React Has Broader Community Support, Too
5. React Has Great Performance
How to create your first react app?
React is a JavaScript library for building user interfaces.
Create a New React App
Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 10.16 and npm >= 5.6 on your machine. To create a project, run:
npx create-react-app my-app
cd my-app
npm start
After running this command your react app has been successfully created.
What is React Component?
React components let you break up the user interface into separate pieces that can then be reused and handled independently.
A React component takes an optional input and returns a React element which is rendered on the screen.
A React component can be either “stateful” or “stateless.”
“Stateful” components are of the class type, while “stateless” components are of the function type.
Stateless Component
An example of how this might be executed follows below:
import React from ‘react’;
//an example of function type component
const ExampleComponent = (props) => {
return ( <h1>Welcome to Educative!</h1>);
}
export default class App extends React.Component {
render() {
//rendering ExampleComponent component in App Component
return (
<div>
<ExampleComponent/>
</div>
);
}
}
Stateful Component
An example of how this might be executed is provided below:
import React from ‘react’;
//an example of class type component
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
heading: “This is an Example Component!”
}
}
render() {
return (
<div>
<h1 > {this.props.welcomeMsg} < /h1>
<h2 > { this.state.heading} < /h2>
</div>);
}
}
export default class App extends React.Component {
render() {
const welcomeMsg=”Welcome to Educative!”;
return (
<div>
<ExampleComponent welcomeMsg={welcomeMsg}/>
</div>
);
}
}
Props
Props are an optional input, and can be used to send data to the component. They are immutable properties, which makes them read-only. This also makes them come in handy when you want to display fixed values.
State
A React component of class type maintains an internal state which acts as a data store for it. This state can be updated and whenever it is changed, React re-renders that component.
ReactJS | ReactDOM
What is DOM?
DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as its nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage. Before React, Developers directly manipulated the DOM elements which resulted in frequent DOM manipulation, and each time an update was made the browser had to recalculate and repaint the whole view according to the particular CSS of the page, which made the total process to consume a lot of time. As a betterment, React brought into the scene the virtual DOM. The Virtual DOM can be referred to as a copy of the actual DOM representation that is used to hold the updates made by the user and finally reflect it over to the original Browser DOM at once consuming much lesser time.
What is ReactDOM?
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.
render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()
Pre-requisite: To use the ReactDOM in any React web app we must first import ReactDOM from the react-dom package by using the following code snippet:
import ReactDOM from ‘react-dom’
render() Function
This is one of the most important methods of ReactDOM. This function is used to render a single React Component or several Components wrapped together in a Component or a div element. This function uses the efficient methods of React for updating the DOM by being able to change only a subtree, efficient diff methods, etc.
Syntax:
ReactDOM.render(element, container, callback)
Parameters: This method can take a maximum of three parameters as described below.
element: This parameter expects a JSX expression or a React Element to be rendered.
container: This parameter expects the container in which the element has to be rendered.
callback: This is an optional parameter that expects a function that is to be executed once the render is complete.
Return Type: This function returns a reference to the component or null if a stateless component was rendered.
findDOMNode() Function
This function is generally used to get the DOM node where a particular React component was rendered. This method is very less used like the following can be done by adding a ref attribute to each component itself.
Syntax:
ReactDOM.findDOMNode(component)
Parameters: This method takes a single parameter component that expects a React Component to be searched in the Browser DOM.
Return Type: This function returns the DOM node where the component was rendered on success otherwise null.
unmountComponentAtNode() Function
This function is used to unmount or remove the React Component that was rendered to a particular container. As an example, you may think of a notification component, after a brief amount of time it is better to remove the component making the web page more efficient.
Syntax:
ReactDOM.unmountComponentAtNode(container)
Parameters: This method takes a single parameter container which expects the DOM container from which the React component has to be removed.
Return Type: This function returns true on success otherwise false.
hydrate() Function
This method is equivalent to the render() method but is implemented while using server-side rendering.
Syntax:
ReactDOM.hydrate(element, container, callback)
Parameters: This method can take a maximum of three parameters as described below.
element: This parameter expects a JSX expression or a React Component to be rendered.
container: This parameter expects the container in which the element has to be rendered.
callback: This is an optional parameter that expects a function that is to be executed once the render is complete.
Return Type: This function attempts to attach event listeners to the existing markup and returns a reference to the component or null if a stateless component was rendered.
createPortal() Function
Usually, when an element is returned from a component’s render method, it’s mounted on the DOM as a child of the nearest parent node which in some cases may not be desired. Portals allow us to render a component into a DOM node that resides outside the current DOM hierarchy of the parent component.
Syntax:
ReactDOM.createPortal(child, container)
Parameters: This method takes two parameters as described below.
child: This parameter expects a JSX expression or a React Component to be rendered.
container: This parameter expects the container in which the element has to be rendered.
Return Type: This function returns nothing.
Important Points to Note:
ReactDOM.render() replaces the child of the given container if any. It uses a highly efficient diff algorithm and can modify any subtree of the DOM.
findDOMNode() function can only be implemented upon mounted components thus Functional components can not be used in findDOMNode() method.
ReactDOM uses observables thus provides an efficient way of DOM handling.
ReactDOM can be used on both the client-side and server-side.
