React and JSX Flashcards
What is JSX?
JSXis an XML-like syntax extension to ECMAScript w/o any defined semantics.
It is calledJSX, and it is a syntax extension to JavaScript.
Used to write HTML tags inside JavaScript.
JSXis an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code
Why must the React object be imported when authoring JSX in a module?
JSX works with React.render() or createElement(); belongs to React
What is a React component?
Conceptually, components are like JavaScript functions.
Components let you split the UI into independent, reusable pieces.
Think about each piece in isolation.
How do you define a function component in React?
Function name (props) {
Return (rendered React elements)
}How do you mount a component to the DOM?
By using ReactDOM.render
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Use babel loader and install the babel-plugin that transforms React JSX
What are props in React?
They are objects; Props stand for properties; used to pass data between React components
How do you pass props to a component?
As an argument
How do you write JavaScript expressions in JSX?
Put them in brackets
How do you create “class” component in React?
keyword class name keyword extends react.component {
render() {
return the react elements
}
}How do you access props in a class component?
this.props
What is the purpose of state in React?
To keep track of values that will change over time
How to you pass an event handler to a React element?
Pass the event handler to the react React element’s prop
What are controlled components?
A component who value is controlled by React
What two props must you pass to an input for it to be “controlled”?
Value and onChange
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?
.id
When does React call a component’s componentDidMount method?
After render() the first time;
componentDidMount()is invoked immediately after a component is mounted (inserted into the tree).
Name three React.Component lifecycle methods.
componentDidMount, componentDidUpdate,
componentWillUnmount
How do you pass data to a child component?
Props
Describe React component lifecycle
// — mounting phase — // constructor -> render -> componentDidMount -> …time passes … ->
// —updating phase — // setState() or parent re-renders -> render (again!) -> componentDidUpdate
