Understanding the Base Features & Syntax Flashcards
Optimized code means?
Small as possible. Increasing the performance of the app. (It increases the performance of the app)
Next-Gen JavaScript is…
ES6 and above
What are “dependencies”
third party packages
JSX
JavaScript rendition of HTML. Syntax extension to JavaScript.
What is the first and second parameter of the ReactDOM.render();
ReactDOM.render(What do I want to render, Where do I want to render it);
JSX produces React ______.
elements
What is the boilerplate for importing react?
import React from “react”
import ReactDOM from “react-dom”
SPAs
Single Page Applications
MPAs
Multi Page Applications
npm or yarn is an example of?
Dependency Management Tools
What is a compiler?
a conversion software that converts next-gen javascript to older version so it runs on any browsers that the user is on.
Babel is an example of?
Compiler
npm start
starts the development server
npm run build
Bundles the app into static files for production
npm test
Starts the test runner
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. (If you do this, you can’t go back!)
What is a React Component?
A component is either a Function or a Class that produces HTML to show the user using JSX and handles feedback from the user using event handlers.
How do you start a React app?
Run npm start in the project directory
How do you create a React app?
In the terminal: create-react-app project-name
T or F: Every react component has to return or render some html code which can be rendered.
True
createElement() is a method that takes at least __ arguments.
3.
Argument 1: The element we want to render to the dom
Argument 2: The configuration for 1
Argument 3: Any amount of children (Whats nested under argument 1.
Function names in components should be uppercased or lowercased?
lowercased
T or F: When you’re importing a component, the name should be the same as the component file.
True
What are Props?
Changes from outside the component(data passed into component)
eg.)
React is a library for creating _______.
components
A typical React app could be depicted as a component tree- having one ____ component(“App”) and then an infinite amount of nested child components.
root
Each React component needs to return/render some ____ code.
JSX
T or F: JSX is HTML
False. JSX is a syntactic sugar for JavaScript, allowing you to write HTMLish code instead of nested React.createElement(…) calls.
When creating a component, what are the two different ways?
- Functional components
2. Class-based components
What are Functional Components?
aka presentational, dumb, or stateless components.
const cmp = () => {
return <div> some JSX</div> }
}
- often used- best practice
What are class-based components?
aka containers, smart, or stateful components.
class Cmp extends Component {
render() {
return <div>JSX</div> }
}Only changes in ____ and/or _____ trigger React to render your components and potentially update the DOM
props, state
What are Props?
It allows you to pass data from a parent(wrapping) component to a child(embedded) component. Triggers UI updates
What are States?
State is used to change the component, state from within. Changes to state also rigger an UI update.
Only ____-based components can define and use state
class
State is simply a _____ of the component class.
property
Whenever state changes,
the component will ____ and reflect the new state. The
difference to props is, that this happens within one andthe same component - you don’t receive new data (props )
from outside!
re-render
React is a JavaScript library for building?
A JavaScript library for building user interfaces
Which library lets React connect to and update the DOM?
a. React DOM
b. Create React App
c. Babel
d. Webpack
a. React DOM
Which method creates and returns a React element of the given type?
a. createElement()
b. create()
c. createNode()
d. ReactDOM.render()
a. createElement()
True or False: React creates actual DOM nodes.
False. React creates objects that describe DOM nodes
T or False: React manipulates and updates the DOM directly.
False. React only manages what gets rendered to the DOM via ReactDOM.render.
It’s the job of render() to interpret the element objects and create DOM nodes out of them.
Which method renders React elements to the DOM?
a. React.render()
b. DOM.render()
c. ReactDOM.render()
d. React.createElement()
c. ReactDOM.render()
{}
JavaScript within JSX
What tool do we use to translate JSX into standard JavaScript?
a. Create React App
b. React DOM
c. Babel
d. React CDN
c. Babel
Is using JSX with React optional?
Yes
What is the purpose of curly braces {} in JSX?
They are used to evaluate JavaScript expressions.
