Seeking Guidance on Deep Diving into ReactJS
Hey everyone,
I'm currently working as a Software Development Engineer and tasked with creating a design system and component library for my company. While I have a basic understanding of React, I'm eager to take my skills to the next level. I believe mastering React thoroughly will not only benefit my career growth but also enhance my preparation for interviews. Here’s where I stand with React: my knowledge is pretty basic. I'm familiar with the fundamentals and have worked on creating simple components and UI elements. Now, I want to dive deeper and cover React comprehensively.
Goals:
-Master React: I want to explore advanced concepts and best practices that will help me build scalable and maintainable applications. Deep dive into the working of react and its components (like hooks, etc)
-Contribute to React's Official Codebase: I aspire to contribute to React itself. It would be incredibly fulfilling to contribute to such a foundational library in the developer community.
Seeking Guidance On:
-Learning Path: What resources (books, courses, tutorials) do you recommend to deepen my understanding of React? Any specific projects or challenges I should undertake?
-Advanced Concepts: What are the key advanced topics within React that I should focus on? -Contributing to React: For those who have contributed to React or other large-scale open-source projects, what advice do you have for someone looking to make their first contribution?
-Interview Preparation: How can I leverage my deepened knowledge of React to excel in technical interviews?
I appreciate any advice, tips, or personal experiences you can share! Thank you in advance.
I loved the FullStackOpen course by the University of Helsinki (really it's just a self-paced online tutorial).
https://fullstackopen.com/en/part1
You can learn all the modern React basics there within 10 hours, and there's plenty more about integrating it into a full stack web app.
You should focus on understanding creating components, JSX, useState, useEffect.
I think you might be conflating a few different projects that could perhaps be tackled one at a time?
For the component library, check out existing systems like MUI and how they are implemented to be easily usable, styleable, and extensible. The documentation and typing are great, as are the examples. They have a marketplace of sample apps built using those components. Can you create something as useful for your team? This is less about how they are coded behind the scenes and more about their developer experience and ergonomics.
For the design system, do you also have a design and UX background (color, typography, UI, accessibility, etc.?) and a working understanding of how all that is used to come up with a design? Does your team currently use any tools to assist them with design consistency (like a style guide or component library software, or any system for getting tokens and such in and out of Figma and into frontend projects?). Work with your designers on this one and build them an easy to use pipeline, while also talking to the developers to better understand how they could consume these designs in their projects. Also talk to marketers and branding and management and understand their needs, like what should happen when the logo is updated, a design language is overhauled, brand colors and fonts are adjusted, etc. It's not about the code itself but the process it facilitates, like how to push those changes out for gradual uptake across different teams, frontends, frameworks, etc.
Both of those projects sound more like human problems than coding ones. You're building tools for users, optimizing for their needs, not doing leet code or optimizing shadow DOM performance or creating a new state library. You can do a good job with those without needing to know any super complex React internals. It's more just a lot of tedium and thoughtfulness and empathy, like a lot of frontend work. If you want to do a good job on them, I suspect the work will be 80% discussion and design (and more discussion and design and reviews and changes and disagreements and consensus building) and 20% what turns out to be very basic code, because that's all anyone would really want to use and maintain over the long term. Or maybe you'd build a system on top of an existing one, like MUI or Chakra or Ant or such.
Wanting to contribute to React upstream is a different problem altogether. Meta has no shortage of superstar devs internally, and they also have no shortage of people wanting to leave their mark on the Web by way of drive-by contributions. If I were you I'd study their codebase first and see what the issues of the day are and try to make PRs for open problems not too big in scope but not a trivial fix either. It probably won't be easy or someone would've done it already. Alternatively, you could also make a mark by doing a clear writeup on some particular modern issue (like server components and how they work across different frameworks and build setups, or different caching strategies in 2024, or a review of all the tooling, which is an evergreen problem in frontend land).
But don't try to do all of those at once. The styling and UI lib projects don't call for a master React engineer. They call for a detail oriented team player who spends a lot of time understanding the needs and wants of other developers and designers and makes a system they like. It's not an opportunity to show off, but to work together.
The React upstream or ecosystem contribution can be something separate that you do later, by solving a current real problem (either software or education) based on identified needs the community has expressed. I'd argue that too is about solving user needs, not simply proving that you are advanced at React (which is a prerequisite, not the final output).
----------
The above is just my opinion as a nobody frontend dev who has experience working on such systems, to good peer feedback. Nobody once asked how any of it was written or how good at React I am (I'm honestly not). Nobody ever cared. They cared about whether the processes fit their workflows and satisfied managerial needs while being acceptable to other teams and flexible enough to adapt to the future. These things have short life cycles because new hires inevitably want to leave their mark and exercise their creativity anew.
I don't work for a big tech company and I never contributed to upstream React (though did do small PRs for various small ecosystem projects), so feel free to take all this with a grain of salt :)
Just my 2c.