Thread by @TheAnkurTyagi, React Developer Roadmap!My path to learning react when I started two years [...]

React Developer Roadmap!

My path to learning react when I started two years back.

A Thread

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: 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?

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.

1- Basic knowledge of HTML, CSS, and JavaScript.

- HTML

https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts">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

- 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

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

3. Get familiar with tools that you will be using on daily basis:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🚀" title="Rakete" aria-label="Emoji: Rakete">Package Managers
-npm
-yarn

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🚀" title="Rakete" aria-label="Emoji: Rakete">Task Runners
-npm scripts
-gulp

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🚀" title="Rakete" aria-label="Emoji: Rakete">Webpack

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💻" title="Computer" aria-label="Emoji: Computer">Styling

CSS 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

6. State Management

- Component State/Context API
- Redux

- Learn about React& #39;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

7. Testing

-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 —

How to setup react on windows or Mac

https://www.robinwieruch.de/react-js-windows-setup">https://www.robinwieruch.de/react-js-... https://www.robinwieruch.de/react-js-macos-setup">https://www.robinwieruch.de/react-js-...

How to setup React.js on MacOS - RWieruch

A concise step by step guide on how to setup React.js on MacOS. In a few steps, you will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications...

https://www.robinwieruch.de/react-js-windows-setup

Freecode roadmap for reference: https://www.freecodecamp.org/news/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6/">https://www.freecodecamp.org/news/lear...

How to Learn React — A roadmap from beginner to advanced

Hey folks! This guide is for people who are starting with React. I have carefully curated the best videos and articles in each section to make it easier for learning. Note: I’m not associated with...

https://www.freecodecamp.org/news/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6/

Learn React for free: https://scrimba.com/learn/learnreact">https://scrimba.com/learn/lea...

Learn React for free - Scrimba.com

This tutorial course is the perfect starting point for aspiring React developers. You'll learn all the key concepts while building two apps and doing interactive coding challenges along the way.

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

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/ ">https://www.freecodecamp.org/">...

freeCodeCamp.org

Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.

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& #39;s a marathon and not a sprint.

I& #39;m really glad this thread is helping you, folks.

love to share my favorite courses which I& #39;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">https://gumroad.com/a/5326081...

The Good Parts of AWS

This is not your typical reference book. It doesn't cover all of AWS or all its quirks. Instead, we want to help you realize which AWS features you’d be foolish not to use. Features for which y...

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">https://wellpaidgeek.teachable.com/p/beginne...

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">https://codelifefitness.hashnode.dev/react-dev...

React Developer Roadmap For You!

React Developer Roadmap! My path to learning react when I started two years back. 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...

https://codelifefitness.hashnode.dev/react-developer-roadmap-for-you

Latest Threads Unrolled: