React Flashcards
What is React?
A JavaScript framework for building user interfaces
What is a React element?
A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents.
How do you mount a React element to the DOM?
ReactDOM.render(element, $container)
What is Babel?
- JavaScript Compiler
- Converts ES2015+ code into backwards compatible javascript for older browsers or environments
What is a Plug-in?
A software component that adds a specific feature to an existing computer program
What is a Webpack loader?
A Webpack loader is a node module that applies transformations to the source code to of a module and outputs JavaScript
How can you make Babel and Webpack work together?
Install all dev dependencies
- webpack
- webpack-cli
- babel-loader
- @babel/core
- @babel/plugin-transformation-react-jsx
Configure webpack.config.js file to
- use babel loader as the loader
- use plugin transform react jsx
What is JSX?
JSX is a syntax extension to JavaScript
Why must the React object be imported when authoring JSX in a module?
So Babel understands to compile JSX to JS
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
- Specify in webpack.config.js to check for jsx to bundle
- Babel loader sends preprocessed files to babel core
- Plugin for convert JSX is read
- Converts to JS
What is a React component?
Components are like functions and classes, they accept props and return a React element
How do you define a function component in React?
- Use JavaScript function syntax
function Example(prop) {}
How do you mount a component to the DOM?
ReactDOM.render(element, container)
What are props in React?
Props are an object of arguments passed into React components
How do you pass props to a function component ?
Pass props in a function parameter
Pass props into constructor function and define this.props in the constructor
How do you write JavaScript expressions in JSX?
Expression inside of curly brackets
{ 1 + 2 }
How do you create “class” component in React?
- class Example extends React.Component
- render method & return React element
How do you access props in a class component?
- Pass props in the constructor of a class
- this.props
What is the purpose of state in React?
Data model that represents info about the current state
How to you pass an event handler to a React element?
- React event handlers are passes as props
- If function will be invoked by event, pass this.functionName inside curly brackets
- Bind this is necessary if the function is not being manually invoked
When does React call a component’s componentDidMount method?
- After constructor
- After first render
Name three React.Component lifecycle methods.
- componentDidMount
- componentDidUpdate
- componentWillUnmount
*Render and constructor are also lifecycle methods
How do you pass data to a child component?
Through props
