React.js Flashcards
What is React?
Front-end javascript library that makes it easier to make user interfaces
Very popular in 2019
Benefits of React
Re-usability
Organization
Concise code
Scales well
Components
Contains its own html, css, js
Can update itself without affecting other components
Intro to Code Sandbox and Structure to the Module
Code Sandbox is a nice to use IDE on the browser that contains all the setup needed for coding
Intro to JSX and Babel
Every react html has a <div>
</div>
.render()
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
React creates JSX files
HTML code inside of a Javascript file
Babel
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
Javascript Expressions in JSX & ES6 Template Literals
We can insert Javascript inside an HTML inside of a javascript
{}
Only values or expressions can be placed, not statements
JSX Attributes & Styling React Elements
In the JSX file, instead of using “class=”, we would have to use “className=”
HTML attributes for JSX must be camelCase
Inline Styling for React Elements
Even though it looks like HTML, it is not, it’s JSX
For inline styling, we need to pass in a javascript object
React Components (1)
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
React Components (2)
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
Javascript ES6 - Import, Export and Modules
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
Starting up a React app // React Props
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
Props
Creates a new javascript object with parameters
React Dev Tools
Displays React DOM Tree
Install extension: React Developer Tools
Mapping Data to Components
.map()
“key” - unique key value for props to distinguish array values
Only used by the backend in React
Javascript ES6 Map/Filter/Reduce
Map
.map()
Creates a new array by performing function on items in the original array
Filter
.filter()
Creates a new array by keeping the items that evaluate to true
Reduce
.reduce()
Creates an accumulated value, based on operation to each item in the original array
Find
.find()
Finds and returns the first item that matches the condition
FindIndex
.findIndex()
Finds and returns the first item index that matches the condition
Javascript ES6 Arrow Functions (Fat Arrow)
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”
React Conditional Rendering with Ternary Operations & AND
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 <h1> will be called
</h1>
State in React - Declarative vs Imperative Programming
Declarative
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
React Hooks - useState
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
- State value
- TBA
Benefits
Will only re-render the ui element that is needed
Javascript Object & Array Destructuring
Data
Destructuring complex data
Event Handling in React
//
HTML Event Attributes
https://www.w3schools.com/html/html_attributes.asp
Event Attributes can add more event handling types, such as onmouseout, onclick, …
React Forms
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
Class Components vs Functional Components
Hooks vs Classes
Class
class App extends React.Component { … render(){ … } }
Hook
function App() { … }
Can only use for Components
Makes it easier to maintain state
Changing Complex State
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
JavaScript ES6 Spread Operator
…
Can work with arrays and object inserts
Gives easy functionality to insert arrays and objects into other arrays and objects
Managing a Component Tree
Can pass in function pointers in props from parent components to child components
