MERN STACK
DEVELOPER
AGENDA
WEB Fundamentals
React Library
[Link] Framework
Database
2
WEB
FUNDAMENTALS
HTML
CSS
JAVASCRIPT
SO UR C E: Y O UT UBE
ELZERO WEB SCHOOL
C L I C K HE RE
REACT
LIBRARY
Com pone nts Ba si cs
• JSX: JSX is a syntax extension for JavaScript that allows for the creation of Reac t elements in a familiar
HTML-like format, making it easier to visualize the structure of UI components.
• Props v s State : Understanding the distinction between props and state is crucial for managing data and
passing information between React components effectively.
• Conditional Re ndering: Learning how to conditionally render components based on certain conditions or
states is a fundamental aspect of building dynamic user interfaces.
• Composition: Composing components by nesting them within one another allows for the creation of
R EACT
complex FUN D AMENTAL
UI structures S
and promotes reusability.
Com pone nt Li fe Cycl e
• CLI T ools: Fam iliarizing with c om mand-line interface tools for React development is essential for
efficiently creating, building, and managing React applications.
• Lists and Ke ys: Managing lists and keys in React com ponents is crucial for rendering dynam ic data and
optimizing performance.
• Re fs: Understanding and utilizing refs is important for accessing and interac ting with DOM elements in
React applications.
• Ev e nts: Handling events in React, such as onClick and onChange, is fundamental for creating interactive
user experiences.
Sta te Ma na gement
• Conte xt: Context provides a way to pass data through the component tree without having to pass props
down manually at every level, making state management more efficient.
• High Orde r Components: HOCs are a powerful pattern in React for code reuse, allowing logic to be
shared across multiple components.
• Route rs: Learning how to implement routers in React applications is essential for creating multi -page web
applications and managing navigation.
Hooks: Understanding and utilizing hooks such as us eState, useEffect, useCallback, useRef, us eMem o, and
useReducer is fundamental for managing state and side effects in functional components.
6
REACT FULL
COURSE
(2024)
SO U R C E : Y O U T U B E
BRO CODE : CL ICK H E RE
Adv anced React Concepts
State Management Libraries
• Redux / Toolkit: Understanding and implementing Redux, along with its
modern toolkit, is crucial for managing complex state in larger applications.
Adv anced UI and Styling
R EACT FUN D AMENTAL S
• Styled Components: Styled Components allows for the creation of styled
React components using tagged template literals, promoting component -
based styling and theming.
• Tailwind: is a popular CSS library for styling React components, offering
powerful styling capabilities and theming support.
Testing and API Calls
• React Testing Library: Learning how to use React Testing Library for
testing React components ensures the creation of robust and maintainable
test suites.
• Jest: Jest is a delightful JavaScript testing framework for unit testing React
applications, providing a seamless testing experience.
API Calls: Understanding how to make API calls from React applications
using libraries such as Axios, SW R, react -query, and superagent is crucial for
integrating with backend services.
8
REDUX️
SO U R C E : D O C U ME N TAT I O N
LEARN ONLY FROM
DOC TO BE UPDATED
CL ICK H E RE
TAILWIND
SO U R C E : D O C U ME N TAT I O N
LEARN ONLY FROM
DOC TO BE UPDATED
CL ICK H E RE
NEX️TJS
FRAMEWORK
[Link] Fundamentals
• [Link]: [Link] is a popular React framework that provides features such
as server-side rendering, static site generation, and API routes, offering a
powerful and flexible environment for building web applications.
Adv anced Topics and Frameworks
• R EACT FUN D AMENTAL
Shadcn:Beautifully S components that you can copy and paste into
designed
your apps. Accessible. Customizable
Adv anced Form Libraries
• Vite: Vite is a fast build tool that significantly improves the frontend
development experience, offering features such as instant server start and
lightning-fast hot module replacement.
11
NEX️TJS
COURSES
Start with this course : Youtube Link
Then you should continue learn from Documentation
, to learn advanced topics : Documentation Link
12
Nodejs
Expressjs
MongoDB
Nodejs | Expressjs Fundamentals
• Nodejs: [Link] is a JavaScript runtime built on Chrome's V 8 JavaScript
engine.
• Expressjs: Express is a minimal and flexible [Link] web application
framework that provides a robust set of features for web and mobile
applications.
R EACT FUNAPIs.
D AMENTAL S
Database Fundamentals
• MongoDB: MongoDB is a source-available, cross-platform, document-
oriented database program. Classified as a NoSQL database product,
MongoDB utilizes JSON-like documents with optional schemas. MongoDB is
developed by MongoDB Inc. and current versions are licensed under the
Server Side Public License.
• postgreSQL: PostgreSQL, also known as Postgres, is a free and open -source
relational database management system emphasizing extensibility and SQL
compliance. Go into Documentation
• GraphQL : GraphQL is an open-source data query and
manipulation language for APIs and a query runtime
engine. GraphQL enables declarative data fetching where a client can specify
exactly what data it needs from an APIPostgreSQL, Go into Documentation
14
BACKEND
COURSES
Nodejs and expressjs : Youtube course
MongoDB : Youtube course
15
THANK YOU
Osama Zinhom
Book a consultation for 30-45 min
Contact us via WhatsApp Contact
16
