React Basic Key Points

1. What is React?

1. JavaScript library to build dynamic and interactive user interfaces.
2. Developed at Facebook in 2011.
3. Currently most widely used JS library for front-end development.
4. Used to create Single Page Application (SPA).

2. Working of DOM?

1. Browser takes HTML and create DOM.
2. JS helps us modify DOM based on user actions or events.
3. In big applications, Working with DOM becomes complicated.

3. Problems with JS?

• In design - Mental model is important.

1. React has a simpler mental model.
2. JS is cumbersome.
3. JS is Error-prone.
4. JS is hard to maintain.

4. Working of React?

1. No need to worry about querying and updating DOM.
2. React creates a web page with small and reusable components.
3. React will take care of creating and updating DOM elements.
4. IT saves a lot of time.

5. JS vs React?

1. JS is imperative: You define steps to reach your desire state.
2. React is Declarative: You define the target UI state and then React figures out how to reach that state.

6. Intro to components?

React application is a tree of components with App component as the root bringing everything together.

• What is IDE?

1. IDE stands for Integrated Development Environment.
2. Software suite that consolidates basic tools required for software development.
3. Central hub for coding, finding problems, and testing.
4. Designed to improve developer efficiency.

• Need of IDE?

1. Streamlines development.
2. Increase productivity.
3. Simplifies complex tasks.
4. Offers a unified workspace.
5. IDE Features:
1. Code Autocomplete
2. Syntax highlighting.
3. Simplifies complex tasks.
4. Version control.
5. Error checking.

• VS code extensions

1. Live server / Live preview
2. Prettier (Format on save)
3. Line wrap
4. tab size from 4 to 2

7. Create a First React App

1. Official tools is CRA (Create React App).
2. Vite is a modern tool to create React project.
3. Vite produces quick and small bundle size.
4. Vite: use "npm run dev" to launch dev server.
5. Use "npm start" for CRA.

• Commonds:

1. Vite website: npm create vite@latest
2. npm i / install
3. Start server: npm run dev

• devDependencies: Use locally in the entire code.

10. File extensions

JS:

• Stands for JS
• Contains regular JS code.
• Used for general logic and components.

JSX:

• Stands for JS XML.
• Combines JS with HTML like tags.
• Makes it easier to design UI components.

11. Class vs Functions components

Class components:

• Stateful: Can manage state.
• Lifecycle: Access to lifecycle methods.
• Verbose: More boilerplate code.
• Not preferred anymore.

Functional components:

• Initially stateless
• Can use hooks for state and effects.
• Simpler and more concise.
• More popular.

12. What is JSX?

1. Definition: JSX determines how the UI will look wherever the components is used.
2. Not HTML: Though it resembles HTML, you're actually writing JSX, which stands for JS XML.
3. Conversion: JSX gets converted to regular JS.
4. "Babeljs.io/repl" is a tool that allows you to see how JSX is transformed into JS.

13. Exporting components

14. Other important points

1. Naming: Must be capitalized - Lowercase for default HTML.
2. HTML: unlike vanilla JS where you can't directly write HTML, in React, you can embed HTML like syntax using JSX.
3. CSS: In React, CSS can be directly imported into component files, allowing for modular and component specific styling.

15. Dynamic components

1. Dynamic content: JSX allows the creation of dynamic and interactive UI components.
2. JS expressions: Using {}, we can embed any JS expression directly within JSX. This includes variables, function calls, and more.

16. Reusable components

17. Including Bootstrap

1. Install from bootstrap website : "npm i bootstrap@5.3.2"
2. Import "import "bootstrap/dist/css/bootstrap.min.css";"

18. What is Fagment?

what? - Allows grouping of multiple elements without extra DOM nodes.

why? - Return multiple element without a wrapping parent.

            Cleaner DOM and consistent styling.

how? - Two syntaxes 

19. Map Method:

1. Purpose: Render lists from array data.
2. JSX elements: Transfer array items into JSX.
3. Inline rendering: Directly inside JSX.
   

Eg: 

4. Key prop: Assign unique key for optimized re-renders.

Eg: 

20. Conditional Rendering:

• Displaying content based on certain conditions.
• Allows for dynamic user interface.

Methods:

• If-else statements: Choose between two blocks of content.
• Ternary operators: Quick way to choose between two options.
• Logical operators: Useful for rendering content when a condition is true.

Benefits:

• Enhances user experience.
• Reduces unnecessary rendering Makes apps more interactive and responsive.

21. Passing data via Props:

Props in React:

• Short for properties.
• Mechanism for passing data.
• Read-only by default.

Usage:

• Pass data from parent to child component.
• Makes components reusable.
• Defined as attributes in JSX.

Key points:

• Data flows one-way (downwards).
• Props are immutable.
• Used for communication between components.

Eg: <Header title="My App" />

Others curious image:

Videos: