React Fundamentals Flashcards
What is React.js?
A JavaScript library for building user interfaces
What is JSX?
JavaScript XM (JSX) is an HTML-like syntax extension for creating UI components, which will be compiled to JavaScript at runtime.
What are the 2 ways of creating a component?
Class-based and functional.
What is state?
A plain object that stores dynamic data that changes based on user activity.
What is a hook?
A special function (introduced in React 16.8) that lets you use state and other React features without writing a class.
In which direction does data flow?
Top-down (aka unidirectional) data flow.
What are props?
Inputs to components, using the HTML-like attributes structure.
E.g <Child mouth={food} />
What is the main difference between state and props?
- Props get passed to the component similar to function parameters.
- State is managed within the component similar to variables declared within a function.
What are 3 ways events in React are handled differently from regular HTML?
- Event attributes are in camelCase
- Use
event.preventDefault()to prevent default behavior - Functions are invoked without need for
()
E.g. <button onClick={submitForm}>Submit</button>
What is a component?
A self-contained, reusable piece of a user interface.
What are the three phases in the lifecycle of a component
- Mounting: adding elements into the DOM
- Updating: when a component’s state or props is changed
- Unmounting: component is removed from the DOM
What are controlled and uncontrolled components?
Related to state management in forms.
* Controlled: form data is handled by a React component.
* Uncontrolled: form data is handled by the DOM itself.
What is a higher order component (HOC)?
A function that takes a component and returns a new component.
E.g. const EnhancedComponent = higherOrderComponent(WrappedComponent)
What is the children prop?
Pass components as data to other components using the reservered children prop.
E.g. const List = ({children}) => <ul>{children}</ul>
What is a fragment?
Group a list of children without adding extra nodes to the DOM.
E.g. const Homepage = () => <><h1>My Title</h1><p>My paragraph</p></>
