Scribd
Upload
17 views16 pages

Roadmap 2024

Uploaded by

Chaimaa amina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views16 pages

Roadmap 2024

Uploaded by

Chaimaa amina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

MERN STACK

DEVELOPER
AGENDA

WEB Fundamentals

React Library

Next.js 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
Next.js Fundamentals
• Next.js: Next.js 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: Node.js is a JavaScript runtime built on Chrome's V 8 JavaScript
engine.
• Expressjs: Express is a minimal and flexible Node.js 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

You might also like