React Flashcards
What is React?
a JS library for building UI
What is a react element?
Object
How do you mount a React element to the DOM
Query select the element to attach it too, createRoot method and then the render method.
What is Babel?
- A javascript compiler, takes new JS to convert it backwards.
What is a plug in?
- An add-on that adds a special feature to a program
- What is a Webpack loader?
- Transformations applied to the source code of a module
How to make Babel and Webpack work together
By using webpack, babel and babel-loader to link the two.
What is JSX?
JSX is a syntax extension to JS, it produces react elements
why must the React object be imported when authoring JSX in a module?
Because the compiled output calls react.createElement()
how can you make webpack and Babel work together to convert JSX into valid JS?
Babel loader and the transform-react-jsx plug in
what is a react component?
Components let you split the UI into independent, reusable pieces and think about each piece in isolation
how do you define a function component in React
start with a capital letter, optional props parameter, it has to return react element.
How do you mount a component to the DOM?
Create a react element from a component and pass it to the render method of the root object.
what are props in React?
Object properties used to pass data from one component to another
How do you pass props to a component?
Type the react element, type the props which look like attributes, if its not a string use curly brackets
how do you write JS expressions in JSX?
wrap in curly brackets
How do you create class component in React?
Class ClassName extends React.Component {
render() {}
}
How do you access props in a class component
this.props
What are controlled components?
the values of the inputs are stored in the state of the components
What two props do you need to pass to an input to be considered controlled?
value and onChange
you dictate with the react state what the value of the input should be.
- What is the purpose of state in React?
- Keeps track of values that change over time
- How to you pass an event handler to a React element?
- As a prop, the prop name is the event you are listening for. The JavaScript expression containing the function.
- WhatArraymethod is commonly used to create a list of React elements?
- Map
- What is the best value to use as a “key” prop when rendering lists?
- The ID from your data
- What doesfetch()return?
- It returns a promise for the response
- What is the default request method used byfetch()?
- Get
- How do you specify the request method (GET,POST, etc.) when callingfetch?
- Give it a second argument of an object containing the method to use.
- When does React call a component’scomponentDidMountmethod?
- is invoked immediately after a component is mounted (inserted into the tree).
- Name three React.Component lifecycle methods
- Constructor, render, componentDidUpdate, componentDidMount.
- How do you pass data to a child component?
- Pass a prop as a JS expression.
