10710023, 11:40 aN Loam ReactlS - Complete Roadmap JANUARY 28, 2022 / #REACTS Learn ReactJS - Complete Roadmap Cy & TAPAS ADHIKARY Web Development is a fascinating area to explore, learn about, and understand. Asalearner, you have many libraries and frameworks that can help you develop projects for the web. It may even become tricky to pick ‘one and get started at times. But when it comes to learning Reactus , it shouldn't be a difficult decision to make. ReactJS (aka React) is an open-source JavaScript-based user interface library. It is insanely popular in web development communities today. React Native is equally popular among mobile application developers. In this article, we will look at a complete roadmap to learn ReactJS. If you are thinking of starting ReactJS and looking to get a step-by-step approach, this article is for you. Also, if you are a ReactJS developer hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! we10710023, 11:40 aN Loam ReactlS - Complete Roadmap Why do you need a roadmap to learn React? Good question. Think about it this way. You are in an unknown city, and you have to travel from one place to another. What you need most is a map or guide to help with your travels. Learning something new doesn't have to be very different. If you have amap or guide that lets you know "if you first learn A, next attempt to learn B. Then you will find C much easier’, things will be much smoother for you. It may also help you decide on alternative routes, how far to goat a stretch, and when to pause. In this guide, we will break things down into phases and build the roadmap to learn ReactJS. You will also find resources to look into (optionally) as we explore the roadmap further. #s) Keep in mind that you may feel a bit overwhelmed looking at this roadmap the first time. But don't worry. It is not as challenging as it looks. | have also specified some resources to help you learn at an incredible pace. have created this roadmap based on my 6+ years of working experience with ReactJS. So in case you disagree with certain things, | am okay with that. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! ane10710023, 11:40 aN Loam ReactlS - Complete Roadmap Breaking the roadmap down into phases We will break the entire roadmap into four phases. They will be: 1. What to learn before React 2. What to learn as a beginner to React 3. How to move from beginner to intermediate React developer 4. How to move from intermediate to advanced React developer What to Learn Before You Learn React ReactJS is JavaScript-based. You'll need to be familiar with a few things (other than basic JavaScript knowledge) to accelerate your React learning at full speed. @ Git Version Control Git is aversion control tool that helps you manage your source code better. It doesn't have a direct relationship with ReactJS. But it helps if you learn its basic uses so you can take advantage of the development ecosystem. Git is easy to learn when you focus on a few basic things like, hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners!10710023, 11:40 aN Loam ReactlS - Complete Roadmap * Howto commit your changes to the repo * Howto push to the remote repository * Howto resolve merge conflicts? Alongwith Git , you will also need to know how to use a Git-based repository management service like GitHub . You can learn all about Git and GitHub in this YouTube playlist: Git and GitHub Playlist. @ HTML HTML provides the structure of a web page. You will use the HTML structure in a new syntax called JSX when you code in ReactJS. You don't need to know everything about HTML. But you should have a basic knowledge of the most-used tags and semantics. You can check out this HTML crash course for beginners and this HTML basics guide to get started. You can also check out freeCodeCamp's newly-updated Responsive Web Design certification to get started with HTML. @ css When it comes to CSS, the scope is sky-high. However, focus on the topics | have mentioned in this Tweet: hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners!10710023, 11:40 aN Loam ReactlS - Complete Roadmap usse - Basic Selectors - Pseudo-classes and how to combine - Box Model - Flexbox - Grid - Positioning(relative, absolute) - Units(px, em, rem, vh....) What else? IMO, if we know the above, that's 80% of it. Rest 20% is google search. No one remembers properties 7:21 AM - Jan 24, 2022 ® @ 127 @ Reply ft, Share Read 6 replies You can learn a lot about CSS on the CSS“Tricks site, and here's a project-based tutorial to help you put basic CSS concepts into practice. You can also check out freeCodeCamp's Responsive Web Design certification to learn CSS. @ JavaScript You must know the following concepts from JavaScript, * Variable Declarations (let and const) hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! ene10710023, 11:40 aN Loam ReactlS - Complete Roadmap * Object Destructuring * Spread and Rest Operators * Module Import and Export * Abit of Promises and Async Programming freeCodeCamp also has a JavaScript certification if you want to check that out. @ NPM Ecosystem You should be aware of how to use npm, yarn and node version manager (nvm) to help you run and test a ReactJs app locally. Knowing how they work at a high level is always helpful to debug your environment in case you run into issues. Here is a resource to help you @ How to Deploy, Host, and Make your App Public: It won't be much fun if you have created something cool with ReactJS and cannot showcase it to the world. So, you should know how to deploy the app and make it available for public access. Tools like Vercel or Netlify make it easy to deploy your React app React app to Netlify. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners!10710023, 11:40 aN Loam ReactlS - Complete Roadmap Let's now focus on what you need to learn at the minimum to start enjoying React in practice. These are foundational pieces, so make sure to give enough time and hands-on effort to truly understand the concepts. There is a famous saying called "Think in React". These fundamental concepts should help you to develop that "Think in React" mindset. © Understand What React Is You should understand what is so special about ReactJs. It is a declarative, component-based user interface library. What does all this mean? Check out this video that explains all these concepts clearly. © Learn How to Set Up your Development Environment There are multiple ways to set up a development environment for ReactJs. Minimally, you can point to the CDN distribution from your script file. This approach is okay to get started but not sustainable. As a beginner, you may not want to spend too much time in Babel or Webpack related configurations for your projects. IMO, the most intelligent and quickest way to get started with the ReactJS development environment is by using the Create React App. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! me10710023, 11:40 aN Loam ReactlS - Complete Roadmap © Learn about JSX ReactJS allows the user interface logic to couple with rendering logic, events, handling state changes, and more. This coupling is to encourage the practices of building self-contained components. JSx is asyntax that looks like HTML but also has the power of JavaScript . This syntax helps developers write UI logic with all necessary elements like data fetching, conditions, looping, expressions, etc. Note that you can write a ReactJS app without using JSX syntax - but the development experience will not be as good. Here's a great resource to help you learn about JSX in React. © Learn about React Components Components are the heart of ReactJs applications. We create independent components that are reusable, self-contained, and isolated. A component is supposed to perform one job correctly. Multiple components come together to build the application. In ReactJS, you can create components using JavaScript classes or simple functions. | advocate using functional components as it is more straightforward and require lesser coding. Here's an article about how to write better React components, and here's one about using React components instead of HTML. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! ane10710023, 11:40 aN Loam ReactlS - Complete Roadmap across components. Ihe "state" of your component that you use to render information and modify information. You can check out this in-depth guide to state in React to get a better understanding of how it works. © Props in React In real-world programming, you will need the components to interact with each other. States are private to a component, but you need to pass the data between components. That's where Props come into the picture. Note that props are read-only. should know. Finally, here's a beginner-friendly article about props and state in React in case you need to clear any basics up. © Lists and Keys in React We use list to render a list of items in a React component. Itis a very common task to list users, TODO items, and other things. We use the nap() function to iterate over the list and render the results. keys help identify what item from the list has changed to inform React to re-render. ReactJS gives a warning if you forget to mention the keys for alist. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! one10710023, 11:40 aN Loam ReactlS - Complete Roadmap can pe aynarmc ana mignt neea mourncauions. we also need Lo perform resource cleanups when components are destroyed. ReactJs provides various life-cycle methods to detect the phases and take action. If you are just getting started with ReactJS, you should understand life cycle management for functional components. You can do this using the in-built hooks like useState , useEffect ,and soon. Here's a helpful video you can check out to understand the React component lifecycle. And here's an article that'll teach you React Hooks basics, And if you need an overall beginner's guide to solidify these concepts, here's an in-depth React Handbook to get you started. How to Move from Beginner to Intermediate React Developer Let's now understand what it takes to move from a beginner to intermediate level with React. In this phase, you will start focusing on the completeness of the application. At the end of this phase, you will be able to take up most ReactJs challenges and enjoy accomplishing them. @ Styling in React We all want our applications to look fresh and aesthetically pleasing, You can use plain old CSS to style your ReactJS app. Or you can use hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! sone10710023, 11:40 aN Loam ReactlS - Complete Roadmap As an example, here's a tutorial about styling your React apps with TailwindCss. @ Form Handling in React Handling forms is an essential requirement in web applications. You need to understand how to handle form elements in the ReactJS way. For example, you can use the react-hook-form library to build forms easily. Here are a couple tutorials to get you started with react-hook- form. @ Data Handling in React This is a crucial part of application development. You need to learn how touse the fetch APr or libraries like node-fetch and axios to interact with APIs and handle data in your component. Here's a cheatsheet to get you started with the Fetch API, and here's an in-depth guide on how to use Axios with React. @ Reconciliation Process in React ReactJS uses the Virtual DOM and diffing algorithm to decide when and what to update in the actual DOM for the rendering. Knowing how it works under the hood will help you with debugging. Here's a good starter guide on the DOM, or Document Object Model, and here's one on how to manipulate the DOM. Then you can check out this overview of the Virtual DOM and how it works in React. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! nie10710023, 11:40 aN Loam ReactlS - Complete Roadmap useEffect when you learn about the life-cycle. There are other useful built-in hooks you need to learn with use-cases. Make sure you don't ignore them. Here's a fun project-based guide on how to learn React Hooks by building a Paint app. @ Custom React Hooks Custom hooks helps in reusability. You must look for opportunities to extract out component logic to reusable hooks. The code becomes clean and modular with the usage of custom hooks. Here's a step-by-step guide on how to build your own custom React Hooks. @ Context in React In React applications, we pass data from parent to child components. Itis one-directional and top-down. If too many components are deep down, the data (props) must pass through many components. Also, if you need to share some values between components that are not part of a hierarchy, you need a mechanism. That's when you can make use of the Context . You can Jearnall about React context in this beginner-friendly guide. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! rae10710023, 11:40 aN Loam ReactlS - Complete Roadmap In this phase, you will deal with a few expert-level topics. You need to know these concepts only when you're working on more extensive application development using ReactJS. Note that you can learn each of these concepts whenever you're ready. Also, you don't have to learn them all. @ Lazy Loading in React ReactJS supports code splitting. Its a way to lazy load what you need by the current user. It also avoids producing a large build bundle. The dynamic import feature is the best way to include code-splitting in a React app. Here's a basic tutorial on lazy loading in React to get you started. @ Portals in React You may have to use Portals when dealing with modals, dialogs, or tooltips with better event handling. It is supported out-of-the-box in ReactJS. @ State Management in React In alarger application, you must share information between components. At times, the default support of Props and Context may not suffice. In these cases, you may need a state management solution like Redux or Mobx in these cases. But again, you can decide whether (or not) hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! sate10710023, 11:40 aN Loam ReactlS - Complete Roadmap started. Then, if you want to dive deep and learn all about Redux, here's a full book you can read. @ Routing in React Routing is required for multi-page applications. It is also helpful to bookmark a particular page or traverse back-and-forth in the application using the browser's back button. React Router is the most popular routing solution that helps with declarative routing. Here's an in-depth guide to learning React Router that'll get you started with all the basics. @ Theming in React Theming is a modern feature in web apps. We should give users the choice of what theme they want - like light or dark - to use to help them feel comfortable when using your site or app. You can even create your custom themes in some applications and apply them. There are several ways you can theme a React app. Select the one that matches the best with your application's CSS stack. @ Patterns in React There are various patterns you can use as solutions to common problems in React. Over time, ReactJS developers have found patterns they could use to help them stop reinventing the wheel. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! sane10710023, 11:40 aN Loam ReactlS - Complete Roadmap @ Anti-Patterns in React Anti-Patterns are the practices that you should avoid using in the ReactJS applications. You should learn them along with the helpful patterns you should use. Just keep in mind that learning advanced React concepts doesn't stop here. You can continue to learn about accessibility, test frameworks, and many more advanced concepts as needed. So, How Do You Get Started with React? That's the billion-dollar question! There are plenty of great resources (books, articles, videos) to help you with the above topics, many of which are linked in each section. So, you can find the ones that suit you the best. You can also check out these resources: * ReactJS Official Documentation * freeCodeCamp's front-end development library course * After spending many years with ReactJS, I have started creating a YouTube video series that aims to cover all the aspects we discussed in the article. Please SUBSCRIBE if you find it helpful. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! s91810710023, 11:40 aN Loam ReactlS - Complete Roadmap ever-growing, and the community is also growing quickly. There is no reason to stay back. Also, React is a base for many other popular frameworks like Next. js , GatsbyJS , and very recently Remix . | am not comparing React with the Angular, Vue, or Svelte frameworks. They are all excellent in their ways, like how ReactJS is an excellent library for user interface development. Before We End | hope you found the roadmap helpful. Please plan to get enough practice as you start walking through the path. My DMs are open on Twitter if you want to discuss further. Let's connect. | share my learnings on JavaScript, Web Development, and Blogging on these platforms as well: « Follow me on Twitter * Subscribe to my YouTube Channel * Side projects on GitHub See you soon with my next article, Until then, please take care of yourself, and stay happy. hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! see10710023, 11:40 aN Loam ReactlS - Complete Roadmap If you read this far, thank the author to show them you care. Say Thanks Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546) Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world. Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can make a tax-deductible donation here. Trending Guides JSisEmpty Equivalent Coalesce SQL Submit a Form with JS Python join() ‘Add to List in Python JS POST Request Grep Command in Linux JS Type Checking String to Intin Java Read Python File hitps:wwroecodecamp orginewsireacl-fundamentalsfr-boginners! ate0710123, 11:40 AM Leam ReactS - Complete Roadmap Matplotlib Figure Size For Loops in Python Database Normalization JavaScript 2D Array Nested Lists in Python ‘SQL CONVERT Function Rename Column in Pandas Create a File in Terminal Delete a File in Python Clear Formatting in Excel K-Nearest Neighbors Algo Accounting Num Format Excel iferror Function in Excel Check if File Exists Python Remove From String Python Iterate Over Dict in Python Our Charity About AlumniNetwork OpenSource Shop Support Sponsors Academic Honesty Code of Conduct Privacy Policy Termsof Service Copyright Policy ntps:iwwwtrescodecamp orginoweiroacttundamentals-or-boginners! sane