Client Side JS
Numbers
Text
Boolean
Consts
Objects
<> </>
HTML Fundamentals
CSS Fundamentals
Design System
JS Fundamentals
What Is React
Setup Environment
JSX
Components
State
Props
Lists & Keys
Lifecycle Methods
Styling
Form Handling
Data Handling
Hooks
Custom Hooks
Context API
Portals
Router
State Management
Patterns
mkdir my-react-appcd my-react-appnpm init --ynpm install react react-domnpm install --save-dev webpack webpack-dev-server html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-react
npm create vite@4.1.0#Enter (y)#Give your project a name e.g. 2525lo837765anco#Select A Frameworks(Van, Vue, R, Preact, Lit, Svelte, etc.)#Select a variant(JS, TSC, JS+SWC, TSC+SWC)
App.test.js
index.css
logo.svg
serviceWorker.js
setupTests.js
├── README.md├── node_modules├── package.json├── .gitignore ------- list the files you do not want git to track here├── public│ ├── favicon.ico│ ├── index.html ------ to bootstrap your react app import it here│ └── manifest.json└── src├── App.css ---------------- styling├── App.js ----------------- root component├── App.test.js ------------ unit tests├── components├── Home.jsx├── NameOfYourSecondPage.jsx├── NameOfYourThirdPage.jsx├── NameOfYourFourthPage.jsx├── NameOfYourNthPage.jsx├── Navigation.jsx├── Footer.jsx├── index.css├── index.js├── logo.svg└── serviceWorker.js
/my-springboot-react-app|-- /backend| |-- /src| | |-- /main| | | |-- /java| | | | |-- /com| | | | |-- /myapp| | | | |── /controller .....Contains Spring MVC controllers to handle HTTP requests.| | | | |── /model ..... Defines data models or entities for the application.| | | | |── /repository ..... Contains Spring Data repositories to interact with the database.| | | | |── /service ..... Implements business logic and interacts with repositories.| | | |── /resources| | | |── /application.properties ..... Configuration file for Spring Boot application properties.|── /frontend| |── /public| | |-- index.html ..... HTML template for the React application.| |── /src| | |-- /components ..... Storage for all your React Components| | |-- App.js ..... Main React component that serves as the entry point of the frontend.| | |-- index.js ..... Entry point for the React application, where it's connected to the DOM.|── pom.xml ..... must have Backend (Maven - pom.xml): Maven-based Java projects to define project information, manage project dependencies, and configure various build aspects|── package.json
├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ └── manifest.json└── src├── App.css├── App.js├── App.test.js└── components└── Footer└── Navbar├──index.js├──└── images└── pages└── videos├── index.css├── index.js├── logo.svg└── serviceWorker.js
.├── .gitignore├── .editorconfig├── .env├── README.MD├── package.json├── package-lock.json├── tsconfig.json├── tslinst.json├── public/│ ├── index.html│ └── loader.css├── srcipts/│ └── mjml-compile.js└── src/├── assets/│ └── logo.svg├── components/│ └── button/│ ├── index.tsx│ └── button.specs.ts├── middlewares/│ └── auth.tsx├── pages/│ ├── root.tsx│ ├── home.tsx│ └── login.tsx├── routes/│ └── index.tsx├── services/│ └── http.ts├── styles/│ ├── ant-override.scss│ ├── _variables.scss│ └── index.scss├── utils/│ └── index.ts├── app.tsx└── index.tsx
npm i react-router-dom
Wrong: Fetch the Data from An API then you render it to the DOM and no render if you haven’t fetched the data
True: Fetch the data from A Resource(aka API). When the data comes in, you update the state thanks to the hook and we render the new state to the dom
npx express-generator --no-view api
AniJS
AutoComplete.js : simple pure vanilla js lib for autocompletion
Base Web: Ready to use Components
Darkmode.js: uses CSS mix-blend mode in order to bring dark mode to your WS
FrenchKiss.js: For simple and fast soln to handling internationalization
Freezeframe.js: Library that pauses animated gifs and animated them on mouse hover/click/touch
HotKeys.js: For capturing keyboard input
Indigo Player: xtensible js lib for playing videos
Lax.js: for Parallax Effect
Lottie JS
MOJS
Moveable: Draggable, Resizable, Scallable, Rotatable, Wrapable, Pinchable Elements
Optimole: Manage and Resize Images depending on how much resources you have
Popmotion Pure
Rallax.js: VanillaJS plugin to implement parallax scrolling effect
React Image Magnifiers: Responsive, image magnifying react component on mouse and touch
React Redux Loading Bar: component providing loading bar for long running tasks
React Simple Img: React lazy loading images iwth IntersectionObserver API
React Toastify: Add Notifications to your React App
SceneJS: JS Animation for creating animated Web Sites
ScrollReveal JS
Simple Keyboard: simple, fast, customizable virtual keyboard
Zdog: Walkthrough on how to design, display and animate a design
fslightbox: for display various types of sources in a box
Most Common
GitHub Pages https://pages.github.com/
Heroku https://heroku.com/
Vercel https://vercel.com/
Netlify https://www.netlify.com/
Vercel https://www.vercel.com/
AWS Free Tier https://aws.amazon.com/free/
Begin https://begin.com/
Cyclic https://cyclic.sh
Deta https://deta.space/
Fleek https://fleek.co/
Fly https://fly.io/
Glitch https://glitch.com/
Hostman https://hostman.com/
Render https://www.render.com/
Stormkit https://www.stormkit.io/
Surge https://surge.sh/
Google Maps
Unsplash
Mail Chimp
Instant Mojo
ReactJS: UI Library
NodeJS: Server Side/Back End ====> API Exposer/Kitchen
API: Communicator/Waiter
Primitive(by, ch, short, int, long, fl, dou) data types in ReactJS are passed by value as in any other programming language
Variables which aren’t primitives are passed by reference aka Arrays, Objects and Functions
Your functional/Root Component is already called App and you are importing another functional component
To fix this just give your import a different name and this will make the problem disappear
Usually function names and file names in JS are lowercased
But in React this is a NONO! If you want to render a react component names of Functional Comp must start with Lowercase
To Fix this if you want to keep your functional component lowercased change your imported file name to Upppercase
It is better to have your component and File Names as uppercase
import './App.css'//Change the below statement to the following one//import message from './components/message'import Message from './components/message';function App(){return(<div className="App"><Message ></Message></div>)}export default App;
export const MyNamedExport = () => {return(<div>Named Export</div>)}
//import MyNamedExport from './components/MyNamedExport';import { MyNamedExport } from './components/MyNamedExport';function App(){return(<div className="App"><MyNamedExport ></MyNamedExport></div>)}export default App;
import { useState } from 'react';export const MyNamedExport = () => {const [count, setTheCount] = useState(0);return(<div><button onClick={setTheCount(count+1)}>Count - {count} </button></div>)}
This is saying we are using a variable in my useEffect hook but I am not including it in my dependency array
To fix this just include the variable in the dependency array
import './App.css';import { MyNamedExport } from './components/MyNamedExport';function App(){return(<div className="App"><MyNamedExport ></MyNamedExport></div>)}export default App;
import { useState } from 'react';export const MyNamedExport = () => {const [count, setTheCount] = useState(0);return(<div><button onClick={()=>setTheCount(count+1)}>Count - {count} </button></div>)}
If your remove the curly brace of your in your import statement this error goes away
Make sure you tell react that you are trying to create a component by extending React.component
Instead of doing this:
class Book extends React.Component
Change it to a default class component
export default class Book extends Component
Pass in an id prop to your img tag in your js file
Head over to your styles.css file and place a # in front of the value of the id you supplied without the quotes
npm init -y
import React, { Component } from 'react';import logo from './logo.svg';import "App.css"//Functional Componentconst Body = () => {<p className="App-Intro">Welcome Here</p>}//Header Component aka class Based Componentclass Header extends Component{render(){return(<header className="App-header"><img src="{logo}" className="App-logo" alt="logo" /><h1 className="App-title"> Welcome Here </h1></header>);}}//Root Component and I pass the Header Component as propsclass App extends Component{render(){return(<div className="App"><Header ></Header><Body ></Body></div>);}}
module that bundles our JS code for it to be understood by multiple browsers
AKA it is resource loader
Any foreign module dependency is published for it to be understood by the browser
npm module that bundles our JS code. It is in charge of collecting the app’s dependencies and merging them
… for it to be consumed by the web browser
//checking for truthy or falsy values//toBeNull matches only to null//toBeUndefined matches only to Undefined//toBeDefined is the opposite of toBeUndefined//toBeTruthy matches anything that an if statement treats as true//toBeFalsy matches anything that an if statement treats as false
Create React App Command
JSX Syntax
Components
Functional
Class Based Components
The Difference between Props And State
Conditional Rendering
Component Lifecycle
Lists And Keys
The Difference Between Composition And Inheritance
The Basic Hooks
useState
useEffect
a. Custom Hooks
b. Common Hooks:
[ ] useCallback
[x] useRef
[x] useMemo
[ ] useReducer
[x] useContext
Context
Refs
Render Props
Code Splitting
Higher Order Components
Portals
Error Boundaries
Fiber Architecture
rfc: React Functional Component
race: React Arrow Function Component Export
rafce: React Arrow Functional Component Export
rcc: class component skeleton
rfcp: React Functional Component With Prop Types
rrc: class component skeleton with react-redux connect
rrdc: class component skeleton with react-redux connect and dispatch
rccp: class component skeleton with prop types after the class
rcjc: class component skeleton without import and default export lines
rcfc: class component skeleton that contains all the lifecycle methods
rwwd: class component without import statements
cwm: component will mount method skeleton
cdm: componentDidMount method skeleton
cwr: componentWillReceiveProps method
scu: shouldComponentUpdate method
cwup: componentWillUpdate method
cdup: componentDidUpdate method
cwun: componentWillUnmount method
ren: render method
sst: this.setState with object as parameter
ssf: this.setState with function as parameter
props: this.props
state: this.state
bnd: binds the this of method inside the constructor
disp: MapDispatchToProps redux function
html5: Blank html5 document
npm install -g create-react-component
App.css
App.test.js
logo.svg
setupTests.js
State houses the object vals which belong to a component
Props are we pass in between components… Typically between parent comp and child comp
Properties in a react component are vars that we pass to it by its parent component
State on the other hand is an immutable variable that is directly managed by the component
We can initialize state thanks to properties(props) and vice versa
When I want to display something in my component I use props
When I want to update something in my component or track something in my component I use state
When I want to print something use functional component with props
When Updating something I use state(more precisely the built in hook react provides me with useState)
The process by which we store a super heavy functional component in memory
I reuse this component thanks to Caching
Virtual DOM has the exact same properties as Real DOM but virtual DOM doesn’t have the power to change things directly
DOM Manipulation is slow
Virtual DOM Manipulation is fast
process by which we take all the nasty html elements and put them in a object that has tree structure
IOW it takes all the nasty HTML elements and gives it a nice structure
e.g.:
< document > is the parent:
< html > is the child of < document >
< head > and < body > are the children of < html >
< title > is the child of < head >
< h1-h6 > and < a > are the children of < body >
HTML DOM is a standard way of GETTING, CHANGING, ADDING, REMOVING html elements
create-react-component nameofyourcomponent
Smart Components are components which are at the application level that have the ability to execute functions and manage data
Dumb Components are components that strictly deal with the User Interface
import React { Component } from 'react';export default Whatever extends Component {render() {return (<div className="col-md-4"></div>)}}
import React { Component } from 'react';export default Whatever extends Component {render() {return (<div className="row"></div>)}}
Create a folder inside your project and call it backend
within the folder run npm init to create a package.json
Install express, cors, body-parser, morgan
Create an index.js file and throw this stuff in it
I create a db to have data in it so that my FE can consume it call it db.js
let games = [{ _id: 1, name: "San Andreas", runs: "PC" },{ _id: 2, name: "Valorant", runs: "PC" },{ _id: 3, name: "GTA 5", runs: "PC" }];module.exports = games;
//the games.js fileconst express = require("express");const app = express();const cors = require("cors");const bodyParser = require("body-parser");const logger = require("morgan");const myGameRouter = require("./routes/games");const port = process.env.PORT || 3001;app.use(logger('dev'));app.use(cors());app.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json());app.use("/games", myGameRouter);//I listen to the port I definedapp.listen(port, function() {console.log("Runnning on Port: " + port);});//creating a route to get the list of gamesrouter.get("/list", async (req, res) => {try {res.status(200).json({data: games});} catch (err) {res.status(400).json({message: "Some error occured",err});}});//creating a route to get a single gamerouter.get("/list/:id", async (req, res) => {let { id } = req.params;id = Number(id);try {let game = games.find(game => game._id === id);res.status(200).json({data: game});} catch (err) {res.status(400).json({message: "Some error occured",err});}});module.exports = router;
const express = require("express");const app = express();const cors = require("cors");const bodyParser = require("body-parser");const logger = require("morgan");const port = process.env.PORT || 3001;const myGameRouter = require("./routes/games");app.use(logger('dev'));app.use(cors());app.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json());app.use("/games", myGameRouter);//I listen to the port I definedapp.listen(port, function() {console.log("Runnning on Port: " + port);});module.exports = app;
nodemon index.js
npx create-react-app react-fe
import React, { Component } from "react";export default class App extends Component {constructor(someprops) {super();this.state = {list: true, //list of games will show if truecard: false, //single game will be displayed if truegames: [], //has the list of games stored in the be heregame: {} //has 1 single game stored in the be here};}/*I need to get the list of games from the APIusing the lifecycle hook componentDidMount to have list ofgames stored inside the state before I mount the component*/componentDidMount() {fetch("http://localhost:3001/games/list").then(response => response.json()).then( responseJson=> {this.setState({ games:responseJson.data });},)}// Be able to view a single gameshowGame= id => {fetch(`http://localhost:3001/games/${id}`).then(response => response.json()).then(responseJson=> {this.setState({ game:responseJson.data })},);this.setState({list:false,game:true});};render(){return(<div className ="container">{this.state.list ? (<div className="list-group">{this.state.games.map(game => (<li onClick={() => this.showGame(game._id)}className="list-group-item list-group-item-action">{game.name}</li>))}</div>) : null}</div>{this.state.card ? (<div class="card" style={{ width: "18rem" }}><div class="card-body"><h5 class="card-title">{this.state.player.name}</h5><p class="card-text">{this.state.player.runs}</p><div onClick={() => this.showGame()} class="btn btn-primary">Back</div></div></div>) : null})}
npm start
ev.preventDefault()//when you submit an application the whole page refreshes in the case of forms
I can put 27375 in place of this.state.pascal and it will render
import React, { Component } from "react";class Pasc extends Component{state = {pascal: 1};render(){return(<div>{this.state.pascal}</div>);}}export default Pasc;
//Without destructuring I would have the followingvar example = useState('yourStateGoesHereAndAskNelanToLearnLLP');var firstElement = example [0];var secondElement = example[1];
const [firstElement, secondElement] = useState('yourStateGoesHereAndAskNelanToLearnLLP');
//Without destructuringconst hookForNumbers = useState(2);const number = hookForNumbers[0];const setNumber = hookForNumbers[1];//with destructuringconst [number, setNumber] = useState(2);
Fetch Your Data not in the render function but in the lifecycle method componentDidMount Why?
componentDidMount will run only if your component has been mounted to the dom AT LEAST ONCE
To know if you have fetched the data or completed the data we use state
Wrong: Fetch the Data from An API then you render it to the DOM and no render if you haven’t fetched the data
True: Fetch the data from A Resource(aka API). When the data comes in, you update the state thanks to the hook and we render the new state to the dom
fetch('https://localhost:3000/pages', {method: 'POST',headers: {"Content-type": "application/json"},body: JSON.stringify({ title, codes, category })})
@material-ui/core: React MaterialUI components
react-bootstrap: Bootstrap4 components built with React
semantic-ui-react: React Component Library
reactstrap: Stateless React Components for Bootstrap4
react-spinners: loading spinners for your react app
react-loader-spinner: spinner component which can be used in your async.await operation
react-dropdown: Simple Dropdown component
react-slick: Carousel component built with React
react-responsive-carousel: A responsive carousel component
react-images: A responsive, mobile-friendly, highly-customizable carousel component for displaying media in React
react-tabs: An easy-tab component for your React App
redux: state container for your JS apps
react-redux: official React Binding for Redux
Context provides a way to pass data through multiple components tree without having to pass props down manually at every level starting from the parent component
Props drilling is the process by which we pass data from component A to Component B thanks to props and the more components we have the more complex it gets
Thanks to ContextAPI I have a central store where my data lives
We can treat ContextAPI similar to Redux which gives me a central store which houses my data
The store can be inserted into any component
ContextAPI provides a way to pass data through the component tree without having to pass props down manually at every level
The consumer is a component which is consuming the value
There are three levels of ContextAPI
Level 1: Context
Level 2: Provider —> Used in the parent component
Level 3: Consumer
/*createContext Function creates the context or we can see it creates a central data store for me to store my data*/const ThemeContext = React.createContext('light');class App extends React.Component {render() {// Use a Provider to pass the current theme to the tree below.//A provider is a component which is used to provide the value to all my components// Any component can read it, no matter how deep it is.// In this example, we're passing "dark" as the current value.//I wwrap the parent component in between my providerreturn (<ThemeContext.Provider value="dark"><Toolbar ></Toolbar></ThemeContext.Provider>);}}// A component in the middle doesn't have to// pass the theme down explicitly anymore.function Toolbar() {return (<div><ThemedButton ></ThemedButton></div>);}class ThemedButton extends React.Component {// Assign a contextType to read the current theme context.// React will find the closest theme Provider above and use its value.//This is a consumer FYI// In this example, the current theme is "dark".static contextType = ThemeContext;render() {return <Button theme={this.context} ></Button>;}}
import React from "react";import ReactDOM from "react-dom";import "bootstrap/dist/css/bootstrap.min.css";import {BrowserRouter} from "react-router-dom";import Theme from "./Context/Theme";ReactDOM.render(<BrowserRouter><Theme></Theme></BrowserRouter>,document.getElementById("root"));
import React, { Component } from "react";//creating the context and specifying a default valueconst ThemeContext = React.createContext("light");/*line 643 is where I make a call to the provider and I place my parent component thereI can change the theme from light to dark by passing a value prop to my prop and supply it with an argument of darkInstead of passing props from one compoent to another in the form of layer in context api I do not have to pass props to any component actuallyJust wwrap your component within a provider*///parent componentexport default class Theme extends Component{render(){return(<div><ThemeContext.Provider value="Dark"><CurrentTheme ></CurrentTheme></ThemeContext.Provider></div>);}}//child component 1function CurrentTheme(){return(<div><SecondChild ></SecondChild></div>)}class SecondChild extends Component{//way #2 to initialize contextstatic contextType = ThemeContext()render(){return(<div><h1>Using Context API</h1></div>)}}/*initializing context property outside of classWay#1 to initialize contextSecondChild.contextType = ThemeContext*/
mkdir my-react-appcd my-react-appnpm init --ynpm install react react-domnpm install --save-dev webpack webpack-dev-server html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-react
npx create-react-app
App.test.js
index.css
logo.svg
serviceWorker.js
setupTests.js
├── README.md├── node_modules├── package.json├── .gitignore ------- list the files you do not want git to track here├── public│ ├── favicon.ico│ ├── index.html ------ to bootstrap your react app import it here│ └── manifest.json└── src├── App.css ---------------- styling├── App.js ----------------- root component├── App.test.js ------------ unit tests├── components├── Home.jsx├── NameOfYourSecondPage.jsx├── NameOfYourThirdPage.jsx├── NameOfYourFourthPage.jsx├── NameOfYourNthPage.jsx├── Navigation.jsx├── Footer.jsx├── index.css├── index.js├── logo.svg└── serviceWorker.js
├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ └── manifest.json└── src├── App.css├── App.js├── App.test.js└── components└── Footer└── Navbar├──index.js├──└── images└── pages└── videos├── index.css├── index.js├── logo.svg└── serviceWorker.js
.├── .gitignore├── .editorconfig├── .env├── README.MD├── package.json├── package-lock.json├── tsconfig.json├── tslinst.json├── public/│ ├── index.html│ └── loader.css├── srcipts/│ └── mjml-compile.js└── src/├── assets/│ └── logo.svg├── components/│ └── button/│ ├── index.tsx│ └── button.specs.ts├── middlewares/│ └── auth.tsx├── pages/│ ├── root.tsx│ ├── home.tsx│ └── login.tsx├── routes/│ └── index.tsx├── services/│ └── http.ts├── styles/│ ├── ant-override.scss│ ├── _variables.scss│ └── index.scss├── utils/│ └── index.ts├── app.tsx└── index.tsx
npm i react-router-dom
Make sure you take a look at the value prop you passed to the form element
Passing a value prop X means the value will always be X
Removing the value prop altogether transforms your input field from controlled to uncontrolled