In the previous blog I talked about why one should prefer react for Frontend. (https://dev.to/digvijayjadhav98/why-choose-react-for-frontend-4m23) Now we'll take a look at React developer roadmap that will guide you through your journey from being a novice developer to a skilled plus experienced developer over time.
React is one of the most popular JavaScript library for designing rich and interactive User Interfaces.
Below is the mind-map of learning React.
I remember when I started learning React, I was confused how to start and what all things I should know before building some real time projects. After reading few books, referring blogs, online courses videos and two years of experience has made me enough confident about React and what to do and what not to.
Assuming you have basic understanding of HTML, CSS and JS
If not then do check out the resources section below. That being said, Lets dive in.
Lets divide the learning into three sections: Fundamentals, Advance and Ecosystem
1. Fundamentals:
- Create React App
- Components : react application is made up of reusable bits of code called components and in react you can create a function component or a class component
- Functional Component
- Class Component
- JSX : the idea of writing HTML like code inside JavaScript this is what is termed as JSX and is a syntax extension to JavaScript with JSX you pretty much describe what the UI should look like
- Props and State : Props which stands for properties are just arbitrary inputs for a component which play a major part in making the component reusable. However props are read-only the component can never modify its own props this is the point in time where you start learning about state, state allows react components to change their output
- useState and useEffect Hooks
- setState and Component Lifecycle Methods
- Conditional Rendering
- Lists and Keys
- Building Simple forms
After doing this I recommend you to do a basic mini project. Here are some cool examples
✨8 React Projects Every Beginner Should Try
2. Ecosystem :
React is not framework, its a library which means to complete your web application you need to have a stable ecosystem which covers styling, testing, scalability, performance and application oriented dependencies(eg for language translation one can use i18Net or for Serverless application one can check firebase or AWS lambda)
- State Management : Redux / Mobx / Flux / redux-toolkit
- Routing : React Router
- Styling : Styled Components, MaterialUI,Chakra,Tailwind.css, Bootstrap etc
- Forms : Formik,React hook form
- Testing :
- Cypress → End to end testing
- Jest → unit Testing
- Misc:
- TypeScript
- Storybook
- React i18Net
- Firebase
- Practical React libraries
After covering above topics you will be enough confident on React library and ready to build some real time projects. As you move ahead, you should also focus about performance optimization, caching, cookies, security and SEO. This leads to our last point Advance section.
-
Advance Topics:
- Isomorphic
- GraphQL
- Higher Order Components
- Render Props
- Refs
- Error boundaries
- Portals
- Http Requests : GET, PUT,POST,DELETE(fetch or axios)
- Caching, Cookies, local and session storage
10.Hooks
- useContext
- useReducer
- useRef
- useMemo
- useCallBack
- Custome Hooks
Learning journey never get to an end. If you have came this far in your react learning then I will recommend you to learn Typescript and move towards Next JS as Next has removed few drawbacks of React and has so many additional functionalities. People also prefer learning React Native so along with Web you will also be able to build Android and IOS applications.
My intentions were to give an idea on how React looks like from top and what all useful things it contains. Below are some resources which I found most useful while learning ReactJS.
html and css : Code with harry : https://www.youtube.com/watch?v=GeykycZ4Ixs
Book: https://www.amazon.in/HTML-CSS-Design-Build-Websites/dp/1118008189JS required for React JS : https://www.youtube.com/watch?v=XevQlT444qg
Plain JS : https://www.youtube.com/watch?v=W6NZfCO5SIk
JS ES6 : https://www.youtube.com/watch?v=NCwa_xi0UucReact JS:
playlist :Code evolution : https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3Mosh : https://www.youtube.com/watch?v=Ke90Tje7VS0&t=813s
*Tip: *Try making notes on Notion or some other notes making application. Try adding code snippets along with textual information. This will not only help you remember after long time but also you don't have to visit google every time, you can refer your notes.
Top comments (27)
I can't stop thinking (as Tech Lead) how much newbies and not so newbies relay in styling kits nowadays. You set 4 of them + plain CSS (not even in the first place for a reason I can't figure out) while in truth you only need CSS + Sass (SCSS) to provide optimized beautiful views those days, specially with flexbox.
Then you stuck when having to code custom components... I find Tailwind highly disappointing on the other hand because you enforce yourself to learn the CSS api the wrong way (which makes you able to work with tailwind but terribly inefficient with SCSS) while flooding your HTML with seas of boilerplate.
If you've issues with SCSS is because a lack of good architecture and tailwind will not solve that and last but not least the amount of jobs listing tailwind is just ridiculous, last time I search for it in LinkedIn I could find only 1. It's all about community newbies hype so wdy bother anyway?
I believe you don't find Tailwind as a requirement in job listings because it's so easy to learn it doesn't make sense to list. Just learn it on the job. Actually, the same applies to SCSS or any CSS solution for that matter. While it's an important decision for a project it shouldn't be a priority for the hiring devs to find people with those skills, or for job seekers to judge a job posting on.
That is, generally speaking. Of course there are exceptions. And I'm speaking from a fullstack dev perspective :)
Nope, the reason is that almost nobody is using it in enterprise projects which cover the major part of the market.
Community hype is not a reflex nor the present nor the future, it could be and it could not, we'll see.
As tech lead I see tailwind as a way to avoid unused css code in production but the drawbacks are there as well to be realistic and of course it's not the only way to reach that, there are several and the devs I work with focus so much in JS and so poorly in CSS that having to use this atomic class->css prop way to work would be a huge mess quickly in comparison on some (that knows HTML and CSS well) providing good styled components to others (that know only the very basic +JS)
Component libraries are a great way to get a project up and running quickly, with a consistent design and UX, with little friction for developers of all skill levels. And building more complex components out of the basic building blocks of the component library is just as simple.
There are some limitations in component libraries, but i much prefer them over something like Tailwind which i think forces the learning of specific, and unnecessary classes over the corresponding css properties, and doesn't actually give much value over basic css, or something like StyledComponents.
I'd always start a project with a component library and then once the product is live and you start to get insights into your user-base, you can spend a while building your own, more brand-specific component library and swap out the existing one.
the only issue with that, taking Bootstrap for example as a wide used styling kit is that you'll end up in trouble whenever you have to override it.
There's plenty of !importants and selectors that are though to overcome and you'll end up with more and more CSS code just for that. On the other hand and depending on the architecture and tooling used, you can end up loading the entire bootstrap (both CSS and JS) everywhere which makes your "unused CSS" grow in a blow.
It's so simple to bring styled components nowadays that usually those kits are a nonsense... I mean, yes, you can have something up and running fast but making your own is not so slow as well. The need of getting it running should be quite critical to walk that path because at the end you'll lose more time refactoring than what you could waste in the first hand doing it from scratch (or with some base).
I agree with you. I've only been in the field for two years but I've been doing css for well over 15 years and I think a lot of people rely too much on MUI/Tailwind/Bootstrap or whatever to do the work for them and then dont learn how to style it themselves.
I hate helper classes that do one thing but it's actually 50 lines of css that you easily can do on your own with flexbox/grid in two lines.
lovely.
If react is not a framework then we can integrate it with some other framework like Laravel etc.. , right ? May be MVC / MVT
But question I have In my mind is how can we integrate client side rendering with server side rendering ? Is external API a middleware ?
Also I'm wondering how Facebook was initially developed with php and reactJS
MVC and MVT are design patterns, we use them for better structuring of code. To your question, large companies rarely have a consistent codebase throughout, so they use multiple frameworks as per the use case. If you want to use any other framework along with React then what's the use case? What are you trying to achieve by doing this?
Next JS is a framework that works with React and provide server side rendering.
Of course you can code it by yourself with laravel or plain php or whatever server side language of your choice instead.
That's what I want to know, why react is considered when we build project on MVC design pattern based framework ? server side rendering is already been fulfilled right ?, then why react ?
Ohh okay, got your point. So we have server side frameworks like NodeJs, Django, Flask where you can render UI templates along with API and can build entire website in backend. But reason why these Frontend framework come into picture because DOM manipulation, state management and reusable components are hard to handle when you don't have seperate frontend library. Basically your answer lies in the advantages of any of frontend library (React/Angular/Vue/Next)
Also from computational point of view, it's recommended to host backend and frontend seperately to distribute traffic equally.
You don't use React in a MVC design pattern, simply because your server is not providing your view to the browser but "data" (usually in JSON format) that React (in this example) in the frontend will parse and handle to generate the actual views.
When you use Server Side Rendering (SSR) or Static Site Generation (SSG) then it's kinda sort of MVC (it will depend on the abstraction layers behind and the architecture).
If you use a Next JS which acts as a Backend, interacting with a Database and providing the view to pre-render it then yes, it's a MVC that it's hydrated afterwards with the reactive functionalities.
If you use a Next as middleware to handle that then usually it's not a MVC, you just have your services or microservices (in the language of your election, being laravel, lumen, Java Spring, Python, Node... whatever) that provide data to Next JS (next is fetching it) then you can have a MVVM for example...
When you split the backend and the frontend using microservices (and/or microfrontend) then the """integration""" is not like adding code inside code, it's about a piece of code providing code to another piece of code.
There is this nice free course on Scrimba about react js and It covers the basics. It was created by Bob Ziroll.
I love Mosh Hamedani tutorials as he covers not just the basics but some insights as well. The only bad thing in the subject of discussion is that Mosh's React course is made with classes (POO) and not with functional
Mosh🙌🙌
Yeah will check that. Thank you!
Hey, look at that. There are 404 users that saved this :) I will keep this moment
Thank you! Will definitely try to keep up the bar high by blogging consistently and providing relevant quality content!
Nice,
𝗗𝗼 𝗰𝗵𝗲𝗰𝗸𝗼𝘂𝘁 𝗺𝘆 𝗱𝗲𝘁𝗮𝗶𝗹𝗲𝗱 𝘃𝗶𝗱𝗲𝗼 𝗼𝗻 𝗿𝗲𝗮𝗰𝘁 𝗿𝗼𝗱𝗺𝗮𝗽:
youtube.com/watch?v=tehWvXcYkG4
please make node js roadmap as you make reactjs it was lot of helful for me.
Its coming this Sunday!!
consider semantic, fluent ui and react frameworks nextjs, remix and refine
Sure! Next few topics will basically cover the important topics from React which will help any beginner to build a production level project. After that will definitely move towards Next Js.
thank you for providing helpful guide
Glad you liked it!