📄️ Intro
React, is an open-source JavaScript library for building user interfaces (UIs) or user interface components. It was developed by Facebook and is now maintained by both Facebook and a community of individual developers and companies. React was first released in 2013 and has since gained widespread popularity for its efficiency and flexibility in creating interactive and dynamic web applications.
📄️ Setup
Setting up a React project involves several steps, ranging from environment setup to installing dependencies and creating the project structure. Below are the typical steps involved:
📄️ Folder structure
The new react project folder structure would have below list of folder and files, this project is generated in September 2023, this may change in future.
📄️ Scripts
In a React project, the package.json file serves as the manifest file that contains metadata about the project, including a list of dependencies and a set of scripts that can be executed using npm or yarn. These scripts are defined under the scripts field and are essentially command-line commands that are used for various tasks like starting the development server, building the project, running tests, etc.
📄️ How it works
In a React application, App.js (or App.tsx if you're using TypeScript) serves as the main entry point for your React component tree. It's often the root component that wraps all other components and is responsible for rendering them. Here's a breakdown of how App.js typically works:
📄️ JSX
JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like elements and components in a JavaScript file. It's mainly used with React to describe what the UI should look like. JSX provides a more concise and readable way to create and manage the DOM elements in JavaScript.
📄️ Components
What Are Components in React?
📄️ Styles
In JSX, you can apply styles to your components in various ways. Here are some common methods:
📄️ Props
In React, "props" is short for "properties." Props are a way to pass data from one component to another, essentially making them a mechanism for component-to-component communication. They are similar to function arguments: just as you pass arguments to a function, you pass props to a React component.
📄️ Images
Using images in a React application can be done in several ways:
📄️ State
In React, state is a built-in object that allows components to create and manage their own data. Unlike props, which are passed down from a parent component, state is local and encapsulated within the component itself. State is what allows React components to be dynamic and interactive.
📄️ Key Prop
In React, the key attribute is used to uniquely identify elements within a list or array. It helps React optimize rendering by reusing existing DOM elements. When the state changes, React performs a "diffing" algorithm to identify what has changed in the virtual DOM. The key attribute helps React match elements with their corresponding DOM nodes more efficiently.
📄️ Axios
Axios is a popular, promise-based HTTP client that works both in the browser and in a Node.js environment. It provides a simple API for performing various types of HTTP requests and has a wide range of features like interceptors, timeout settings, and more. Axios is often used in modern web applications to interact with RESTful APIs or other external resources.
📄️ Forms
Forms in React are a crucial part of any web application for collecting user input. Unlike HTML forms, React forms are controlled by the state within the component. Here's how forms work in React:
📄️ Context
In React, the Context API provides a way to share data between components without having to pass props down manually at every level. It's particularly useful for sharing global data like authentication status, theme settings, or user information across various parts of an application.
🗃️ Hooks
8 items
📄️ Routing
Routing in React is the process of setting up the application to handle different URLs and render specific components based on those URLs. This enables navigation between different parts of an application without requiring a full page reload. The most commonly used library for routing in React is React Router.
📄️ ReactDOM
ReactDOM is a library that acts as the glue between React components and the DOM (Document Object Model). It provides a set of APIs to manipulate and interact with the DOM, allowing you to render React components into web pages and manage their lifecycle. Here are some of the key features and methods provided by ReactDOM:
📄️ Fragment
In React, a Fragment is a lightweight container used to group multiple elements without adding an extra node to the DOM. Normally, when you return multiple elements from a component, you have to wrap them in a parent element like a div. However, this can lead to unnecessary nesting in the DOM, which can affect performance and styling. Fragments help you avoid this issue.
📄️ Redux
Redux