Working With Components, JSX and Props Flashcards
How can we render the main component?
To render a main component we import react-dom. We can create a root using the createRoot method, which takes a DOM element as an argument. Once we have the root, we can call its render method to render the root component of our React app.
How can we enable strict mode?
We can also enable Strict Mode for our React app by wrapping our root component in a StrictMode component.
What does a strict mode do?
This helps identify potential problems by intentionally running certain lifecycle methods twice in development mode to highlight potential issues.
What is React made up of?
React apps are made up of components
What are the building blocks of user interfaces?
Components
What are components?
Components are a piece of UI that has its data, logic, and appearance ( how it works and looks )
How do we build complex UI?
We build complex UI using multiple components and combine them
What can be nested inside each other, reused, and passed data between them
Components
Tell me the component tree
The component tree is the hierarchy that exists between components. It shows how they relate to each other.
What is JSX?
JSX is a declarative syntax to describe what components look like and how they work. JSX is an extension of JavaScript that allows us to embed JavaScript, CSS, and React components into HTML-like syntax.
What transpiles JSX into JS?
Babel is a tool that transpiles JSX into JavaScript. Each JSX element is converted to a React.createElement function call.
What is imperative?
This approach involves directly interacting with the DOM API to update the UI, which can become complex and error-prone as the application grows in size and complexity.
What is declarative?
Being declarative means that we describe what the UI should look like based on the current data. React abstracts away from direct DOM manipulation; instead, it manages the DOM for us. We update the UI by updating the underlying data, and React automatically handles the rendering of components based on these updates.
