React Flashcards
What is React?
React is a JavaScript library/framework for building user interfaces.
What is a React element?
An object, describes what you want the dom to look like
How do you mount a React element to the DOM?
ReactDOM.render(element, $container)
Is to mount an element or component, only call it once
What is JSX?
Javascript syntax extension
JSX is a syntax extension to JavaScript that produces React “elements”
Why must the React object be imported when authoring JSX in a module?
Because the React library must be in scope from your JSX code. It is not used explicitly but the compiler (Babel) uses it when converting JSX to React.createElement( )
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
By installing webpack, webpack-cli, babel-loader, @babel/core, @babel/plugin-transform-react-jsx to your packge.json devDependencies
What is a React component?
Components are like JavaScript functions.
They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
The simplest way to define a component is to write a JavaScript function. You can also use an ES6 class to define a component. Components have to start with a Capital letter
How do you mount a component to the DOM?
Using ReactDOM.render( ) method - use the function name as the type
How do you create “class” component in React?
Begin with the class keyword followed by the className followed by extends React.Component then inside the class body, must define the render( ) method which returns the react element
How do you access props in a class component?
Use this to access props property of the this object in a class component.
What is the purpose of state in React?
When the state object changes, the component re-renders depending on the state
So the component can render different things depending on the state
State can change over time
How do you pass an event handler to a React element?
Pass event handlers and other functions as props to child components:
