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.
Javascript
import React from 'react' ; function App() { return ( <div className= "App" > <h1 style={ { textAlign: 'center' } }> Hello, World! </h1> </div> ); } export default App; |
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. |
Contact Us