Code walkthrough of React Material UI repository

Introduction

Material UI design is a popular design guideline for webpages from Google. There are many libraries in the various framework that have implemented material design. React Material UI library ie https://material-ui.com/ is a popular material UI library in React.

The GitHub repository details are mentioned in the meta information of the blog. Nevertheless, here is the link to the Github repository of material UI. https://github.com/mui-org/material-ui

Let us go through the code of Material UI.

Introduction to codebase

If you open the GitHub repository of material UI, you will find many folders and files like examples, docs, modules, packages and files like .circlei, .github, .eslintrc, etc. Explanation of each of these folders and files are in the table at the end of this blog post. As a beginner to the codebase of Material UI, you have to understand a few things first.

Material UI codebase is built using the concept of monorepos. Monorepos means that a single repository hosts multiple npm packages. Advantage of doing so is that all packages are tracked from a single repository, there is no need to clone multiple packages and update the versions for each of them individually.

Monorepos can be implemented in a few ways. Yarn supports something called workspaces. If you are using npm, then you can use a popular library called Lerna.

Material UI using Lerna library to support the development of multiple packages of Material UI from the single Github codebase.

The Lerna config is stored in the file called lerna.json. Below are the contents of the file

{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "independent"
}

The above config means that the "packages" folder contains the multiple npm packages, the client used is yarn. Lerna supports both yarn and npm.

Packages Folder

If you open the packages folder, you will find many packages that Material UI uses. Each of these packages is an npm module. So you will find "package.json" file in this folder. Here is the screenshot of the packages folder.

The core code of Material UI is present in the folder "material-ui". Let us explore this folder a bit more.

material-ui folder

Material UI exports the components such as "Button", "Card", "List", "Modal", "Tabs", "Table", etc. Each of these components is a React class in their own folders. So if you browse to src folder of the material-ui package, you will find many folders like "Button", "Card", etc. Needless to say, these folders contain the respective code of that component which Material UI exports.

Let us explore the sample code of "Button" code. Go to the folder "Button" in "src" folder of "material-ui" package. Here is the direct link to it. https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button

Explanation of files of Button component

index.js This file exports the Button component. Exporting a component from "index.js" folder allows you to directly import the component from the "Button" folder, instead of referencing the Button.js file in Button folder.

index.d.ts This file provides typescript type information about index.js.

Button.js This file exports the default Button component. The detailed explanation of this component will be explained in a different blog post.

Button.d.ts This file contains the typescript type information about the Button.js file. If you are coding in typescript, then you get useful information when using Button component like what is the type of props exported by component ( boolean, enums like small, medium or large, etc).

Button.test.js This file contains the unit test cases for the Button component.

Explanations of all important files and folders in material ui

Here is the description of some of the important folders and files

.circleci Hidden file related to CircleCI tool (Continous Integration Tool)
.gtihub  Hidden file related to Github
docs The folder containing the documentation and website https://material-ui.com
examples This folder contains examples of using the Material UI library.
modules Common modules like logging and async/await library WaterFall
packages This folder contains various npm packages
pages This folder contains the documentation of the website. The script copies the markdown files from this folder and puts it into the docs folder, from where documentation is rendered.
scripts Some scripts like prettier and git wrapper commands.
static This folder contains static assets like images. 
test Contains regression test cases.

.browserlistrc

Contains a list of browsers that are supported. 

.codecov.yml

Contains the code coverage threshold. 

.editorconfig

EditorConfig contains the config for editors. This config is respected by many editors and IDEs. This config file mentions configurations like trailing spaces, indentation, etc. Read more about editorconfig here https://editorconfig.org

.eslintignore

Contains the configuration to ignore the files for eslint. Same like the gitignore file.

.eslintrc.js

Contains the configuration for eslint

.gitattributes

Contains the attributes for file types. For example, text=auto means that for txt types of files, the end of line should be automatically normalized.

.gitignore

Ignore files for git

.size-limit.js

Config file for size-limit npm package.

.tidelift.yml

Config file for tidelift 

.yarnrc

Config file for the yarn package manager

babel.config.js

Contains the config for babel plugin

.crowdin.yml

Config file for crowdin

docker-compose.yml

Docker file

lerna.json

Config file for Lerna 

prettier.config.js

Config file for prettier 

tsconfig.json

Config file for typescript

tslint.json

Lint for typescript

yarn.lock

Lock file for yarn. Similar to package-lock.json

Other markdown files used by GitHub like CHANGELOG.md, CODE_OF_CONDUCT.md, CONTRIBUTING.md and other markdown files like BACKERS.md, 

Markdown files contains the data in markdown format.