A React developer might have one of the most important roles on your team, even if you haven’t heard of this position before. Read on to learn how to develop software with React and some tips for using it in your projects.
What is React?
In the words of its creators, “React is a JavaScript library for building user interfaces.” It was first deployed at Facebook in 2011 before becoming an open source library in 2013.
As of 2021, React is the most used JavaScript library. For those interested in pursuing a career in frontend software development, React is an incredibly sought after skill and an excellent choice to learn for countless career opportunities.
In this article, we’ll cover several ways to increase your React proficiency including:
- Understand the Virtual DOM
- Use Hooks
- Use Component Composition
Understand the Virtual DOM
React’s superpower is the Virtual DOM (Document Object Model). Rather than rendering every component to the browser’s DOM (which is relatively slow) anytime something changes, React keeps a version of the DOM in memory. React tracks changes in the state of the app, allowing it to selectively re-render the actual DOM in the browser. This is called reconciliation.
The Virtual DOM helps keep React apps performant, because it avoids unnecessary re-renders of components which haven’t actually changed. This process is important to keep in mind when debugging your code in React. If the app isn’t doing what you think it should be doing, you might find that changes in the app haven’t properly triggered a re-render. Which brings me to my next point…
Use Hooks
Hooks were introduced in React v16.8 back in 2019. They enable developers to create stateful function components, and they replace lifecycle methods (which could only be used in Class components) with methods that can be used within function components. The result is a simplified, more readable codebase that allows developers to reuse stateful logic.
For example, if the state of a component changes, that component will re-render. Guaranteed. You can also use a hook like useEffect to execute an action or set of actions depending on the state of the app, whether that is once upon initial render, or any time a particular variable (called a “dependency” of the function) changes.
As the developer, you have the power to define these “dependencies” and be sure that a changed value will trigger some code to execute. The most common built-in React Hooks are useState and useEffect, but there are many others. There are also third-party libraries of other commonly-used hooks, and you can even create your own custom hooks to fit your particular use case.
Use Component Composition
As you create different components in React, you might find that there is a lot of overlap between some of them. For example, on the Udacity catalog page for enterprise customers, we have a component to display a customized sequence of Udacity programs.
By using component composition, we have one version that’s a straightforward LearnerGraphPath for when we want to show the full width. Then, when we need to fit this component into spaces with less width, we use ScrollableLearnerGraphPath, which is the plain LearnerGraphPath wrapped by a scrollbar component, allowing the user to scroll and adjust the positioning of the component. This way, we account for both use cases while preventing unnecessary duplication of code, which is a bad practice and requires any future changes to be made in multiple places.
When the full width is available, we show the LearnerGraphPath:
In tighter spaces, we can use the ScrollableLearnerGraphPath:
This is just one example, but component composition can be used in many scenarios where you may have similar components that need to be used differently. By using component composition, you can follow the DRY (Don’t Repeat Yourself) principle and keep your project easily maintainable.
Step Up Your React Skills
With only 10 hours a week of online education, you can earn your Nanodegree program certificate in as little as four months and be well on your way to becoming a React developer. Learn how to build declarative UIs for the web with React with Udacity’s React Nanodegree program.
