React JS Basic Concepts Reference
React is a library and not a framework. It was developed by Facebook to address its specific challenges. Understanding a new library or framework can be exciting, but it’s important to first grasp its core concepts.
Setting Up the Development Environment
Before going into the practical aspects of ReactJS, it is Important to set up the development Environment. This guide will walk you through the process of installing the necessary tools and creating your first React Project.
Prerequisites:
To begin, you will need Node.js and npm(Node Package Manager). Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser, while npm is used to manage your project’s dependencies.
1. Install Node.js and npm:
- Visit the Official Node.js website and download (https://nodejs.org/en/download) the version recommended for most users.
- After Installation, verify that everything is working by running the following Commands in your terminal.
$ node --version2. Code Editor: While you can use any text editor, Visual Studio Code is highly recommended for its syntax highlighting, auto completion, and Git Integration.
Here’s a list of some good code editors you can explore:
Create a New React.JS Project
1. Install Vite and Create a Project
npm create vite@latest my-react-app -- --template react
Replace my-react-app with your desired project name.
2. Navigate into your project directory
cd my-react-app
3. Install dependencies:
npm install
4. Start the development server:
npm run dev
This will launch the app in your browser at http://localhost:3000.
Understanding the Project Structure:
Your new React project comes with a predefined structure. Here are the key files and folders you’ll work with:
public/index.html: The single HTML file where your React app will be rendered.src/index.js: The JavaScript entry point for your React application.src/App.js: A basic React component that serves as the starting point for your app.
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. |
