Open In App

React JS Basic Concepts Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

helloworld

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.



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads