React JS Basic Concepts Reference
React is a library and not a framework. It was developed by Facebook to address their specific challenges. Understanding a new library or framework can be exciting, but it’s important to first grasp its core concepts.
Example: In this example, we have implemented a basic react app with the hello world output.
import React from 'react';
function App() {
return (
<div className="App">
<h1 style={
{ textAlign: 'center' }
}>
Hello, World!
</h1>
</div>
);
}
export default App;
Output:
Output
React Basic Concepts Reference:
React Basic Concepts | Description |
|---|---|
JSX (JavaScript XML) is a syntax extension for React.js that allows developers to write HTML elements. | |
Rendering Elements in React involves efficiently updating the user interface by creating and updating virtual representations of the UI components. | |
Components in React are modular, reusable building blocks for UI elements. | |
Components in React are modular, reusable building blocks for UI elements. | |
We may render a single element or multiple elements, though rendering multiple elements will require a ‘div’ tag called Fragment | |
React allows us to pass information to a Component using something called props. | |
React allows us to pass information to a Component using something called props. | |
use the propType for validating any data we are receiving from props. | |
React JS State is a way to store and manage the information or data while creating a React Application. | |
Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence. | |
Rendering based on the conditions called conditional rendering in React | |
React Lists are very useful when it comes to developing the UI of any website | |
React JS keys are a way of providing a unique identity to each item while creating the React JS Lists so that React can identify the element to be processed. | |
React JS Refs are used to access and modify the DOM elements in the React Application. | |
In React Forms, All the form data is stored in the React’s component state | |
Hooks are used to give functional components an access to use the states and are used to manage side-effects in React. | |
In React mostly SPA are developed so Navigation is complex. | |
React provides the developers with a package react-dom to access and modify the DOM. | |
Modern webpages rely on user interactions, triggering events like clicks or keypresses. | |
Synthetic events in React are cross-browser wrappers around the browser’s original event. | |
Context API is used to pass global variables anywhere in the code. | |
React’s Controlled Components manage form data via component state, receiving values through props and updating through callbacks like onChange. |
