REACT 2019-2021

Here you will find all the lessons and projects I ve been working on since the beginning of my journey with REACT at Digital Career Institute until today.

INTRODUCTION | INSTALLATION:

• Read more about the Node and Git Installation here ⬅️

• Read more about the Security here ⬅️

• Read more about the React installation/set-up here ⬅️

• Read more about the styling 🌈

---

RECENT

REACT Recap

(2021 / 2022)

click here to browse all the lessons | 2020

Lessons recap

Props beginner

React Router1

React Router2 + Fetch

componentWillMount, componentDidMount

All about HOOKS

react-lazyloading-suspense

click here to browse all the lessons | 2022

🥭

Quizz

Birthday Reminder | Exercise

counter | slider

modal

fetching (in progress)

basic todo List

---

Animations | Locomotive scroll | Misc

IMG Distortion using Shaders

• (redux /shaders / webgl / curtains.js)
• 2021

Creative Distortion

skew-distortion-on-scroll-locomotive

---

SKEW Scrolling

smooth-skew-scrolling

---

API exercises

API / thirdweb / NFT / metamask / Opensea ...

Create a Movie Watchlist with React Hooks, Context API and localStorage

movie-watchlist-reacthooks-context-api

Movie animated filtering react

Filtering Animation with React Tutorial & Framer Motion

crypto-punk-clone-react-web3 ✋

In this tutorial you will learn how to get comfortable with creating NFT's in testing mode (using specific networks for that matter in metamask & thirdweb ), you will also learn hot to create fake ethereum (with faucets.chain ) to be used in your tests apps.

crypto-punk-clone-react-web3

---

REACT Introduction

(2020 / 2021)

All Lessons and exercises

react 1

react 2

react 3

Exercises | projects

to-do fake instagram List / too many tries API News

Shop

ANIMATED Menu by Wrong Akram "exercise"

Firegram by Ninja "exercise"

React & Redux Shopping Cart "exercise"

FLUXUS shop

SCHOOL GROUP PROJECT

ROSETTA Styles

Mapping data

Json map images 1

Json map images 2

shop | props | search filter

simple router set up

react-list-dynamicnavbar

Hamburger

hamburger test1 responsive

Hamburger cross closing | responsive

Hamburger Styled Component (private)

Hamburger Styled Component 2 (public)

responsive stretch

z-index

z-index helpful option (private)

Modal

react Modal

---

AOS Fading Animations

click here to browse all the lessons

AOS | INTERSECTION OBSERVER

animated-portfolio-with-aos

animation-effects-onpage-scroll AOS

Navigation-hide-show-onscroll

Fade animation | Intersection Observer

---

IMAGE REVEAL

image reveal

image reveal gsap

THREEJS 3D | ANIMATION | BLENDER

Process chair | Blender | Threejs

all Threejs beginner Lessons

threejs cube and flag | 100% responsive

3dflag-threejs

---

React VR with (REACT NATIVE)

click here to browse all the lessons

React 360 Hello Virtual Reality (introduction)

ReactVR intro 2 (images) | VERCEL video install

ReactVR intro 3 (video)

ReactVR intro 4 (importing 3D models)

---

Unity3D - React

(private) Unity3d - 360 Virtual Tour

---

JAVASCRIPT Recap

JavaScript Full Course for Beginners

click here to browse all the lessons

Strings

Numbers

Math Methods

Code Challenge

If Statements

Switch Statements

Ternary Operators

User Input

Your First Game

Loops

Functions

Scope - var, let, const

Arrays

Refactor the Game with Arrays

Objects

Classes

JSON

Handling Errors

Document Object Model (DOM)

Event Listeners

Web Storage API

Modules

Higher Order Functions

Promises / Fetch / Async & Await