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
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>
Javascript Object & Array Destructuring
Data
Destructuring complex data
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
