Want to explore new features in React, play with cutting packages like react-cache, or contribute to core?
You need to know how to build React from source.

If you work in node a lot, this process should feel pretty familiar — with a couple additional complications.

By the end of this video you'll be building React packages like a pro.



https://app.egghead.io/api/v1/lessons/react-build-react-from-source/subtitles

Build React from Source

Michael Chan: [00:00] To build React from source you need to know a few things. First, you need to know where to find the source. You can find React's source at github.com/facebook/react. Included in React's source are a number of related packages. This includes -- React DOM, React DOM server, React test renderer, scheduler, and React cache. This architecture where many packages live in one repository is commonly referred to as a Mono Repo.

[00:34] Now that we know where React's source lives, copy the Git URL, so that we can clone this to a directory on our machine. The second thing we need to know are the system requirements for building React. Locate the file contributing.md. In it, you'll find a link to the contribution guides on reactjs.org, where you'll find a wealth of information on contributing to react. For right now, we just want to build react's packages locally.

[01:04] Scroll down until you find the contribution prerequisites section. It's pretty far down. Here, we see that we need node and yarn installed. Clicking on these links will take us to installation instructions for each project. Additionally, we need GCC available on our machine.

[01:26] This comes with some machine-specific instructions that you'll need to follow for your machine. In my experience on a Mac, these instructions were not complete. For example, I needed version 10 of node instead of version 8. I also needed to install the Java developer kit or the JDK. However, your mileage may vary.

[01:50] Once all of the system requirements are in place, we can jump down to the developer workflow section. Here, we learn to run yarn to download and install all of the dependencies. We see several of the available commands, including yarn build. This is the one that we want.

[02:06] Now that we know what to do, let's jump over to a terminal. Use git to clone the react repository to our local machine, paste the copied address, and tell git to put this repository into a directory named Facebook/react.

[02:35] CD into that directory and type yarn to download all of the dependencies. This will take a couple of minutes. I'll fast forward for your convenience. Once setup is complete, type yarn build. This will build the production and development versions of React and all related packages.

[03:00] This also takes a couple minutes. I'll speed it up as well. Once yarn build completes, we have a new directory named build. Open build to explore its contents in the Finder. Here, we find a dist directory. Inside are files for all of our packages.

[03:19] We can now use these versions in our development environments to explore cutting-edge features and packages. Personally, I'll be exploring React Suspense using React cache.

Build React from Source

Share this video with your friends