Intoduction to React Flashcards
What is the DOM in JavaScript?
The DOM (Document Object Model) is a programming interface for web pages, allowing you to change, read, and update the content of a document using JavaScript.
Name the three parts of the DOM and their meanings.
Document: Represents the web page content (e.g., text, images, forms).
Object: Structured containers representing elements.
Model: Logical, hierarchical representation like a family tree.
List three methods for retrieving elements in the DOM.
getElementById(id)
getElementsByClassName(className)
querySelector(selector)
How do you add a new element to the DOM?
Use createElement(tagName) to create a new element.
Append it with appendChild(node).
What is React?
React is an open-source JavaScript library developed by Facebook for building user interfaces and managing the view layer of web applications.
Why use React? List three benefits.
Component-Based Architecture
Efficient Virtual DOM
Reusability and Composability
What is the difference between the Virtual DOM and the Real DOM?
Virtual DOM: Lightweight, in-memory representation.
Real DOM: The actual structure of a web page.
What is JSX?
JSX is a syntax extension for JavaScript, allowing HTML-like markup in JS files. It produces React elements after compilation.
What is the difference between functional and class-based components in React?
Functional Components: Stateless, render UI, use props.
Class-Based Components: Stateful, implement logic, and use lifecycle methods.
How do you set up a new React project with Vite?
Run npm create vite@latest.
Navigate to the project directory (cd vite-project).
Install dependencies (npm install).
Start the development server (npm run dev).
What are the characteristics of JSX?
Uses {} for embedding JS expressions.
Multi-line HTML requires parentheses.
Follows XML rules and camelCase for attributes.
Name three ways to style elements in React.
CSS Classes: Use className.
Inline Styles: Use the style attribute.
Styled Components: Install with npm i styled-components.
What does React Router enable in React applications?
React Router enables navigation between different pages in a React application.
