React JS Basic Concepts Reference

Last Updated : 09 Jan, 2025

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:

Output

React Basic Concepts Reference:

React Basic Concepts	Description
React JS Introduction to JSX	JSX (JavaScript XML) is a syntax extension for React.js that allows developers to write HTML elements.
React JS Rendering Elements	Rendering Elements in React involves efficiently updating the user interface by creating and updating virtual representations of the UI components.
React JS Components	Components in React are modular, reusable building blocks for UI elements.
React JS Components – Set 2	Components in React are modular, reusable building blocks for UI elements.
React JS Fragments	We may render a single element or multiple elements, though rendering multiple elements will require a ‘div’ tag called Fragment
React JS Props – Set 1	React allows us to pass information to a Component using something called props.
React JS Props – Set 2	React allows us to pass information to a Component using something called props.
React JS PropTypes	use the propType for validating any data we are receiving from props.
React JS State in React	React JS State is a way to store and manage the information or data while creating a React Application.
React JS Lifecycle of Components	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.
React JS Conditional Rendering	Rendering based on the conditions called conditional rendering in React
React JS Lists	React Lists are very useful when it comes to developing the UI of any website
React JS Keys	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	React JS Refs are used to access and modify the DOM elements in the React Application.
React JS forms	In React Forms, All the form data is stored in the React’s component state
React JS Hooks	Hooks are used to give functional components an access to use the states and are used to manage side-effects in React.
React JS Router	In React mostly SPA are developed so Navigation is complex.
React JS ReactDOM	React provides the developers with a package react-dom to access and modify the DOM.
React JS Event Handling	Modern webpages rely on user interactions, triggering events like clicks or keypresses.
React JS Synthetic Events	Synthetic events in React are cross-browser wrappers around the browser’s original event.
React JS ContextAPI	Context API is used to pass global variables anywhere in the code.
React JS Controlled Components	React’s Controlled Components manage form data via component state, receiving values through props and updating through callbacks like onChange.

Rebass Basics Complete Reference

GeeksforGeeks

Improve

Article Tags :

React JS Basic Concepts Reference

React Basic Concepts Reference:

Similar Reads

Thank You!

What kind of Experience do you want to share?