React & JSX Flashcards
What is JSX?
JSX is an HTML-like syntax extension to JavaScript for React and JSX produces React “elements”.
Why must the React object be imported when authoring JSX in a module?
Because when authoring JSX, we are calling .createElement() method of the React object in the background and you can see that in the Babel repl.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
By installing the babel-loader which is what directly connects babel to webpack, and then the babel plugin that transforms React JSX converts into readable JS by the browser.
What is a React component?
React components are essentially JavaScript functions that allow you to split up the UI into independent, reusable pieces. The function is defined with a parameter, ‘props’, and returns React element.
How do you define a function component in React?
With the function keyword followed by the component name (capitalized), and within the code block, return a JSX element.
How do you mount a component to the DOM?
Using the render method of the ReactDOM object, passing it the component in HTML-like tags as the first argument, and its container as the second.
What are props in React?
Props are arguments passed into React components. ‘props’ stands for property.
How do you pass props to a component?
In the JSX component, in the tags, we add them with key-value pairs in the syntax, Component prop=”value”
How do you write JavaScript expressions in JSX?
You wrap them in curly braces, like { props.text }. The curly braces indicate to jsx that the contents need to be evaluated as JS.
How do you create “class” components in React?
Using the class keyword followed by the class name, capitalized, followed by the extends keyword, then React.Component. Then, in the block, you must include the render method to return a component. Other methods and properties are optional.
How do you access props in a class component?
this.props.propName
