🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
05 : 09 : 48 : 48
1×
Become a member
to unlock all features
Autoplay

    Build React from Source

    Michael ChanMichael Chan
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Michael Chan: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.