npm init -y //init 초기설정 / -y 전부 yes
npm i -D typescript
npx tsc --init
npm i -D eslint
npx eslint --init
Ok to proceed? (y)
? How would you like to use ESLint? …
❯ To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
? Which framework does your project use? …
❯ React
? Does your project use TypeScript?
› Yes
? Where does your code run? …
✔ Browser
? How would you like to define a style for your project? …
❯ Use a popular style guide
? Which style guide do you want to follow? …
❯ XO
? What format do you want your config file to be in? …
❯ JavaScript
? Would you like to install them now?
› Yes
? Which package manager do you want to use? …
❯ npm
// ./.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
],
overrides: [
{
extends: ["xo-typescript"],
files: ["*.ts", "*.tsx"],
},
],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
tsconfigRootDir: __dirname,
},
plugins: ["react"],
rules: {},
};
// ./.eslintignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
// ./.gitignore
/node_modules/
/dist/
/.parcel-cache/
/coverage/
gitignore.io
npm i react react-dom
npm i -D @types/react @types/react-dom
// ./src/main.tsx
import ReactDOM from "react-dom/client";
import App from "./App";
function main() {
const container = document.getElementById("root");
if (!container) {
return;
}
const root = ReactDOM.createRoot(container);
root.render(<App />);
}
main();
// ./src/App.tsx
export default function App() {
return <>Hello, React!</>;
}
// ./src/main.test.tsx
import { render } from "@testing-library/react";
import App from "./App";
test("render app", () => {
const { getByText } = render(<App />);
const titleElement = getByText(/Hello/i);
expect(titleElement).toBeInTheDocument();
});
npm i -D jest @types/jest jest-environment-jsdom
npm i -D @swc/core @swc/jest
npm i -D @testing-library/react @testing-library/jest-dom
// ./jest.config.js
module.exports = {
testEnvironment: "jsdom",
setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
transform: {
"^.+\\.(t|j)sx?$": [
"@swc/jest",
{
jsc: {
parser: {
syntax: "typescript",
jsx: true,
decorators: true,
},
transform: {
react: {
runtime: "automatic",
},
},
},
},
],
},
testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist/"],
};
// ./.parcelrc
{
"extends": ["@parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}
// ./package.json
{
"name": "react-basic",
"version": "1.0.0",
"description": "",
"source": "./index.html",
"type": "module",
"scripts": {
"start": "parcel --port 8080",
"build": "parcel build",
"check": "tsc --noEmit",
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
"test": "jest",
"coverage": "jest --coverage --coverage-reporters html",
"watch:test": "jest --watchAll"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"parcel-bundler": "^1.12.5",
"typescript": "^5.1.6",
"@swc/core": "^1.3.59",
"@swc/jest": "^0.2.26",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.1",
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"eslint": "^8.41.0",
"eslint-config-xo": "^0.43.1",
"eslint-config-xo-typescript": "^0.57.0",
"eslint-plugin-react": "^7.32.2",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"parcel": "^2.8.3",
"parcel-reporter-static-files-copy": "^1.5.0"
}
}
// ./index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React + TypeScript + Parcel</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/main.tsx"></script>
</body>
</html>
// ./.vscode/settings.json
{
"editor.rulers": [80],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"trailing-spaces.trimOnSave": true
}
의존성 설치
npm install
lint 실행(Lint and fix all)
npm run lint
TypeScript 컴파일을 통해 문법 오류를 확인
npm run check //다음 명령을 입력해서 문법 오류가 있습니다. 이 명령을 자주 실행하고, CI 등에 포함
테스트 실행
npm test
개발 모드 실행(Run web server for development)
npm start
http://localhost:8080