React Flashcards
What is React?
JavaScript library (framework) for building interfaces
What is a React element?
Object that describes a HTML element (DOM node)
How do you mount a React element to the DOM?
Call the render method of the root object then pass the react element into it
What is Babel?
A JavaScript compiler that converts new JavaScript terminology to old JavaScript terminology
What is a Plug-in?
Enhances a program’s capabilities
What is a Webpack loader?
Allows us to pre-processs files as we import or “load” them
How can you make Babel and Webpack work together?
- Install the proper devDependencies within the package.json
- Use the Babel loader
What is JSX?
A syntax extension of JavaScript that produces React “elements” and lets us write HTML-like syntax
Why must the React object be imported when authoring JSX in a module?
The React object has the methods needed to create the React elements
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
- Install
babel-loader,@babel/core, and the plugin@babel/plugin-transform-react-jsxusing NPM (don’t forgetwebpackandbabelin general) - Set the loader to run with the plugin in the
webpack.config.jsfile - When Webpack starts bundling from
npm run build, it will process.jsxfiles using the plugin
What is a React component?
A function that outputs a React element
How do you define a function component in React?
- similar function style to JS
- Name of the function component must start with a capital
- Has one parameter
props -
returns a React element - Arguments are accessed with curly braces containing an expression, usually accessing the
propsobject
How do you mount a component to the DOM?
- Query for the root DOM element
- Use
ReactDOM.createRoot()method to create the React DOM root - Within that. use render() method with the desired React elements created from the React component inside
What are props in React?
Props is an object that is passed to a React component
How do you pass props to a component?
Pass ‘props’ to a component with key value pair attributes
Objects, variables, anything other than a string must be in curly braces
How do you write JavaScript expressions in JSX?
Wrap them in curly braces, otherwise they’re the same as JavaScript expressions
How do you create “class” component in React?
class (name starting with capital letter), extends React.component and code block with render method inside it
How do you access props in a class component?
this.props
What is the purpose of state in React?
State allows a React element to not only handle events but also keep the functionality of handling events within the component
How do you pass an event handler to a React element?
Within the return of the React element (the render()), add the event as a prop to the React element and specify the handler function as the value to that prop but remember to enclose it within curly braces and specify that it is a method of this
What are controlled components?
Form element controlled by react
They render the form control and the state of the form control
What 2 props must you pass to an input for it to be “controlled”?
- value that holds the associated key value in curly braces {this.state}
- onChange event handler that uses setState()
What Array method is commonly used to create a list of React elements?
the map method
What is the best value to use as a “key” prop when rendering lists?
An ideal key would be one that uniquely identifies a list item from its siblings, from the source data
What does React call a component’s ‘componentDidMount’ method?
After the first successful render is called for the first time
Name 3 React.Component lifecycle methods.
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
- render()
How do you pass data to a child component?
The parent can hold the data in its state, and pass that data as a prop to the child component when creating the child element
In short, via PROPS
