Simplified React Local Setup Guide

Setting Up React:

1. Install Node.js: Download and install from Node.js.
   Check installation:

• node -v (Node.js version)
• npm -v (NPM version)

2. Create React App:
Use npx (Node Package Executor) to create a boilerplate app:

npx create-react-app project-name
cd project-name
npm start

The app runs on http://localhost:3000.

Virtual DOM Explained:

• A virtual DOM is a lightweight copy of the real DOM in memory.
• React updates this virtual DOM first, compares changes, and applies the minimal updates to the real DOM for better performance.

Framework vs. Library:

• React: A library focused on building UIs.
• Frameworks: Offer tools for more than just UI (e.g., Angular for routing, form validation).

Folder Structure in a React Project

1. node_modules/:

• Stores all the npm packages your project depends on.
• These packages are used globally across the project.

2. public/:

• Contains static assets, such as images and index.html.
• Files here can be directly accessed in the browser.

3. src/:

• Holds all the source code for your React app, like components, styles, and logic.
• Example files: App.js, index.js.

4. package.json:

• Describes your project and its dependencies.
• It lists scripts to run, such as start or build.

5. README.md:

• Introductory documentation for your project.
• Useful for sharing project details and setup instructions.

React Project Flow

1. HTML Structure (index.html):

<div id="root"></div>

• This is the container where React injects all components.

2. Entry Point (index.js):

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<App />);

• React finds the root element in index.html.
• The App component is rendered inside it.

3. Main Component (App.js):

• Contains the primary structure and logic of your React app.
• It is the parent of other components.

JSX (JavaScript XML)

1. What is JSX?

• A syntax that looks like HTML but is processed by React.
• Allows embedding HTML-like code directly in JavaScript files.

2. Why JSX?

• Simplifies creating React components.
• Transforms into JavaScript (React.createElement()) using Babel.

3. Key Points:

• Use camelCase for attributes: e.g., className instead of class.
• Self-closing tags like <img /> are valid in JSX.

4. Example:

const element = <h1>Hello, World!</h1>;

Imports and Exports in React

1. Default Exports:

• Only one default export is allowed per file.

export default MyComponent; import MyComponent from './MyComponent';

2. Named Exports:

• Multiple named exports can exist in one file.

export const MyFunction = () => {}; import { MyFunction } from './MyFile';

3. Combination:

import DefaultExport, { NamedExport } from './MyFile';

React Emmet Snippets (Code Shortcuts)

Install the React Snippet plugin for VSCode to speed up coding.
Commonly used shortcuts:

• RFC: React Functional Component.
• RAFC: React Arrow Function Component.
• REN: Adds a render method.
• IMR: import React from 'react';.

Example of RAFC:

const Component = () => {
   return <div>Hello, World!</div>;
};

VSCode Extensions for React

1. React Snippets: Code shortcuts for React components.
2. ESLint: Ensures consistent coding standards.
3. Prettier: Formats code for better readability.
4. Thunder Client: API testing directly in VSCode.
5. GitLens: Enhances Git integration.
6. JSON Viewer: View and format JSON in the browser.

React Browser Plugins

1. React Developer Tools: Inspect React components.
2. Redux DevTools: Debug state changes in Redux.
3. React-Sight: Visualize the component tree of your application.