React Flashcards
What is React?
- a JavaScript library for creating user interfaces
What is a React element?
- a plain object that describes what the DOM should look like
- (tells you tagName, props, children)
How do you mount a React element to the DOM?
- ReactDOM.render( )
What is JSX?
- a syntax extension to JavaScript that produces React elements
- basically, JSX just provides “syntactic sugar” for the React.createElement( ) method
Why must the React object be imported when authoring JSX in a Module?
- The React library must always be in scope from JSX code since JSX compiles into calls to React.createElement( ).
- because it is used in the final code that Babel outputs.
How can you make Weback and Babel work together to convert JSX into valid JavaScript?
- install the Webpack and Babel devDependencies
What is a React component?
- Components let you split up the UI into independent, reusable pieces, and think about each piece in isolation.
- Conceptually, they are like JavaScript functions/classes. They accept inputs (called props) and return React elements describing what should appear on the screen.
How do you define a function component in React?
- using a JavaScript function or class - needs a capitalized Name and needs to return a React element
How do you mount a component to the DOM?
using ReactDOM.render( )
What are props in React?
- properties of an object
How do you pass props to a component?
- make a React element with the type, and then pass the prop using key=value pairs ( =’ ‘ or ={ } )
How do you write JavaScript expressions in JSX?
- using curly braces around the expressions
How do you create a “Class” component in React?
- class ClassName extends React.Component { }
How do you access props in a class component?
- using the props property of the this object
- this.props.’prop’
What is the purpose of state in React?
- to represent the current state of the component
- the values you put in state change over time, in event handlers, you update state using setState( )
How do you pass an event handler to a React element?
- you provide a listener when the element is initially rendered
- add an event listener as a prop on the element and set a JavaScript expression { } with a function/event-handler
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?
- a string that uniquely identifies a list item among its siblings ( most often you’d use id’s from your data as keys)
What are controlled components?
- an input form element whose value is controlled by React (by making the React state be the “single source of truth”)
What two props must you pass to an input form for it to be “controlled” ?
- onChange and the value prop
