Please enable JavaScript.
Coggle requires JavaScript to display documents.
Learning React Modern Patterns for Developing React Apps - Coggle Diagram
Learning React
Modern Patterns for Developing React Apps
Welcome to React
Js for React
Declaring Variables
const, let, template strings
Create Functions
Declarations
Expessions
Default parameters
Arrow Functions
Compiling Js
Objects and Arrays
Destructuring
Object literal enhancement
Spread Operator
Asynchronous Js
Simple Promises with Fetch
Async / Await
Building Promises
Classes
ES6 module
CommonJS
FP with React
Concept
Immutability
Pure Functions
Data transformation
map, reduce, filter, find
Higher order function
HOF that return other functions can help us handle
the complexities associated with asynchronicity in JavaScript
Currying is a process that allows you to break a function with a high arity (number of arguments) into single-argument functions that can be composed together.
recursion
Recursion is a technique that involves creating functions that recall themselves.
Recursion is a pattern that works particularly well with asynchronous processes, recall themselves when they’re read
composition
const both = date => appendAMPM(civilianHours(date));
or:
const both = compose(civilianHours,appendAMPM);
both(new Date())
const compose = (...fns) => arg =>
fns.reduce((composed, f) => f(composed), arg);
Putting it all together
Imperative vs Declarative
How React works
Page Setup
React Elements
In an single-page application, the browser initially loads one HTML document. As users navigate through the site, they actually stay on the same page. JavaScript destroys and creates a new user interface as the user interacts with the application
The DOM API is a collection of objects that JavaScript can use to
interact with the browser to modify the DOM
React is a library that’s designed to update the browser DOM for us.React elements are the instructions for how
the browser DOM should be created.
react DOM
React Components
Components allow us to reuse the same structure, and then we can populate those structures with different sets of data.
React with Jsx
react elements as jsx
is a JavaScript extension, allows to define React elements using a tag-based syntax directly within our JavaScript code
JS expressions in jsx: {}
mapping arrays with jsx:
<>{
arrays.map(() => <></>)
}</>
Babel
why
browser interprets js as text ( cause: js is an interpreted language)
but not all browsers support the latest js syntax + no browsers support the JSX syntax
=> So, babel is designed to compiling our source code into something that browsers can interpret.
Fragments
webpack
create the project
loading bundle
Source mapping
create-react-app
Aside from code compilation, webpack also can handle:
Code splitting
Minification
Hot Module Replacement
React State management
Building a star rating component
useState
Refactoring for Advanced Reuseability
State in Component trees
Sending state down a component tree
ending interactions back up a component tree
Building forms
useRefs
controlled components
Create custom hooks
Adding colors to State
React context
Placing colors in context
Retrieving colors with useContext
Stateful context Providers
Custom Hooks with context
Incorporating Data
Requesting Data
Uploading files with fetch
Authorized requests
Saving Data Locally
Handling Promise States
sending data with request
renderProps
Virtualized Lists
Creating a fetch hook
creating fetch component
handling multiple requests
Memozing Values
.....
GraphQL
Suspense
Error Boundaries
Code splitting
the suspense component
using suspense with Data
Throwing promises
Building suspenseful Data sources
Fiber
React Testing
ESLint
Prettier
Typechecking for React applications
Test Driven Development
Incorporating Jest
Test React components
Queries
testing events
Using code coverage
React Router
incorporating the router
nesting Routes
Parameters
React and the Server
Isomorphic versus universal
server Rendering react
Nextjs
Gatsby
React in the Future
Enhancing components with useEffect Hooks
When to refactor
should component update and purecomponent
Improving component performance
Reducer to handle complex state
Improving code with useReducer
rules to follow with hooks
useLayoutEffect
deep checking Dependencies
dependency Array