REACT Flashcards
What is React?
A JavaScript library for building user interfaces
What is a React element?
A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns.
How do you mount a React element to the DOM?
by rendering it / ReactDOM.render(var you want to render , where you want to render it)
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is a Plug-in?
is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.[1]
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps.
How can you make Babel and Webpack work together?
you’ll need to add the babel-loader to the list of modules
What is JSX?
syntax extension for JS and it makes React elements / implementing react components in JS that look like HTML
Why must the React object be imported when authoring JSX in a module?
JSX is just sugar for createElement without react you cant use createElement
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
in a webpack config file add a module rule to load jsx files by using the babel loader and give the babel loader the plugin to transform react
What is a React component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions.
How do you define a function component in React?
This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.
How do you mount a component to the DOM?
ReactDOM.render(what,where)
What are props in React?
they are properties / arbitrary inputs /arguments passed into react components
How do you pass props to a component?
by having the prop name = to
How do you create “class” component in React?
class name of class extends React.Component then have a method with what you want to return
How do you access props in a class component?
by using this.props
What is the purpose of state in React?
to represent info about a components current situation
How to you pass an event handler to a React element?
by passing a function
What are controlled components?
An input form element whose value is controlled by React / React component that renders a form also controls what happens in that form on subsequent user input.
What two props must you pass to an input for it to be “controlled”?
this.state.value and onChange(callback to handle input)
What Array method 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?
use a string that uniquely identifies a list item among its siblings OR an ID
When does React call a component’s componentDidMount method?
immediately after a component is mounted (inserted into the tree)
Name three React.Component lifecycle methods.
componentDidUpdate, componentDidMount(), componentDidUnmount
How do you pass data to a child component?
through props
