React Basics

What is React
i) React is an open-source JavaScript library primarily used for building user interfaces, especially for single-page applications where UI changes dynamically based on user interactions.

ii) Developed and maintained by Facebook, React allows developers to create reusable UI components and manage their state efficiently.
iii) Key features of React include its component-based architecture, which encourages building UIs as a collection of reusable components, and its virtual DOM (Document Object Model), which enhances performance by minimizing direct manipulation of the actual DOM.
iv) React is often used in conjunction with other tools and libraries, such as React Router for routing within applications, Redux for state management, and React Native for building mobile applications using React syntax.
Key features of React
i) Component-Based Architecture
React promotes a modular approach to building UIs, where the user interface is divided into reusable components. Each component encapsulates its own structure, style, and behavior, allowing for better code organization and reuse.
ii) Virtual DOM
React uses a virtual DOM, an in-memory representation of the real DOM elements. When the state of an object changes, React updates the virtual DOM first, then compares it with a pre-updated version (diffing). Finally, it updates only the changed parts of the real DOM, improving performance and ensuring smooth user interactions.
iii) Declarative Syntax
React employs a declarative paradigm, which means developers describe what the UI should look like for a given state, and React takes care of updating the UI when the state changes. This makes the code more predictable and easier to debug.
iv) JSX (JavaScript XML)
React uses JSX, a syntax extension that allows HTML to be written within JavaScript code. This allows developers to write components that output dynamic HTML, providing a more intuitive and expressive way to create complex UIs.
Advantages of React
i) Efficiency
The virtual DOM ensures that updates are applied efficiently, minimizing the cost of DOM manipulations and leading to faster rendering times.
ii) Re-usability
Components are self-contained modules that can be reused across different parts of an application, reducing duplication and making maintenance easier.
iii) Unidirectional Data Flow
React's unidirectional data flow (or one-way data binding) ensures that data flows in a single direction throughout the application, which helps in tracking how data changes across the application and makes it easier to debug.
iv) Ecosystem and Community
React has a vast ecosystem of tools, libraries, and community support. This includes Redux for state management, React Router for navigation, and numerous third-party libraries that provide additional functionality.
v) SEO Friendly
React can be rendered on the server side using Node.js, which helps in improving SEO as search engines can crawl the fully rendered HTML content.
vi) React Native
React's principles can be extended to mobile app development through React Native, which allows developers to build native mobile applications using React.
vii) Developer Tools
React provides powerful developer tools like the React Developer Tools for browser extensions, which helps developers inspect and debug their React applications.

React is indeed state-driven. In React applications, the UI is typically rendered based on the current state of the application. State refers to any data that influences how a component renders and behaves. React components can have both state and props.
State: Each component in React can have its own state, which is managed internally by the component itself. State represents data that can change over time, typically due to user interactions or other external factors. When the state of a component changes, React automatically re-renders the component to reflect those changes in the UI.
Props: Props (short for properties) are inputs to a React component. They are passed from a parent component to a child component and are immutable within the child component. Props allow components to be configurable and reusable, as they can be customized based on the needs of the parent component.
By managing state within components and passing data down through props, React applications maintain a clear and predictable data flow. Changes in state trigger re-renders of affected components, ensuring that the UI always reflects the latest data and state of the application. This state-driven approach to building UIs is central to React's design philosophy and contributes to its simplicity, scalability, and performance.
Create React App
Create React App is a popular tool among React developers for quickly setting up a new React project. It provides a pre-configured development environment with modern build tools and best practices.
To create a new React application using Create React App, you can follow these steps:
i) Install Node.js and npm: Make sure you have Node.js installed on your system, as Create React App requires Node.js to run.
ii) Install Create React App globally (optional): You can install Create React App globally on your system using npm with the following command,
```
 npm install -g create-react-app
```
This step is optional, as you can also use npx (a package runner tool that comes with npm) to create a new React app without installing Create React App globally.
iii) Create a new React app: Navigate to the directory where you want to create your React app in your terminal or command prompt, and then run the following command:
```
 npx create-react-app my-app
```
Replace my-app with the name you want to give to your React app.
iv) Navigate to the newly created app directory: After the installation is complete, change your current directory to the newly created app directory:
```
 cd my-app
```
v) Start the development server: Once inside your app directory, you can start the development server by running:
```
 npm start
```
This command will start a development server and open your default web browser to display your React app.
npm start
npm start is a command used to start the development server for a Node.js project. In the context of a React project created with Create React App (CRA), npm start specifically starts the development server for your React application.
When you run npm start in your React project directory, Create React App starts a local development server that serves your React application. This development server provides features such as live reloading, which automatically refreshes your application in the browser whenever you make changes to your code. It also provides helpful error messages and warnings during development.
The start script is defined in the package.json file of your React project, which is created by Create React App during project initialization. The start script typically runs the react-scripts start command, which is provided by Create React App and handles starting the development server.
In summary, npm start is a convenient way to start the development environment for your React application, allowing you to preview and work on your project locally while taking advantage of features like hot reloading and error reporting.
strict mode in React
In React, "strict mode" is a tool that helps you write better and more robust code by highlighting potential problems and adhering to best practices. When you enable strict mode, React performs additional checks and warnings, helping you catch and fix common issues in your application.
Here are some key aspects of strict mode in React,
i) Identifying Unsafe Lifecycles
Strict mode warns about the usage of unsafe lifecycles, which are lifecycles that are considered deprecated and might be removed in future versions of React. This helps you migrate your code to newer, safer alternatives.
ii) Detecting Legacy String Refs
It warns about the usage of legacy string refs, which are also deprecated. Modern React code prefers the use of callback refs or the React.createRef() API.
iii) Preventing Legacy Context
Strict mode prevents the usage of legacy context API. Instead, it encourages the use of the new context API introduced in React 16.3, which is more efficient and has a clearer API.
iv) Spotting Unexpected Side Effects
It helps identify components with unintended side effects by detecting some cases where a component might be causing side effects during rendering.
v) Encouraging Strict Mode for Child Components
Even if a parent component is not in strict mode, enabling it for certain components within the application tree can help catch potential issues within those components.
Enabling strict mode is straightforward. You can wrap your application or specific parts of it with <React.StrictMode> component, like this,
```
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
```
By wrapping your components with <React.StrictMode>, React will perform additional checks and warnings during development, helping you to write cleaner and more reliable code. However, it's important to note that strict mode only affects development builds and has no impact on production builds.
How react works on Browser

%[youtube.com/watch?v=ecU2uc6Js4s]
How Browser Works

%[youtube.com/watch?v=5rLFYtXHo9s]