React Flashcards
[React Elements]
What is React?
A JavaScript library / framework for building user interfaces
[React Elements]
What is a React element?
a plain JS object with a list of properties describing what an actual HTML element should have
[React Elements]
How do you mount a React element to the DOM?
calling the render method of the root object and passing a real DOM element as an argument
What is the difference between library and a framework?
Library - code already made by someone else
Framework - have IoC (inversion of control)
[Babel Intro]
What is Babel?
A JavaScript compiler
Converts ECMAScript 2015+ code into backwards compatible version of JS
[Babel Intro]
What is a Plug-in?
a software add-on that enhances the software
[Babel Intro]
What is a Webpack loader?
preprocesses the code, creates a main.js that is ready to run in the browser
[Babel Intro]
How can you make Babel and Webpack work together?
babel loader
[React JSX]
What is JSX?
A syntax extension to JavaScript
[React JSX]
Why must the React object be imported when authoring JSX in a module?
because JSX produces React elements
[React JSX]
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
with webpack, babel and babel loader, and jsx plug-in
[React Function Components]
What is a React component?
JavaScript functions or class that take props and returns React elements
[React Function Components]
How do you define a function component in React?
function ComponentName (props) {
return (
< Text Content { destructure: prop.property } / >
)
};[React Function Components]
How do you mount a component in the DOM?
create a react element through the component and add it to the root
[React Props & Expressions]
What are props in React?
arbitrary inputs
[React Props & Expressions]
How do you pass props to a component?
pass it in the component function argument
[React Props & Expressions]
How do you write JavaScript expressions in JSX?
using { }
[React Class Components]
How do you create ‘class’ component in React?
class CustomEle extends React.Component {
render() {
return ( React element )
}
}[React Class Component] How do you access props in a class component?
this.props.propName
[React Events and State]
What is the purpose of state in React?
a data model of things that will change over time in a React element
[React Events and State]
How do you pass an event handler to a React element?
create the handler method
bind the handler to the props
< element event={this.handler} /
[React form controls]
What are controlled components?
Components that have limitations but take in inputs from users
[React Form Controls]
What two props must you pass to an input for it to be ‘controlled’?
onChange
value prop
[React Rendering Lists]
What ‘array’ method is commonly used to create a list of React elements?
.map()
