Scribd
Upload
220 views

React Roadmap

The document outlines a roadmap for becoming a React developer, including learning HTML, CSS, JavaScript basics, React fundamentals like components and props, important React tools like React Router and Styled Components, and testing and deployment. It recommends learning modern JavaScript features, UI frameworks, APIs, security, accessibility, style guides, and optional technologies like module bundlers. The key takeaway is there is no end to learning in web development.

Uploaded by

Donovan Ben Yossef
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
220 views

React Roadmap

The document outlines a roadmap for becoming a React developer, including learning HTML, CSS, JavaScript basics, React fundamentals like components and props, important React tools like React Router and Styled Components, and testing and deployment. It recommends learning modern JavaScript features, UI frameworks, APIs, security, accessibility, style guides, and optional technologies like module bundlers. The key takeaway is there is no end to learning in web development.

Uploaded by

Donovan Ben Yossef
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

REACT

DEVELOPER
ROADMAP
Summary on roadmap to react js developer
# HTML
# CSS
# JAVA SCRIPT
Learn the Basics - HTML
HTML
Basics
Emmet
Forms
Semantic HTML
SEO Basics
Learn the Basics - CSS

CSS
Basics
Selectors
Positioning
Box Model
Display
Specificity
Learn the Basics - CSS

CSS
FlexBox
Grid
Media Queries
Pseudo Elements
Pseudo Classes
Animations
Learn the Basics - JS

JavaScript

Basic Syntax

DOM Manipulation

Fetch API / Ajax

Async Await

Event Listeners

ES6+ JavaScript
Learn the Basics - JS

JavaScript

Promises

Classes

Array Methods

Scoping

Hoisting

Closures
Basic things to learn in

React

Components

JSX

Props

State

Events

Conditional Rendering
Important topic

React - Hooks

useState
useEffect
useRef
useContext
useReducer
useMemo
useCallback
Learn some of the React UI
Frameworks
Material UI
Ant Design
Chakra UI
React Bootstrap
Rebass
Blueprint
Semantic UI React
Learn to use popular
React packages
React Router

React Query

Axios

React Hook Form

Styled Components

Storybook

Framer Motion
Learn to test your apps
with some of these
libraries / frameworks

Jest

Testing Library

Cypress

Enzyme

Jasmine

Mocha
Learn to deploy your
websites
Some free popular service
Netlify
Vercel
Firebase
Github Pages
Heroku
Render
Other important topics
you should know
PWA
Web Sockets
CORS
JSON
RESTful APIs
GraphQL APIs
Basic Security
Web Accessibility
Learn about style guides
A style guide is a set of standards that outline
how code should be written and organized.

A style guide contains general rules.

e.g. which quotes to use, how many spaces to


indent, where to put line breaks, etc.

Some tools to help lint and


format code
ES Lint

Standard

Prettier
Optional Thing to learn

Module Bundlers

Webpack

Parcel

SnowPack

Rollup.js

Gulp
Important Note
You don’t need to learn all the things mention
in this roadmap to become a front-end
developer or get a job as a front-end devloper.

There is no end of learning in web development


there’s always something to learn.

So never stop learning!

Thank You for your attention, Subscribe to my youtube


channel for more Advanced Tutorials.

- JavaScript Mastery

jsmasterypro javascriptmastery

You might also like