-
Numbers
-
Text
-
Boolean
-
Consts
-
Objects
<> </>
- HTML
- CSS
- JS
HTML Fundamentals
- Elements
- Attributes
- Headings
- Paragraph
- Comments ie <! -- -->
- Colors
- Links
- Images
- Classes
- Favicons
- ID
- Tables
- Iframes
- Lists
- Div/Span
- Input
- Forms
- Metatags
CSS Fundamentals
-
Syntax
-
Selectors
-
Borders
-
Padding
-
Margins
-
Fonts
-
Icons
-
Links
-
Display
-
Overflow
-
min/max-width
-
z-index
-
pseudo-class
-
Units
-
!important
-
Text Effects
-
Math Function
-
Transitions
-
Animations
-
2D/3D
-
Variables
-
Flexbox
-
Masking
-
Media Queries
-
Grid
-
Design System
JS Fundamentals
- Expressions
- Lexical Structure
- Types
- Variables
- Math Operator
- Functions
- IIFE
- Arrow Functions
- Loops
- Scope
- Template Literals
- Semicolons
- Callbacks i.e. function passed as an arg to another function
- Strict Mode
- DOM
- Variables
- Async/Await
- Timers
- Binding
- Prototyping
- Promises
- Unicode
- Inheritance
- RegEx
- Generators
-
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-app
cd my-react-app
npm init --y
npm install react react-dom
npm 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
4. React Project Layout. If you are build a SPA no need for components dir ignore this step and any subsequent one
├── 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
- Spring Boot Starter Web
- Spring Boot Starter Data JPA
- H2 Database (or any database of your choice)
- Spring Boot Starter Test (for testing)
├── 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
- Check your arguments for mongoose.model call
-
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
- Mozilla Developer
- W3 School
- CSS Reference For Visual CSS Guides
- JS Learning
- CSS Tricks ... To learn the ins and outs of CSS with some cool tricks
- Code Pen .... Super Useful Resource
- Useful Snippets for the Front End
-
HTML5 Rocks
-
Smashing Magazine
-
Tuts+
-
Geeksforgeeks
-
W3Schools
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
-
Spotify
-
Facebook
-
Mail Chimp
-
Instant Mojo
-
ReactJS: UI Library
-
NodeJS: Server Side/Back End ====> API Exposer/Kitchen
-
API: Communicator/Waiter
- An onChange Event is when the state/value of anything changes
-
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
- Module Not Found: Cannot Resolve ...
- This means that you are trying to use a file that isn't created or its path is incorrect when you imported it
- Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
- Place a return statement to remove this error
- JSX expressions must have one parent element.ts(2657)
- You have a closing tag placed in the wrong location (8355 63526 86 5683 227243)
- Found 2 elements with non-unique id
- Just make sure your first input type tag has a different id(prop) value than the second input type tag
- Identifier 'App' has already been declared
-
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
- The < blabla> is unrecognized
-
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 />
</div>
)
}
export default App;- Importing Named Exports As Default Exports: Generates the error: './components/MyNamedExport' is imported as 'MyNamedExport'
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 />
</div>
)
}
export default App;- Unknown DOM property for. Did you mean htmlFor
- Change the for prop in your form tag to an htmlFor prop and this error will go away
- Too Many Rerenders
- I goto my Setter Function of UseState Hook Take My file Count.js
import { useState } from 'react';
export const MyNamedExport = () => {
const [count, setTheCount] = useState(0);
return(
<div>
<button onClick={setTheCount(count+1)}>Count - {count} </button>
</div>
)
}- A Component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
- This is due to not passing anything to the UseState Hook. When you pass undefined or null to a value within a React component along with an onChange that means this is an uncontrolled component
- You are essentially going from uncontrolled to controlled input and this is a big NONO
- To Fix this just pass in an empty string to the useState hook
- React Hook useEffect has a missing dependency: 'userOne'. Either include it or remove the dependency array react-hooks/exhaustive-deps
-
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
-
I goto the Root component to include it and it generates the error Too Many Rerenders
import './App.css';
import { MyNamedExport } from './components/MyNamedExport';
function App(){
return(
<div className="App">
<MyNamedExport />
</div>
)
}
export default App;- Instead of passing the function by value I pass an arrow function to the event handler
import { useState } from 'react';
export const MyNamedExport = () => {
const [count, setTheCount] = useState(0);
return(
<div>
<button onClick={()=>setTheCount(count+1)}>Count - {count} </button>
</div>
)
}- Attempted import error: 'x' is not exported from './components/x'.
If your remove the curly brace of your in your import statement this error goes away
- Class constructor X cannot be invoked without 'new'
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.ComponentChange it to a default class component
export default class Book extends Component- React's Syntax for writing stuff a mix of XML and VanillaJS
-
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
How Do You Pass Data from One Class Based Component To Another Class-Based Component? You use Props!
import React, { Component } from 'react';
import logo from './logo.svg';
import "App.css"
//Functional Component
const Body = () => {
<p className="App-Intro">
Welcome Here
</p>
}
//Header Component aka class Based Component
class 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 props
class App extends Component{
render(){
return(
<div className="App">
<Header />
<Body />
</div>
);
}
}- 3000
-
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
- Hooks
a. Custom Hooks
b. Common Hooks:
-
useCallback
-
useRef
-
useMemo
-
useReducer
-
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
- Range Of Ports: [0,65535] .... I am using Interval Notation FYI
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 end goal of passing data is for it to reach the tree of the child component. Now to move data from the child to the parent component I use props.
- State is just an object. State is used in the class component, and we must remember that state stores the component data and determines the component behavior
-
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>
)
}
}-
Configure the BE first[NodeJS]--- have Nodemon and NodeJS installed
-
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;- I want a route for games so I define routing for it I create it inside a folder called routes
//the games.js file
const 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 defined
app.listen(port, function() {
console.log("Runnning on Port: " + port);
});
//creating a route to get the list of games
router.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 game
router.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;- I goto my index.js file
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 defined
app.listen(port, function() {
console.log("Runnning on Port: " + port);
});
module.exports = app;- I run my backend
nodemon index.js
- I create A react application
npx create-react-app react-fe
- Add Bootstrap to the index.html file in the react-fe folder
- goto your root component and make App.js a class based component and export it
- have some state in your constructor
import React, { Component } from "react";
export default class App extends Component {
constructor(someprops) {
super();
this.state = {
list: true, //list of games will show if true
card: false, //single game will be displayed if true
games: [], //has the list of games stored in the be here
game: {} //has 1 single game stored in the be here
};
}
/*
I need to get the list of games from the API
using the lifecycle hook componentDidMount to have list of
games 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 game
showGame= 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}
)
}
- I run my frontend
npm start
ev.preventDefault()
//when you submit an application the whole page refreshes in the case of formsI 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 following
var example = useState('yourStateGoesHereAndAskNelanToLearnLLP');
var firstElement = example [0];
var secondElement = example[1];const [firstElement, secondElement] = useState('yourStateGoesHereAndAskNelanToLearnLLP');//Without destructuring
const hookForNumbers = useState(2);
const number = hookForNumbers[0];
const setNumber = hookForNumbers[1];
//with destructuring
const [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
- styled-components: super easy to use library which lets you style your components at ease
- axios: Promised based http client for the browser and NodeJS
- react-router-dom: DOM Bindings in React Router
-
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 provider
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Toolbar() {
return (
<div>
<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} />;
}
}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/>
</BrowserRouter>,
document.getElementById("root")
);I goto my Theme.js file which will have a parent component(Theme class) and a Child Component(CurrentTheme )
import React, { Component } from "react";
//creating the context and specifying a default value
const ThemeContext = React.createContext("light");
/*
line 643 is where I make a call to the provider and I place my parent component there
I can change the theme from light to dark by passing a value prop to my prop and supply it with an argument of dark
Instead 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 actually
Just wwrap your component within a provider
*/
//parent component
export default class Theme extends Component{
render(){
return(
<div>
<ThemeContext.Provider value="Dark">
<CurrentTheme />
</ThemeContext.Provider>
</div>
);
}
}
//child component 1
function CurrentTheme(){
return(
<div>
<SecondChild />
</div>
)
}
class SecondChild extends Component{
//way #2 to initialize context
static contextType = ThemeContext()
render(){
return(
<div>
<h1>Using Context API</h1>
</div>
)
}
}
/*initializing context property outside of class
Way#1 to initialize context
SecondChild.contextType = ThemeContext
*/mkdir my-react-app
cd my-react-app
npm init --y
npm install react react-dom
npm 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
4. React Project Layout. If you are build a SPA no need for components dir ignore this step and any subsequent one
├── 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
- Check your arguments for mongoose.model call
-
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