Read on Twitter
React Developer Roadmap!
My path to learning react when I started two years back.
A Thread
#100DaysOfCode #CodeNewbie
My path to learning react when I started two years back.
A Thread
#100DaysOfCode #CodeNewbie
The purpose of this roadmap is to give you an idea about how I did.
The road map will guide you if you are confused about what to learn next.
Disclaimer: Their might be some more additional stuff based on your need.
Learn React or JavaScript first?
The road map will guide you if you are confused about what to learn next.
Disclaimer: Their might be some more additional stuff based on your need.
Learn React or JavaScript first?
You should understand at least the basics of JavaScript, often referred to as JavaScript ES5, and have decent knowledge about HTML and CSS.
React also utilizes JavaScript syntax, most often referred to as JavaScript ES6 and beyond.
React also utilizes JavaScript syntax, most often referred to as JavaScript ES6 and beyond.
1- Basic knowledge of HTML, CSS, and JavaScript.
- HTML
Learn the basics of HTML
- Learn the basics of CSS
- Style pages from the previous step
- Build a page with grid and flexbox
- HTML
Learn the basics of HTML- Learn the basics of CSS
- Style pages from the previous step
- Build a page with grid and flexbox
- Get familiar with the syntax
- Learn basic operations on DOM
- Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping
- Make some AJAX (XHR) calls
- Learn new features (ECMA Script 6+
- Functions are first-class citizens in JavaScript
- bind(), apply(), & call
- Learn basic operations on DOM
- Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping
- Make some AJAX (XHR) calls
- Learn new features (ECMA Script 6+
- Functions are first-class citizens in JavaScript
- bind(), apply(), & call
- Object Methods
- Array Methods
- Prototypical Inheritance -> ES6 Class
- Callbacks and Promises
- Event Loop
- Event Bubbling
- Regular Expressions
- Error Handling
- Hoisting, Memoization
Declarative vs imperative programming
Functional vs object-oriented programming
- Array Methods
- Prototypical Inheritance -> ES6 Class
- Callbacks and Promises
- Event Loop
- Event Bubbling
- Regular Expressions
- Error Handling
- Hoisting, Memoization
Declarative vs imperative programming
Functional vs object-oriented programming
2. Must have development skills:
- Learn GIT, create a few repositories on GitHub
- Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
- Get familiar with terminal, configure your shell (bash, zsh, fish)
- Read books about design patterns
- Learn GIT, create a few repositories on GitHub
- Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
- Get familiar with terminal, configure your shell (bash, zsh, fish)
- Read books about design patterns
3. Get familiar with tools that you will be using on daily basis:
Package Managers
-npm
-yarn
Task Runners
-npm scripts
-gulp
Webpack
Styling
CSS Preprocessor
-Sass/CSS
- Less
- Stylus
Package Managers-npm
-yarn
Task Runners-npm scripts
-gulp
WebpackStylingCSS Preprocessor
-Sass/CSS
- Less
- Stylus
4. CSS Frameworks
- Bootstrap
- Materialize, Material UI, Material Design Lite
- Semantic UI
5. CSS in JS
- Styled Components
- Emotion
- JSS
- Bootstrap
- Materialize, Material UI, Material Design Lite
- Semantic UI
5. CSS in JS
- Styled Components
- Emotion
- JSS
6. State Management
- Component State/Context API
- Redux
- Learn about React's JSX syntax
- Learn about React Components
- Learn about React Component Composition
- Learn about React Props
- Learn about React State
- Component State/Context API
- Redux
- Learn about React's JSX syntax
- Learn about React Components
- Learn about React Component Composition
- Learn about React Props
- Learn about React State
-Form Helpers
- Redux Form
- Formik
- Formsy
- Final Form
-Routing
- React-Router
- Router5
- Redux-First Router
- Reach Router
- GraphQL
-Apollo
- Relay
- Libraries
Lodash
Moment
classnames
Numeral
RxJS
- Redux Form
- Formik
- Formsy
- Final Form
-Routing
- React-Router
- Router5
- Redux-First Router
- Reach Router
- GraphQL
-Apollo
- Relay
- Libraries
Lodash
Moment
classnames
Numeral
RxJS
7. Testing
-Unit Testing
- Jest
- Mocha
- Chai
- End to End Testing
- Selenium, Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js
- Integration Testing
-Karma
-Unit Testing
- Jest
- Mocha
- Chai
- End to End Testing
- Selenium, Webdriver
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js
- Integration Testing
-Karma
8- Server Side Rendering
- Next.js
- After.js
- Rogue
- Mobile
- React Native
- NodeJS Fundamentals & Code Editors
Understanding of NodeJS fundamentals is important to work on ReactJS.
A lot of web developers mostly prefer Visual Studio Code — VS CODE —
- Next.js
- After.js
- Rogue
- Mobile
- React Native
- NodeJS Fundamentals & Code Editors
Understanding of NodeJS fundamentals is important to work on ReactJS.
A lot of web developers mostly prefer Visual Studio Code — VS CODE —
How to setup react on windows or Mac
https://www.robinwieruch.de/react-js-windows-setup https://www.robinwieruch.de/react-js-macos-setup
https://www.robinwieruch.de/react-js-windows-setup https://www.robinwieruch.de/react-js-macos-setup
Freecode roadmap for reference: https://www.freecodecamp.org/news/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6/
Learn React for free: https://scrimba.com/learn/learnreact
Once you will have a basic understanding of React, you can start building some basic projects such as…
- Simple todo-app
- Simple calculator app
- Build a shopping cart
- Display GitHub’s user stats using GitHub API
- Simple todo-app
- Simple calculator app
- Build a shopping cart
- Display GitHub’s user stats using GitHub API
There are plenty of free React learning resources online that have a high quality and are accessible to everyone. If anyone asks me about becoming a React developer, I often just send them straight away to FreeCodeCamp. https://www.freecodecamp.org/
You can participate in the 100 Days of Code challenge, write about it on Twitter.
Make it a daily habit.
Only when sticking to it for a while, by having the persistence and by coding every day, you will eventually become a React developer.
It's a marathon and not a sprint.
Make it a daily habit.
Only when sticking to it for a while, by having the persistence and by coding every day, you will eventually become a React developer.
It's a marathon and not a sprint.
I'm really glad this thread is helping you, folks.
love to share my favorite courses which I've bought and loved a lot, which has helped me a lot.
This book covers different AWS concepts from scratch. Written by Daniel https://gumroad.com/a/532608115/MsVlG
love to share my favorite courses which I've bought and loved a lot, which has helped me a lot.
This book covers different AWS concepts from scratch. Written by Daniel https://gumroad.com/a/532608115/MsVlG
Learning JavaScript can be difficult sometimes for beginners.
@WellPaidGeek gives all his efforts & develop step by step learning plan.
One of the best course in JS
"The beginners guide to programming in JavaScript"
https://wellpaidgeek.teachable.com/p/beginners-javascript/?affcode=391490_mb0iiogk
@WellPaidGeek gives all his efforts & develop step by step learning plan.
One of the best course in JS
"The beginners guide to programming in JavaScript"
https://wellpaidgeek.teachable.com/p/beginners-javascript/?affcode=391490_mb0iiogk
I have consolidated this thread in the below blog post.
React Developer Roadmap For You! from @hashnode
#100daysofcode #reactjs https://codelifefitness.hashnode.dev/react-developer-roadmap-for-you
React Developer Roadmap For You! from @hashnode
#100daysofcode #reactjs https://codelifefitness.hashnode.dev/react-developer-roadmap-for-you
