What is React and Why React?

A React application is a tree of components, with the app being the root.
React is used to build single-page applications.
React is a JavaScript library, not a framework. (A library is a tool that provides specific functionality, while the framework is a set of tools and guidelines for building apps.)
It is used to build user interfaces and is known for its declarative syntax and component-based approach.
It is also used to build mobile apps with React Native.
It allows us to create reusable UI components.

How does React work?

React operates by breaking down the user interface into reusable components, where each component represents a specific part of the UI.
It maintains a Virtual DOM, a lightweight copy of the actual DOM, to track changes efficiently.
Components can manage their internal data (state) and receive data from parent components (props) to customize their behavior and content dynamically.
When changes occur, React compares the previous and updated versions of the Virtual DOM to identify what needs to be updated in the actual DOM.
It then selectively applies these changes, ensuring that only the necessary parts of the UI are re-rendered.

How do you make a react app?

CREATE-REACT-APP :

create-react-app is a tool developed by Facebook for quickly setting up a new React application with a pre-configured build setup.

It offers a convenient way to kickstart React projects without worrying about complex configurations.

The tool comes with predefined configurations for Webpack, Babel, and other build tools, making it beginner-friendly.

STEP 1:
```
 npm create-react-app my-app
            or
 npx create-react-app my-app
```
STEP 2:
```
 cd my-app
 npm run start
```
Woohoo! Web Pack Compiled Successfully. You are ready to go.
VITE:

It utilizes native ES modules during development, resulting in a speedier development experience compared to traditional bundlers.

Vite is a build tool that focuses on faster and more efficient development for modern web projects, including React.

STEP 1:
```
 npm create vite@latest
         or 
 npx create vite@latest
```
When creating a Vite project, you're typically asked for:
1. Project name
2. Package manager preference (npm or Yarn)
3. JavaScript variant (like JavaScript or TypeScript)
4. Template choice (React, Vue, etc.)
5. Optional: CSS pre-processor selection
6. Directory for project initialization.
  
  Enter the details and move forward.

STEP 2:
```
  cd project-name
  npm run dev
```
Wooho, Web Pack Compiled Successfully. You are ready to go.

Key Differences Between Vite and Create-React-App

parameters	vite	create-react-app
Naming conventions (components)	You have to name your function components starting with capital letters; otherwise, it will throw an error.	It will not throw an error, but naming conventions should be followed.
File Extension	By default, it uses `.jsx` extension for React components, which explicitly indicates a JSX file (JavaScript with XML syntax for React).	Uses JavaScript files with `.js` extension by default for React components.
Performance	It focuses on speed, enabling near-instantaneous cold server start and rapid bundling through native ES modules.	Emphasizes compatibility and ease of use over pure speed, using Webpack's robust build capabilities
Speed	Faster development with near-instantaneous server starts and quicker builds using native ES modules.	Offers a more traditional build setup, potentially slower in development.

Summary

React structures UIs with reusable components, forming a tree-like layout. Components manage data via props and state, creating dynamic content. A root component oversees others. React uses a virtual DOM for efficient updates, and the hierarchical organization defines the app's layout. This approach ensures quick rendering and responsiveness in user interfaces.

References

Create react projects by Hitesh Choudhary

Understand the react flow and structure by Hitesh Choudhary

React: Flow & Structure

Comprehending the Flow and Structure of React

Table of contents