React Flashcards
What is JSX?
JavaScript XML that makes it easier to write and add HTML in react so that we can visually see the UI design in js code.
Why must the React object be imported when authoring JSX in a module?
because JSX compiles into calls to React.createElement. that is why we need to import React library. (must be in scope).
createElement –> method of the React object.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
with plug in ‘@babel/plugin-transform-react-jsx’
What is a React component?
a piece of a UI or feature of the webpage. It allows you to split the UI into dependent, reusable pieces.
–> Think about it as a function!!!
has to return a react element (Source: Lecture)
How do you define a function component in React?
function Capital first letter of the function definition. Write a javascript function that returns a react element!!
How do you mount a component to the DOM?
ReactDOM.render()
What are props in React?
object that is used to pass data between react
How do you pass props to a component?
state the component name and key and value. (props.name).
key value pairs (looks like an attribute in html but its not)
How do you write JavaScript expressions in JSX?
inside curly braces.
example: { props.text }
OR { props.text.toUpperCase() }
Source: Lecture
What is the purpose of state in React?
Determine what is going to be displayed on the screen and also for reusability. (object that can change).
How to you pass an event handler to a React element?
name of the event ={} –> name of the attributes.
What are controlled components?
input form whose value is controlled by React
react state is the source of truth
What two props must you pass to an input for it to be “controlled”?
handleSubmit and handleChange!
