10 things about ReactJS that a developer should know
Hello good people!
In this blog of mine, I’ll be talking about 10 important things that in my judgement is important for a React developer to keep in mind. So let’s get started.
- React is a JavaScript Library
React is JavaScript library. It is not a framework. Most of us gets confused as beginners because when we ask someone which front-end technology shall a junior web developer should start learning we suggest either React, Angular or Vue. Vue and Angular are JavaScript frameworks but React isn’t one. React doesn’t have rigid predefined set of solutions for certain problems. We often need to use a lot of other libraries with React to come to solution for certain web development problems.
2. JSX (JavaScript XML)
JSX stands for JavaScript XML. Basically JSX allows us to write HTML codes along with JavaScript in React. This is a very powerful feature that makes developers life convenient and easy. For example
import React, { useEffect, useState } from 'react';
import News from '../News/News';const TopHeadline = () => {const [articles, setArticles] = useState([]);useEffect(() => {const url = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=7ec78e2d53564c9d900105705bf7b66d';fetch(url)
.then(res => res.json())
.then(data => setArticles(data.articles));}, []);return (<div><h1>Top Headlines: {articles.length}</h1>
{
articles.map(article => <News article={article}></News>)
}</div>
);
};export default TopHeadline;
From the above example, articles.map is something that we use in JavaScript. Also articles.length is used in JavaScript but here we are using JavaScript inside a <div> tag which was supposed to contain only HTML codes.
3. React Components
One of the most amazing features of React is, it allows us using components. In React, we can declare components, that are reusable, composable and stateful. Different components declared separately which altogether can be combined to form a solution. For example, Homepage component can have smaller sub components like Header, HeaderMain, Services, Reviews and Footer. A component is basically like a JavaScript function. We can call and reuse a function when necessary. We can build larger functions using smaller ones and similarly in React we can use smaller components to build a larger one. An example of a React component
import React, { useEffect, useState } from 'react';
import News from '../News/News';const TopHeadline = () => {const [articles, setArticles] = useState([]);useEffect(() => {const url = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=7ec78e2d53564c9d900105705bf7b66d';fetch(url)
.then(res => res.json())
.then(data => setArticles(data.articles));}, []);return (<div><h1>Top Headlines: {articles.length}</h1>
{
articles.map(article => <News article={article}></News>)
}</div>
);
};export default TopHeadline;
Here TopHeadLine and News are two components. News is a component that was called inside the TopHeadLine component just like a function is called upon inside another function.
4. React Hooks
Previously, functional components had limited power before the advent of React Hooks. In early 2019, React Hooks were released to make the functional components more powerful. React Hooks made functional component stateful. Example of a React Hook useState is given below:
import React, { useState } from 'react';
const countIncrease = () => {
[count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click !
</button>
</div>
);
}Here the initial value of count is 0. If we press the button Click! it will increase the value of count by 1, using setCount to update the state. This gives tremendous power to functional components. We can also use conditional rendering using useState by assigning boolean values. React Hooks acts more like functions. Just like we call functions, we can call different React Hooks like useState, useEffect, useContext, useReducer , etc.
5. Props in React
In React, it is quite easy to pass data from one component to the other one using props . props are basically inputs for React Components.
import React from 'react';const News = (props) => {const {title, description} = props.article;
return (<div>
<h4>{title}</h4>
<h4>{description}</h4>
</div>
);
};export default News;
props which stands for properties, contains an object named article . We used object destructuring to receive title and description. props are nothing but HTML attributes for JSX.
6. Passing function through props
Sometimes we need to pass a function from parent component to a child component where it will update a state. For such cases we can initialize a state in parent component, pass the function through props to child component and then we attach a button to make it do something. For example
import React, { useState } from 'react';const Count = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}return (<div> <Product handleClick={handleClick}></Product></div> );
};export default Count;
Here we sent handleClick function to Product component.
import React from 'react';const Product = (props) => {return (<button onClick={props.handleClick}>
Increase count!
</button> );
};export default Product;
By pressing the button, handleClick function will increase the value by 1 from the child component Product . The updated value can be accessed from the parent component Count .
7. Context API
In a React application, typically data is passed down from parent component to child component. It is not possible to pass data like that when that certain data is required by multiple components. Context API helps us to solve this problem of sharing values among multiple components without the need for props drilling. Here is an example how we declared a Context API.
import Home from './components/Home/Home';
import Shipment from './components/Shipment/Shipment';
import { createContext, useState } from 'react';export const UserContext = createContext();function App() {const [loggedInUser, setLoggedInUser] = useState({});return (<UserContext.Provider value={[loggedInUser, setLoggedInUser]}><Home />
<Shipment /></UserContext.Provider> );
}export default App;
Here we have passed a state loggedInUser as a value of UserContext.Provider . This UserContext.Provider acts as a wrapper for those components where the loggedInUser state will be available.
Home component can access the Context API like this
import React, { useContext } from 'react';
import { UserContext } from '../../App';const Home = () => {const [loggedInUser, setLoggedInUser] = useContext(UserContext);return ( <div style={{border: '1px solid blue'}}>
<h3>This is Home: {loggedInUser}</h3>
</div> );
};export default Home;
Shipment component can access the Context API like this
import React, { useContext } from 'react';
import { UserContext } from '../../App';const Shipment = () => {const [loggedInUser, setLoggedInUser] = useContext(UserContext);return ( <div style={{border: '1px solid blue'}}>
<h3>This is Home: {loggedInUser}</h3>
</div> );
};export default Shipment;
In this way we can access, update the state from Home and Shipment component without the worry of passing props from parent component to child component. Here Home and Shipment are separate components and both of their parent component is App.js . None of them are child component of each other.
8. Rendering and Virtual DOM
Before the advent of React it was quite difficult to work with DOM APIs. We usually try to avoid operations at DOM APIs as much as possible because any changes/modification in the DOM, it takes place on the same single thread which is responsible for everything else that’s happening in the browser. This slows down the process if the changes/modifications is quite large. It is suggested that we should write codes in such a manner that it does minimum operations. When we press refresh, React renders a virtual representation of the DOM and keep that in its memory. When we make any modifications in our applications, React generates another virtual representation of the DOM. Now there are two virtual representation of the DOM. React now compares version 1 virtual representation of the DOM with version 2 virtual representation of the DOM and identifies the necessary changes and modifications. Then finally it updates the DOM based on the identification by comparison and this process of React makes it super efficient.
9. Conditional rendering
Conditional rendering is a powerful tool for developers as sometimes we need to render one part of the JSX based on some conditions met and other part based on if the conditions aren’t met.
const User = () => {
const [familiar, setFamiliar] = useState(false);<button onClick={()=>setFamiliar(!familiar)}>Toggle Friend</button>let greetings;if(familiar){
greetings = <div>Welcome, my friend.</div>
}
else{
greetings = <p>Who the hell are you?</p>;
}return (<div>
<div>
<h2>Greetings</h2>
{greetings}
</div> <div>
<h2>Food</h2> {
familiar
? <p>I will buy Food for you.</p>
: <p>Lets eat his his whose whose?</p>
}
</div> <div>
<h2>Connection</h2>
{ familiar && <p>Let's join my facebook.</p> }
</div>
</div> );
};export default User;
Here we used ternary operator like if familiar is true then statement after question mark (<p>I will buy Food for you.</p>) will execute and if familiar is false then statement after semi colon (<p>Lets eat his his whose whose?</p>) will execute.
familiar
? <p>I will buy Food for you.</p>
: <p>Lets eat his his whose whose?</p>Another ternary operator we used where if familiar is true then after double ampersand && will execute the statement <p>Let’s join my facebook.</p> and if familiar is false then it will not execute the statement after double ampersand && .
familiar && <p>Let's join my facebook.</p>10. Optimizing Performance
If we use React, then by it’s powerful features it automatically boosts performance. But we can optimize even further if we experience performance problems by testing with minified production build. React provides different type of useful warnings while building web applications but at times it reduces the performance and makes it slower. If we use the production build while deploying the app it minimizes performance lags. In order to make sure that someone is using the production build, one can take help from React Developer Tools for Chrome. It is suggested that if you’re in development process of your app you use the development mode and once you’re done you should use the production mode for your app.
That was all from me for today. I hope to bring new topics in the near future. Till then happy coding!