An Intro to React Flashcards
Can JSX be interpreted by the browser?
No it cannot since it’s in ES6
What would you need to dependency inject for transpiling JSX and ES6 TO ES5?
Webpack and Babel
Explain the modern JavaScript tooling flow
JavaScript files in ES6 with React and Redux libraries. They are transpiled through webpack and backed by babel.js. They take ES6 code, can’t be ran into browser, and transpile to be ran in a browser. Spits out some single file that says ‘hey here is your file that can be ran’
What is JSX?
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.
Creates the html that gets inserted in the DOM when we render a component. Render = ‘place this components HTML onto the page’
What is REPL?
A Read–Eval–Print Loop (REPL), also known as an interactive toplevel or language shell, is a simple, interactive computer programming environment that takes single user inputs (i.e. single expressions), evaluates them, and returns the result to the user; a program written in a REPL environment is executed piecewise.
What are JavaScript modules?
Siloed files that need import (ES6) in order to talk to each other
What is the difference between REACT and REACT-DOM
React library is core. It knows how to work with components, how to render and nest them as well on a SPA
Reac-DOM library is how to render to the DOM
What design pattern are you utilizing when you create a component?
A factory that is a class that can produce instances of components
What is a component?
Each component is a function or object that returns some amount of HTML. Ideally, it will be rendered in the DOM after instantiating
How many components per file?
ALWAYS ONE!
What does the following code do?
npm install –save youtube-api-search
Goes into the npm registry and installs this package for us
What is a functional component?
Component with inputs with a return of JSX
When to use functional component vs class component?
Class when you need added functionality. Class extends Component and must render with JSX
Explain the dynamic of browser events
All browser events that get triggered by native elements like div, span, input..whenever you add an event handler, they’re always called with an event object.
The event object describes the context or information about the event that occured. Very specific, very technical properties inside of it.
What is state?
A plain JavaScript object that is used to record and react to user events.
Each class based component that we define has it’s own state based object. Whenever a component has changed it immediately rerenders and forces all of its children to rerender as well
