{"id":21969836,"url":"https://github.com/yamoo9/react-browser-starter","last_synced_at":"2026-05-05T04:36:42.738Z","repository":{"id":69709051,"uuid":"583644801","full_name":"yamoo9/react-browser-starter","owner":"yamoo9","description":"React - Babel / TypeScript (브라우저 환경)","archived":false,"fork":false,"pushed_at":"2022-12-30T23:26:24.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-28T02:16:46.829Z","etag":null,"topics":["babel","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yamoo9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-30T12:34:38.000Z","updated_at":"2022-12-30T12:35:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"70a99d1a-b9b2-45e5-b00b-e4c8c85604bc","html_url":"https://github.com/yamoo9/react-browser-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2Freact-browser-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2Freact-browser-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2Freact-browser-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2Freact-browser-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamoo9","download_url":"https://codeload.github.com/yamoo9/react-browser-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245028077,"owners_count":20549454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","react","typescript"],"created_at":"2024-11-29T14:25:53.644Z","updated_at":"2026-05-05T04:36:42.688Z","avatar_url":"https://github.com/yamoo9.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 브라우저 환경에서 React 시작하기\n\n빌드 시스템 설치 없이, 웹 브라우저 환경에서 React를 바로 시작합니다.\n\n- React \u0026 ReactDOM API\n- JSX \u0026 Babel Standalone\n- TSX \u0026 TypeScript Browser\n\n## Getting Started\n\n[degit](https://github.com/Rich-Harris/degit) 명령을 사용해 저장소를 로컬 컴퓨터로 복사합니다.\n\n```sh\n# degit을 전역 설치한 적이 없을 경우 실행합니다.\nnpm i -g degit\n\n# degit 명령을 사용해 로컬 컴퓨터 환경에 복사합니다.\ndegit yamoo9/react-browser-starter \u003c로컬_디렉토리_이름\u003e\n```\n\n## React API\n\nReact API만을 사용해 애플리케이션을 구동합니다.\n\n```html\n\u003cscript src=\"https://unpkg.com/react/umd/react.development.js\" crossorigin\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom/umd/react-dom.development.js\" crossorigin\u003e\u003c/script\u003e\n```\n\n🔗 레퍼런스\n\n- [React CDN](https://unpkg.com/browse/react/)\n- [ReactDOM CDN](https://unpkg.com/browse/react-dom/)\n\n## React + Babel Standalone\n\nReact + JSX를 활용할 수 있도록, Babel을 사용해 애플리케이션을 구동합니다.\n\n```html\n\u003cscript src=\"https://unpkg.com/@babel/standalone/babel.min.js\" crossorigin\u003e\u003c/script\u003e\n\u003cscript src=\"./main.js\" type=\"text/jsx\" data-type=\"module\"\u003e\u003c/script\u003e\n```\n\n🔗 레퍼런스\n\n- [Babel Standalone](https://babeljs.io/docs/en/babel-standalone)\n- [Script Tags](https://babeljs.io/docs/en/babel-standalone#script-tags)\n\n## React + TypeScript Browser\n\n빌드 시스템 설치 없이, 웹 브라우저 환경에서 TypeScript를 사용해 React 애플리케이션을 구동합니다.\n\n```html\n\u003cscript src=\"https://unpkg.com/react/umd/react.development.js\" crossorigin\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom/umd/react-dom.development.js\" crossorigin\u003e\u003c/script\u003e\n\u003cscript src=\"https://klesun-misc.github.io/TypeScript/lib/typescriptServices.js\" crossorigin\u003e\u003c/script\u003e\n\u003cscript type=\"module\"\u003e\n  import { loadModule } from 'https://klesun.github.io/ts-browser/src/ts-browser.js';\n  loadModule('./main.tsx', { jsx: ts.JsxEmit.React });\n\u003c/script\u003e\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003elibs/react.js\u003c/summary\u003e\n\n  ```js\n  import 'https://unpkg.com/react/umd/react.development.js';\n  export default globalThis.React;\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003elibs/react-dom.js\u003c/summary\u003e\n\n  ```js\n  import 'https://unpkg.com/react/umd/react.development.js';\n  import 'https://unpkg.com/react-dom/umd/react-dom.development.js';\n  export default globalThis.ReactDOM;\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003emain.tsx\u003c/summary\u003e\n\n  ```tsx\n  import React from './libs/react.js';\n  import ReactDOM from './libs/react-dom.js';\n  ```\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n🔗 레퍼런스\n\n- [ts-browser](https://github.com/klesun/ts-browser)\n- [ts-browser + React](https://github.com/klesun-misc/ts-browser-react-example/blob/master/index.html#L4-L11)\n\n\n# 컴파일러 구성\n\n로컬 컴퓨터 환경에 컴파일 환경을 구성합니다.\n\n- **Babel** JavaScript Compiler\n- **TypeScript** Programming Language\n\n## React + Babel CLI (Compile)\n\nBabel 컴파일러를 사용해 React 애플리케이션을 구동합니다.\n\n🔗 레퍼런스\n\n- [Babel CLI](https://babeljs.io/setup#installation)\n- [Babel Configuration File](https://babeljs.io/docs/en/config-files)\n- [Babel Config Options](https://babeljs.io/docs/en/options)\n- [Babel Preset Env](https://babeljs.io/docs/en/babel-preset-env)\n- [Babel Preset React](https://babeljs.io/docs/en/babel-preset-react)\n\n## React + TypeScript CLI (Compile)\n\nTypeScript 컴파일러를 사용해 React 애플리케이션을 구동합니다.\n\n🔗 레퍼런스\n\n- [Babel Preset TypeScript](https://babeljs.io/docs/en/babel-preset-typescript)\n- [Integrating with Build Tools](https://www.typescriptlang.org/ko/docs/handbook/integrating-with-build-tools.html#babel)\n- [TypeScript Download](https://www.typescriptlang.org/download)\n- [What is a tsconfig.json](https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html)\n- [TypeScript Configuration](https://www.typescriptlang.org/ko/tsconfig)\n- [TypeScript CLI](https://www.typescriptlang.org/ko/docs/handbook/compiler-options.html)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamoo9%2Freact-browser-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamoo9%2Freact-browser-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamoo9%2Freact-browser-starter/lists"}