| title | tags | authorSlug | authorDisplayName | publicationDate | description | image | imageAlt | alternativeTitle | type | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Learning React concepts with Sourcegraph |
|
prosper-otemuyiwa |
Prosper Otemuyiwa |
November 23, 2021 |
Search across code with Sourcegraph to learn React |
Sourcegraph Learn |
How to use Sourcegraph code search to learn React |
posts |
React, also known as ReactJS or React.js, is a popular front-end JavaScript library that helps developers build user interfaces.
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, useEffect, useRef, useCallback, useMemo, useContext, and useReducer.
The useRef and useState hooks in particular are very common. We can use Sourcegraph to discover how developers are using useRef and useState in various apps and projects.
First, let’s search across useRef with the following query.
You can compare the above search with useRef lang:JavaScript.
Now, let’s search useState. You can try different queries for both React.useState() and useState.
Finally, you can search across code for the usage of both useState and useRef:
From here, you can use Sourcegraph to find how the other hooks mentioned above are used.
React 16 introduced error boundaries, which are React components that catch JavaScript errors upon rendering, log the errors, and display a fallback UI (or user interface) to replace what failed.
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.
Learning Redux, which offers a predictable state container for JavaScript apps, can come with a variety of pain points for developers. The official Redux guide provides step-by-step tutorials and answers to frequently asked questions. Alongside digging into the documentation, you can leverage Sourcegraph to find Redux resources and speed up your learning.
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 .md and .mdx extensions.
The file keyword specifies files ending in .md or .mdx and the -file syntax excludes them from the search results. Now, you’ll receive results that are primarily TypeScript and JavaScript code files.
From here, you can use Sourcegraph to find out how createSlice, createApi and other Redux APIs are used in React apps.
If you are looking for specific use cases, Sourcegraph can provide the context you need.
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.