There are many ways to learn React, including via the official Learn React docs. In this tutorial, we will support you in beginning to learn this library through using Sourcegraph. Sourcegraph enables you to search across open source code written in React so that you can delve into foundational concepts that are crucial to being able to implement React effectively.
We’ll be using Sourcegraph Cloud throughout this tutorial, which you don’t need an account to use. If you would like to create an account to save your search history or learn more about the tool, feel free to review our Sourcegraph Cloud tutorials and videos.
Many front-end developers will need to build web forms to intake information from users. React provides a built-in way to work with forms using controlled components, but there are a number of React form libraries that can provide you with more features.
With Sourcegraph, you can ramp up your knowledge of React form libraries through searching across code that implement these libraries. You can also use Sourcegraph to review library documentation.
Formik is the most popular open source library for building forms with React and React Native, with over 28,000 stars on its GitHub repository. Let's use Sourcegraph to search across code that makes use of Formik so we can understand how developers are using this library.
Another library you may consider is KendoReact Form, which helps you manage forms while also being a small package with no dependencies. Search across repositories that are making use of this package using Sourcegraph.
You can read more about React form libraries on DEV. Pair your reading with Sourcegraph to search across code to better understand these libraries and how other developers are using them.
State management is an extensive topic in front-end development that allows the sharing of data across components, creating a concrete data structure to represent your React app’s state that you can read and write. You can read more about state and lifecycle via the React docs.
The way you will approach state management for your app mostly depends on its complexity. Many React developers benefit from implementing hooks, which are functions that allow you to hook into React state features from function components so that you can use React without classes.
In React, you will likely come across the following hooks:
useState hooks in particular are very common. We can use Sourcegraph to discover how developers are using
useState in various apps and projects.
First, let’s search across
useRef with the following query.
You can compare the above search with
Now, let’s search
useState. You can try different queries for both
Finally, you can search across code for the usage of both
From here, you can use Sourcegraph to find how the other hooks mentioned above are used.
If a class component defines either or both of the lifecycle methods of
static getDerivedStateFromError() and
componentDidCatch(), it becomes an error boundary. The first method can be used to render a fallback user interface after an error has been thrown, while the second method is used to log error information to an error reporting service.
Let’s discover how error boundaries are used in different projects with Sourcegraph:
You can click on a specific file within your query results to read the complete code in context.
PropTypes are React’s way of providing type checking to your components. With React PropTypes, you can set the types for your props to avoid unexpected behavior.
We’ll perform two types of searches for
propTypes to give us context on how developers use PropTypes in their codebase.
First, let’s use a literal pattern search in Sourcegraph.
Using Sourcegraph’s structural search for
propTypes gives us a fuller understanding of what is being passed to the
propTypes property for type checking.
In this second search, you’ll find that developers are writing code that checks whether values are a given type. Additionally, they sometimes require that a prop be provided.
For our first query, we can search for apps that self-identify as being built with Redux by searching the following string.
You can further specify that you would like to receive results that combine React and Redux together.
We can find how standard Redux toolkit APIs are used by searching API functions. Let’s search the
createAsyncThunk function, which creates a level of abstraction over handling async request lifecycles. You can read more about this function in the Redux API docs.
This query returns many results about the usage of the
createAsyncThunk’s API, but a good number of these are markdown files. Let’s exclude markdown files from showing up in these results with a query that removes files with the
file keyword specifies files ending in
.mdx and the
From here, you can use Sourcegraph to find out how
createApi and other Redux APIs are used in React apps.
Sourcegraph can help you find reasons behind specific error messages that pop up during React development.
You may have encountered this common error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This error message pops up when re-rendering repeatedly occurs, especially when a method that uses
setState is called in the
render method. You can find the origin of this method with Sourcegraph.
In the search results, you can find where and how this React error message pops up and how developers are handling this error.
Learning how to use a new library or framework can be challenging, but with the right tools, you can speed up this process and get a better understanding of how different components can be connected.
If you'd like to learn more about Sourcegraph code search queries, check out more search tutorials
From here, we recommend that you install Sourcegraph’s browser extension so that you can readily search across your code and open source code.