React Flashcards
What is React?
A JavaScript library for building user interfaces.
What is a React element?
Object but it contains a typeof key that has a value of symbol(react.element)
How do you mount a React element to the DOM?
Call the render method of the root object.
root.render( ).
What is JSX?
it is a syntax extension to JavaScript, that allows us to describe React’s object tree using a syntax that resembles that of an HTML template.
Why must the React object be imported when authoring JSX in a module?
We need react for when the babel-loader translates the JSX it changes the syntax to React.createElement, and if React is not defined / imported it will throw an error.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
install the plugin-transform-react-jsx
devDependencies - @babel/plugin-transform-react-jsx
What is a React component?
Reusable pieces of code / Functions that return a React element to be rendered to the page.
Components are like JavaScript functions, They accept inputs (called props) and they return React elements describing what should appear on the screen.
How do you define a function component in React?
The simplest way to define it is with a JavaScript Function.
Name of the function component has to start with an Uppercased letter
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
How do you mount a component to the DOM?
make a user defined component.
create a react element containing component name
root.render(react element)
What are props in React?
objects that gets passed from one component to another
How do you pass props to a component?
key value pairs that look like html attributes
< ComponentName name=”Alvaro” color=”blue”.
^ ^ ^ ^
How do you write JavaScript expressions in JSX?
surround any JavaScript expression with curly braces.
How do you create “class” component in React?
define a class that extends React.Component and has a render function.
Component Name must start with an uppercase.
Component has to include extends React.Component.
Component also requires a render( ) method.
class ComponentName extends React.Component {
render( ) {
return (
<h1> { this.props.name } </h1>
);
}
}
How do you access props in a class component?
The This Object in front of the props object.
<h1>Hello, {this.props.name}</h1>
this.props is the object which contains the Attributes which we have passed to the parent component.
What is the purpose of state in React?
keep track of values that change overtime.
How to you pass an event handler to a React element?
we pass it as a prop.
if the event is a click it would be onClick as a prop
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?
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
Most often you would use IDs from your data as keys:
Use the item index as a key as a last resort:
What are controlled components?
An input form element whose value is controlled by React
An input form element whose value is controlled by React in this way is called a “controlled component”.
What two props must you pass to an input for it to be “controlled”?
value and onChange props
