Have you ever wondered how to build a framework or a library? Or how a particular library actually implements all the wonderful functionalities that are available? At Infinum, we are big believers in learning by doing, and if we are not happy with the tools available, we build our own.
This is how we decided to make learnReact, an open source learning exercise for teaching developers the inner workings of React.
Like all good craftsmen, we don’t want our developers only to know how to wield the hammer. They should also understand how the hammer decides which components should be rerendered in the DOM when a state changes.
Building on learnQuery’s legacy
LearnQuery was very straightforward in its structure. In most cases, you wrote tests, created methods needed for them to pass, moved on to the next task.
With learnReact, things are not so linear. Each task builds upon the previous one and you often have to add implementations from past tasks or rewrite them so that they cover the new requirements.
This required us to add some concrete instructions. In every task we specify which files should be worked on and should you revisit some of the past implementations. To get the learner used to a project’s directory structure, we also placed some placeholder utility functions in the util folder. They can be used as clues to find out how to proceed on a given task.
But how will you know that the code you wrote actually works? You will need to write the tests as well. Tests are an integral part of development and this is a great opportunity to get more comfortable with them. If you never wrote them, this is as good a time as any to start. For each task, we provide the requirements your tests have to cover, but their actual implementation is down to you.
Here is an example of a placeholder test:
However, the functionalities you are developing within learnReact are not trivial. The tasks cover certain aspects of a framework that can be pretty abstract. Sometimes it’s hard to imagine what you’re ultimately building based only on code and passed or failed tests.
People imagine and develop things in different ways, so we’ve set up a playground. You can build a simple page structure with the components you created there, which makes troubleshooting much easier.
The project’s readme file provides instructions for the tasks, but it also gives a few tips about the project itself. Less experienced users can benefit from a little more guidance. We included helpful links on how React works, how to write tests in Jest, and how Babel uses the createElement function you created in the first task when JSX is used in the tests.
The learnReact project should give you a better understanding of how React operates.
We start off with the basic building blocks of the web – elements. In the first task, we start simple with creating an element and rendering it. The second task covers the events triggered on these elements. Finally, in the third task, we cover how the state works and how it changes when we use setState.
After we’ve covered the basics, we tackle the more reactive part of React. In the fourth task we take a crack at components, virtual DOM and rerendering of components. The last task introduces hooks, giving us an insight into functional components as well.
The adventure begins
LearnQuery fans will be happy to know that the Fibonacci example function makes a comeback in learnReact. The function and the accompanying tests give a concrete example of how the code should look like and at the same time make a nice introduction to the project.
LearnReact is best served with a mentor on the side, but it’s not mandatory. Each new team member that will tackle these tasks as part of their onboarding will get one, though. Another pair of eyes on the code is always good, even for experienced developers. Discussing core functionalities of React and understanding them is what makes us better developers.
Good luck, learnReact
The aim of this project was to expand and enhance our onboarding process. By giving more specific tasks to our new team members who will be working with React, we help them establish a closer connection to it.
Jelena Njeguš has successfully performed the task of illustrating the cover image.