50 Questions
What does a React component return?
JSX elements
When importing React, what does it allow?
Allow JSX to be implemented in the function
What do props help us accomplish in React?
Make components more reusable
What does the checked prop for multiple choice radios need to equal?
The value
What does the [name] syntax represent in an object literal?
Dynamic keys
What does the .map array method do in React?
Return a new array with transformed elements
When does React gather all the data from a filled out form?
React handles the internal state of native DOM elements
What does the button inside a form do?
Triggers the onSubmit handler of the form
What does the fetch retrieve from an API?
Data from the API
When does mounting and unmounting happen in a conditionally rendered component?
When the component is added or removed from the DOM
What happens to the useEffect's cleanup function once the component is unmounted?
It is not unmounted and may cause memory leaks
What does the useEffect hook's dependencies array determine?
When the useEffect will run by comparison
What is a 'side effect' in React?
A code that is affected by an outside system
What is the purpose of the dependencies array in the useEffect hook?
To specify when the useEffect will run
When does React run the useEffect function?
First render assuming no dependencies; every re-render otherwise
What is the essential prop needed for fetching props from an API?
key
What is not unmounted once the component is unmounted, potentially causing a memory leak?
The event listeners added by the component
Which of the following is not a valid mouse event in React?
drag
What happens when a mouse is down on a button in React?
It appears pressed
What type of parameters do event listeners receive in React?
Functions, defined before the return
What do mouseenter and mouseleave events refer to in React?
Points move inside and outside an element
Why is using states crucial in React?
For the UI to reflect the state of a list
Before React, how was changing the DOM typically achieved?
By directly modifying the DOM elements
What do useState and set provide to a React component?
Attributes, treating it like an object that changes based on those states
What does React allow to automatically hook onto for adding new states?
State
What is setState in React?
A method that takes an object as a parameter to describe the changes to the state
What do props refer to in React?
Properties passed into a React component, with the restriction of being immutable
What do states refer to in React?
Values managed by the component itself, similar to variables declared inside a function
Which hook in React allows components to subscribe to a context?
useContext
What is the use context in React primarily used for?
Sharing data that can be considered global for a tree of React components
When using useContext in a functional component, what does it return?
The current context value for the context
How can the children prop be utilized in a parent component?
By including {children} in its return statement
In what way can the children prop be passed to a parent component?
Directly in between the opening and closing tags of the parent component
What does the 'children' prop represent in the given example?
The elements passed into the Card component
What is the purpose of the children prop in React?
To pass components as data to other components
What is the main purpose of the Card component in the given example?
To wrap content in a div with styling
What does the 'return {children};' statement inside the Card component indicate?
It returns the children passed into the Card component
What are environment variables in Node.js?
External variables defined outside the application
What is the primary function of environment variables in Node.js?
Allowing the app to behave differently based on the environment
How are environment variables typically used in Node.js applications?
As external variables that can be brought into the application
Where are environment variables typically stored in a Next.js project?
.env.local files
What is the purpose of the .gitignore file in a Next.js project?
To ignore .env.local files when committing to Git
How can environment variables prefixed with NEXT_PUBLIC_ be accessed in a Next.js code?
On both the server and the client
Which type of environment variables are available on both the server and the client in a Next.js application?
Environment variables prefixed with NEXT_PUBLIC_
What is the main purpose of setting environment variables in the project settings in Vercel?
When deploying a Next.js app to Vercel
How can you access environment variables stored in a .env.local file in Next.js code?
Using process.env
What is the accessibility of environment variables without the NEXT_PUBLIC_ prefix in a Next.js application?
Only available on the server
How are layouts defined in Next.js?
Using a special layout.js file
What can utilizing layouts improve in a Next.js application?
Application efficiency by preserving state
What is a benefit of nesting layouts in Next.js?
Creating more complex UI structures
Study Notes
React Component Development and State Management
- Essential prop needed for fetching props from an API is a key
- Mouse events include enter, move, down, up, leave, over, out
- Mouse down on a button makes it appear pressed
- Mouseenter points move inside an element, while mouseleave points move outside an element
- Parameters event listeners receive are functions, defined before the return
- Using states in React is crucial for the UI to reflect the state of a list
- Before React, changing the DOM involved appending the state of a list into the DOM tree
- React allows automatically hooking onto a state for new states to be added
- useState and set give the component attributes, treating it like an object that changes based on those states
- setState is a method that takes an object as a parameter to describe the changes to the state
- Props refer to properties passed into a React component, with the restriction of being immutable
- State refers to values managed by the component itself, similar to variables declared inside a function
-Authentication vs Authorization -JSON Web Tokens (JWTs) -{ children } prop -React Context -Custom Hooks -Environment Variables -layout.js
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
