# React Development Guide

# Tooling Guide

EditorConfig Code Style
------------------------

[![EditorConfig Guide](https://img.shields.io/badge/EditorConfig_Guide-7b2c2c?style=flat-square)](/books/tooling-guides/page/editorconfig-guide)

```ini title=".editorconfig"
# SPDX-FileCopyrightText: None
#
# SPDX-License-Identifier: 0BSD

[*.html]
indent_size = 2
tab_width = 2

[{*.js,*.jsx}]
indent_size = 2
tab_width = 2
ij_continuation_indent_size = 4
ij_javascript_enforce_trailing_comma = whenmultiline

[*.json]
indent_size = 2
#indent_style = space

[{*.yml,*.yaml}]
indent_size = 2
#indent_style = space

[package.json]
# Tooling uses 2-space indentation; match it.
indent_size = 2
indent_style = space
```

Exclude Files from Version Tracking
------------------------------------

[![Git Repository Guide](https://img.shields.io/badge/Git_Repository_Guide-7b2c2c?style=flat-square)](/books/tooling-guides/page/git-repository-guide)

```gitignore
# SPDX-FileCopyrightText: None
#
# SPDX-License-Identifier: 0BSD

.yarn/*
!.yarn/cache/
!.yarn/releases/
yarn-debug.log*
yarn-error.log*
/node_modules/
```

# Initialize React Project with Vite

[![documentation](https://img.shields.io/badge/documentation-brightgreen?style=flat-square)](https://react.dev/learn)
[![documentation](https://img.shields.io/badge/facebook/react-gray?style=flat-square&logo=github)](https://github.com/facebook/react)

Create a New Project
--------------------

[![documentation](https://img.shields.io/badge/documentation-brightgreen?style=flat-square)](https://vite.dev/guide/)
[![documentation](https://img.shields.io/badge/vitejs/vite-gray?style=flat-square&logo=github)](https://github.com/vitejs/vite)

```shell
export VITE_PROJECT="vite-project"
```

```shell
yarn create vite -t react --no-interactive "$VITE_PROJECT"
```

### Cleanup Vite Project Template

```shell
yarn install --immutable --immutable-cache
yarn remove @types/react @types/react-dom
yarn remove oxlint
rm .oxlintrc.json
sed -i '/"lint":/d' package.json
sed -i 's@/src/main.jsx@/app/main.jsx@' index.html
mv src app
```

### Setup Custom Import Aliases

[![documentation](https://img.shields.io/badge/documentation-brightgreen?style=flat-square)](https://nodejs.org/api/packages.html#subpath-imports)

```json package.json
{
  "imports": {
    "#app/": "./app/",
    "#assets/": "./assets/",
    "#lib/": "./lib/",
    "#routes/": "./routes/"
  }
}
```

Use Latest Version of Yarn
--------------------------

[![documentation](https://img.shields.io/badge/documentation-brightgreen?style=flat-square)](https://yarnpkg.com/getting-started/install)
[![documentation](https://img.shields.io/badge/yarnpkg/berry-gray?style=flat-square&logo=github)](https://github.com/yarnpkg/berry)

```shell
yarn set version stable
yarn install
```

### Enable Node Modules Linking with Local Cache

```yml .yarnrc.yml
# SPDX-FileCopyrightText: None
#
# SPDX-License-Identifier: 0BSD

enableGlobalCache: false

# [!] NPM Supply Chain Attack Mitigation.
enableScripts: false

enableTelemetry: false

nodeLinker: node-modules
```

```gitignore
# SPDX-FileCopyrightText: None
#
# SPDX-License-Identifier: 0BSD

.yarn/*
!.yarn/cache/
!.yarn/releases/
yarn-debug.log*
yarn-error.log*
/node_modules/
```

Unify Chores via Makefile
-------------------------

```Makefile
# SPDX-FileCopyrightText: None
# SPDX-License-Identifier: 0BSD

JQ := $(shell command -v jq 2>/dev/null)
ifeq ($(JQ),)
$(error jq is required but not installed)
endif

DISTNAME := $(shell jq -r .name package.json)
VERSION := $(shell jq -r .version package.json)
DISTDIR := dist

HOST := 127.27.0.1
PORT := 5173

.PHONY: dev
dev:
	yarn dev --host="$(HOST)" --port="$(PORT)"

.PHONY: install
install:
	yarn install --immutable --immutable-cache

.PHONY: update
update:
	yarn up

.PHONY: build
build:
	yarn build --outDir="$(DISTDIR)"

.PHONY: dist
dist: build
	tar --directory="$(DISTDIR)" --create --xz --file="$(DISTNAME)-$(VERSION).tar.xz" .

.PHONY: test
test:
	yarn test

.PHONY: clean
clean:
	-rm --recursive "$(DISTDIR)"
	-rm "$(DISTNAME)-$(VERSION).tar.xz"

.PHONY: distclean
distclean: clean
	git clean --force -Xd
```

# Install and Setup Tailwind CSS

[![documentation](https://img.shields.io/badge/documentation-brightgreen?style=flat-square)](https://tailwindcss.com/docs/installation/using-vite)
[![documentation](https://img.shields.io/badge/tailwindlabs/tailwindcss-gray?style=flat-square&logo=github)](https://github.com/tailwindlabs/tailwindcss)

```shell
yarn add --dev tailwindcss @tailwindcss/vite
```

```javascript title="vite.config.js"
// SPDX-FileCopyrightText: None
// SPDX-License-Identifier: 0BSD

import {defineConfig} from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
```

```css title="main.css"
@import "tailwindcss";
```

# Install and Setup Vitest Framework

[![documentation](https://img.shields.io/badge/documentation-brightgreen?style=flat-square)](https://vitest.dev/guide/)
[![documentation](https://img.shields.io/badge/vitest--dev/vitest-gray?style=flat-square&logo=github)](https://github.com/vitest-dev/vitest)

```bash
yarn add --dev vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react
```

```javascript vite.config.js
// SPDX-FileCopyrightText: None
// SPDX-License-Identifier: 0BSD

import {defineConfig} from 'vite'

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    isolate: true,
    mockReset: true,
    restoreMocks: true,
    setupFiles: './tests/setupTests.js',
  },
})
```

```javascript tests/setupTests.js
// SPDX-FileCopyrightText: None
// SPDX-License-Identifier: 0BSD

import '@testing-library/jest-dom'
```

```json package.json
{
  "scripts": {
    "test": "vitest"
  }
}

# Base UI Component Library

[![The Base_UI_Project](https://img.shields.io/badge/The_Base_UI_Project-indigo?style=flat-square)](https://base-ui.com/)
[![documentation](https://img.shields.io/badge/documentation-forestgreen?style=flat-square)](https://base-ui.com/react/overview/quick-start)
[![mui/base-ui](https://img.shields.io/badge/mui/base--ui-555555?style=flat-square&logo=github)](https://github.com/mui/base-ui)

Installing Base UI
-------------------

```shell
yarn add @base-ui/react
```