Random React topics
React is one of the top JavaScript libraries in the context of frontend development for building the user interface, maintained by Facebook.
React is used for building single-page applications or mobile applications.
Today I am going to discuss some random React topics, those are beginner-friendly. This list I made is only my preference.
- Virtual DOM:
DOM:
Firstly, DOM stands for the document object model and it’s a standardized programming interface where the whole HTML document is represented as a tree-structured. Each node on the tree represents an HTML element on that document.
What is a virtual DOM?
In a simple word, it’s a lightweight representation of DOM and exists in-memory; is never rendered.
How React virtual DOM works?
React creates a Virtual DOM in memory, instead of manipulating the browser’s DOM directly. When the app is updated, the tree rebuilt the DOM in-memory. At any given point there are two virtual trees that exist in memory at the same time. Two trees are the previous DOM and the new DOM which is created in memory. React will compare two trees and map the differences between them and then it’ll reconcile those differences create a patch and then render the changes to the real DOM.
2. JSX:
JSX stands for JavaScript XML. This amazing syntactic sugar syntax is neither a string nor HTML. It’s a syntax extension to JavaScript although it looks like HTML sometimes.
It’s usages I have shown already above some examples.
function App(){
// JSX example
return(
<div>
<h1>Hello!</h1>
</div>
);
};You can see JSX in-depth for more.
3. Stateless component:
There are two types of components in React as a stateful component and a stateless component. The stateful component is called a class component. Here it uses the ‘this’ keyword, ‘state’, are used. This component is dependent on the state. The state is initialized in the constructor.
On the other hand, the stateless component has lots of advantages. They are easy to write, understand, and test. You can avoid the confusing thing ‘this’ keyword altogether.
Here’s a simple example of a stateless component.
function Greeting(props){
return(
<h1>Hi, {props.name}</h1>
};function App(){
return(
<>
<Greeting name = 'Asit'/>
</>
);
};
4. propType:
PropTypes is a runtime type checking for React props and similar objects on it. It’s always best practice to validate the data you are getting through props by using react PropTypes.
const Greeting = (props) => {
return(
<h1>Hello, {props.name}</h1>
);
};Greeting.propType = {
name: PropType.string
};
In the above, it’s checking if the name is string type or not.
const Home = ({children}) => {
return(
<Header/>
<main>{children}</main>
);
};Home.propType = {
children: PropTypes.node.isRequered
}
Again, you can check the validation of whether children are node type or not and also is a required type.
PropType can check other types such as an array, boolean, number, object, symbol, and so on.
5. defaultProps:
DefaultProps is something like default value. But it will change if any prop property has passed. Otherwise, the default value is executed.
const Test = ({title}) => {
return(
<h1>{title}</h1>
);
};Test.defaultProps = {
title: 'Default Prop'
}
In the above, the title value is the default here.
class TestTwo extends component{
// You can also declare defaultProps as static property only within a React class component.
//static defaultProps = {
// title: 'Default Value'
// } render(){
return(
<h1>{this.props.title}</h1>
);
}
}TestTwo.defaultProps = {
title: 'Default Value'
You can define a default value in the class component. See the above example.
6. Hooks:
Hooks are a new feature in React 16.8.0. You can use state and other React features without using a class. It will be just a simple introduction.
The most two uses of hooks are useState and useEffect.
The useState hook, that returns a pair as the current stare value and a function that lets you update it.
useState hook example,
const Example = () => {
const [clap, setClap] = useState(0); return(
<div>
<p>You clapped {clap} times</p>
<button onClick{() => setClap(clap + 1)}>Clap</button>
</div>
);
};
Here, the clap state has a default value of 0. When the button clap clicks the setClap function is setting the value of clap with + 1. The paragraph is showing how many times the clap clicked.
useEffect hook example,
const Example = () => {
const [name, setName] = useState('Asit');useEffect(() => {
document.title = `${name}`
)} return( <div></div> )
};
This will set the application title ‘Asit’.
7. Higher-order component:
A higher-order component takes a component itself and returns a new component. A higher-order component (HOC) is the advanced feature in React regarding reusing component logic.
When you pass any component itself as a prop and it is used in return for that component is the practical usage of HOC.
// Take in a component as argument WrappedComponentconst newComponent = (InnerComponent) => {// And return another componentconst (HOC) => {return <InnerComponent />;}return HOC;};
Here we can see that the higgerOrderComponent grabs the InnerComponents and returns another component inside of it. It’s the actual benefit of reusing any component indeed.
8. React fragment:
React Fragments let you group a list of children without adding extra nodes to the DOM.
Basically, React functional / class components returns multiple nodes in a div. But in most cases, we don’t need them. But if React can return only one node element. Otherwise, it throws an error. React Fragment solves the problem.
Here is a simple example,
const Fragment = () => {
return(
<div>
<h1>This is header</h1>
</div>
);
};This will return in the DOM with this <div> tag.
<div>
<h1>This is header</h1>
</div>But with React fragment,
const Fragment = () => {
return(
<React.Fragment>
<h1>This is header</h1>
</React.Fragment>
);It’ll return only the <h1> tag.
<h1>This is header</h1>You can write it in short syntax; Just an empty tag.
const Fragment = () => {
return(
<>
<h1>This is header</h1>
</>
);9. Context API:
Context API is an alternative of the prop. It allows sharing information with any component in the React app, by storing it in a central location. You can think of the Context API as a global variable in the React app.
export const UserContext = createContext()function App(){
const [state, setState] = useState({})return(
<UserContext.Provider value = {[ state, setState ]}>
<Home/>
</UserContext.Provider>
Here, now you can use and change the value of this state from the Home component. All you need to do in the Home component is,
const [ state, setState ] = useContext(UserContest)Here, the name ‘UserContest’ is not static. You can name it anything that you want.
10. React Router:
React Router is a collection of navigational components that compose declaratively with your application. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. It has two-part, one for web applications, and one for native applications.
Visit React-Router docs for more.
Thanks for reading.😊
