React.js

Question 1

What is React?

Answer 1

Front-end javascript library that makes it easier to make user interfaces
Very popular in 2019

Question 2

Benefits of React

Answer 2

Re-usability
Organization
Concise code
Scales well

Question 3

Components

Answer 3

Contains its own html, css, js

Can update itself without affecting other components

Question 4

Intro to Code Sandbox and Structure to the Module

Answer 4

Code Sandbox is a nice to use IDE on the browser that contains all the setup needed for coding

Question 5

Intro to JSX and Babel

Answer 5

Every react html has a <div>

</div>

Question 6

.render()

Answer 6

Inserts HTML into the website, through the javascript file/code
Arguments
1. What to show
Note: only takes 1 element
2. Where to show
In this case, document.getElementById(‘root’)
3. Callback

Question 7

React creates JSX files

Answer 7

HTML code inside of a Javascript file

Question 8

Babel

Answer 8

Javascript compiler inside of React module
Takes any Javascript code and converts it into an equivalent Javascript code that can be read by any browser

Question 9

Javascript Expressions in JSX & ES6 Template Literals

Answer 9

We can insert Javascript inside an HTML inside of a javascript
{}
Only values or expressions can be placed, not statements

Question 10

JSX Attributes & Styling React Elements

Answer 10

In the JSX file, instead of using “class=”, we would have to use “className=”
HTML attributes for JSX must be camelCase

Question 11

Inline Styling for React Elements

Answer 11

Even though it looks like HTML, it is not, it’s JSX

For inline styling, we need to pass in a javascript object

Question 12

React Components (1)

Answer 12

Components can help us break down a large codebase into smaller ones, plus the benefit of reuseability
To create a React Component, create a function that has the naming convention in Pascal form
Create a new file with .jsx extension

Question 13

React Components (2)

Answer 13

In the index.js file, import the .jsx file and use the component like how you would use an HTML element

Normally, React app’s in their index.js have an App component, which comprises of all of the UI
All the components will have their own .jsx file
And all the components will be organized into sub-directories

Question 14

Javascript ES6 - Import, Export and Modules

Answer 14

export default
There can only be 1 default export for a .jsx file
Export multiple functions, values, objects, ….
export {}
import * as from “”
wildcard import is discouraged, as it reduces readability

Question 15

Starting up a React app // React Props

Answer 15

Is a method to pass in parameters from JSX html to the React functions
We can also pass in functions as well
name, imageURL, tel, email are like parameters that get passed to Card, with all the parameters inside of props

Question 16

Props

Answer 16

Creates a new javascript object with parameters

Question 17

React Dev Tools

Answer 17

Displays React DOM Tree

Install extension: React Developer Tools

Question 18

Mapping Data to Components

.map()

Answer 18

“key” - unique key value for props to distinguish array values
Only used by the backend in React

Question 19

Javascript ES6 Map/Filter/Reduce

Map

Answer 19

.map()

Creates a new array by performing function on items in the original array

Question 20

Filter

Answer 20

.filter()

Creates a new array by keeping the items that evaluate to true

Question 21

Reduce

Answer 21

.reduce()

Creates an accumulated value, based on operation to each item in the original array

Question 22

Find

Answer 22

.find()

Finds and returns the first item that matches the condition

Question 23

FindIndex

Answer 23

.findIndex()

Finds and returns the first item index that matches the condition

Question 24

Javascript ES6 Arrow Functions (Fat Arrow)

Answer 24

Shorter way of writing a javascript function
Can omit the keyword function
Used for anonymous functions
1 parameter (no need for parentheses)
 => {function body}
2 or more parameters (need parantheses)
( => {function body})
If function body is only 1 line, then we can omit the {} and “return”

Question 25

React Conditional Rendering with Ternary Operations & AND

Answer 25

Ternary Operator Ternary Operator is treated as an expression, so it can be placed inside the JSX file inside with HTML-looking code In Javascript, we can do a similar method to ternary operator by using && because if the first condition in && is true, the second condition will be executed If currentTime is greater than true, the

will be called

Question 26

State in React - Declarative vs Imperative Programming | Declarative

Answer 26

React uses UI is dependent on conditions of a state variable Given , the should be ... Benefits Easier to reason about Fewer things can go wrong Cons Needs to re-do a lot of work all the time Expensive Can create brand new ui elements and rerendering Imperative Getting hold of an item and setting its attribute to a new value

Question 27

React Hooks - useState

Answer 27

Adds dynamic interactivity Must use a hook inside a component Each state is local to a component useState() parm - Starting state value Returns an array with 2 items 1. State value 2. TBA Benefits Will only re-render the ui element that is needed

Question 28

Javascript Object & Array Destructuring

Answer 28

Data Destructuring complex data

Question 29

Event Handling in React // HTML Event Attributes

Answer 29

https://www.w3schools.com/html/html_attributes.asp | Event Attributes can add more event handling types, such as onmouseout, onclick, …

Question 30

React Forms

Answer 30

Controlled Components https://reactjs.org/docs/forms.html#controlled-components when submitted, will refresh to make a POST or a GET request Will call method called onSubmit event.preventDefault() Prevents the default next step of the event 1. Override 2. Add preventDefault

Question 31

Class Components vs Functional Components Hooks vs Classes

Answer 31

``` Class class App extends React.Component { … render(){ … } } Hook function App() { … } Can only use for Components Makes it easier to maintain state ```

Question 32

Changing Complex State

Answer 32

We can have useState store an object to initialize In the update function of useState() We can pass in an anonymous function, which has the previous value as the parameter

Question 33

JavaScript ES6 Spread Operator

Answer 33

… Can work with arrays and object inserts Gives easy functionality to insert arrays and objects into other arrays and objects

Question 34

Managing a Component Tree

Answer 34

Can pass in function pointers in props from parent components to child components