React.js Flashcards
What is React?
javascript library for creating user interaces
What is a React element?
object but not DOM
How do you mount a React element to the DOM?
root.render()
What is Babel?
toolchain that convert new javascript to old javascript
What is a Plug-in?
software component that adds specific feature to program
What is a Webpack loader?
transformation of files from different language to javascript
How can you make Babel and Webpack work together?
babel-loader
What is JSX?
syntax extension to javascript
Why must the React object be imported when authoring JSX in a module?
react element is actually being called
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
‘@babel/plugin-transfomr-react-jsx’
ex: const element = <h1> ____ </h1>
*always need closing tag for react element; anything goes between tags called props.children
read as react element type h1 for react element
What is a React component?
function or class that returns react element and could be appear on the screen
How do you define a function component in React?
function name with CAPITAL first letter
How do you mount a component to the DOM?
root.render()
What are props in React?
object that passed as argument in function/ property in class situation
How do you pass props to a component?
ex.
function CustomButton(props) {
return Click Me! {props.name};
}
(if not string) {ex: #} is needed
root.render();
if class, this.props.
class CustomButton extends React.Component {
render() {
return {this.props.text};
}}
const element = ( <div>
</div>
);
How do you write JavaScript expressions in JSX?
{}
How do you create “class” component in React?
class \_\_\_\_ extends React.Component{
render().{
return
}
}
*render() is required*How do you access props in a class component?
this.props.____
What is the purpose of state in React?
keep track of value that change over time
How to you pass an event handler to a React element?
call the event as property and set the fallback function as value
ex.
What are controlled components?
input form element whose value is controlled by react
What two props must you pass to an input for it to be “controlled”?
key (must be unique) -> id or index
onChange -> value changes when event.target.value changes
ex. this.setState({value: event.target.value})
