React Flashcards
What is React?
a program that enables us to create an interactive UI
What is a React element?
an object that describes what the dom looks like
How do you mount a React element to the DOM?
ReactDOM.render()
Interview Question!
difference between library and framework:
a framework will run the function for you when the time is ready.
a library will have a list of functions that you can use when you want
What is JSX?
it is a syntax extension to JavaScript. It is typically used with React to describe what the UI should look like. JSX produces React “elements” and can render them
Stands for JavaScript Syntax
Why must the React object be imported when authoring JSX in a module?
because JSX cannot be read by the browser
React objects must be imported because it used in the final code that babel outputs
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
installing the dev-dependencies webpack, webpack-cli, babel-loader, @babel/core, @babel/plugin-transform-react-jsx, add a build script to run webpack in package.json. Then finally npm run build
What is a React component?
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
same way you define a function in javascript. however the name of the function has to start with a capital letter
How do you mount a component to the DOM?
ReactDOM.render(
react element,
element in the DOM
)
What are props in React?
the parameter of components (functions)
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.
How do you pass props to a component?
using props as an argument in the function/component and pass props as a javascript expression in the function definition
How do you write JavaScript expressions in JSX?
by using {} within JSX
How do you create “class” component in React?
class CustomButton extends React.Component
How do you access props in a class component?
this.props
What is the purpose of state in React?
represent the current situation of a component
setState() allows you to replace the state and render() will return a new react element
How to you pass an event handler to a React element?
button onClick = {function()}
What Array method is commonly used to create a list of React elements?
map method
What is the best value to use as a “key” prop when rendering lists?
it needs to unique among all the elements in the array
What are controlled components?
An input form element whose value is controlled by React
What two props must you pass to an input for it to be “controlled”?
onChange = {function}
value = {this.state.whateverthepropis}When does React call a component’s componentDidMount method?
after the render method
Name three React.Component lifecycle methods.
constructor()
render()
componentWillUnmount()
How do you pass data to a child component?
using prop
