Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yamoo9/react-browser-starter
React - Babel / TypeScript (브라우저 환경)
https://github.com/yamoo9/react-browser-starter
babel react typescript
Last synced: 3 days ago
JSON representation
React - Babel / TypeScript (브라우저 환경)
- Host: GitHub
- URL: https://github.com/yamoo9/react-browser-starter
- Owner: yamoo9
- Created: 2022-12-30T12:34:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-30T23:26:24.000Z (about 2 years ago)
- Last Synced: 2024-11-29T14:30:14.553Z (2 months ago)
- Topics: babel, react, typescript
- Language: HTML
- Homepage:
- Size: 40 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 브라우저 환경에서 React 시작하기
빌드 시스템 설치 없이, 웹 브라우저 환경에서 React를 바로 시작합니다.
- React & ReactDOM API
- JSX & Babel Standalone
- TSX & TypeScript Browser
## Getting Started
[degit](https://github.com/Rich-Harris/degit) 명령을 사용해 저장소를 로컬 컴퓨터로 복사합니다.
```sh
# degit을 전역 설치한 적이 없을 경우 실행합니다.
npm i -g degit
# degit 명령을 사용해 로컬 컴퓨터 환경에 복사합니다.
degit yamoo9/react-browser-starter <로컬_디렉토리_이름>
```
## React API
React API만을 사용해 애플리케이션을 구동합니다.
```html
```
🔗 레퍼런스
- [React CDN](https://unpkg.com/browse/react/)
- [ReactDOM CDN](https://unpkg.com/browse/react-dom/)
## React + Babel Standalone
React + JSX를 활용할 수 있도록, Babel을 사용해 애플리케이션을 구동합니다.
```html
```
🔗 레퍼런스
- [Babel Standalone](https://babeljs.io/docs/en/babel-standalone)
- [Script Tags](https://babeljs.io/docs/en/babel-standalone#script-tags)
## React + TypeScript Browser
빌드 시스템 설치 없이, 웹 브라우저 환경에서 TypeScript를 사용해 React 애플리케이션을 구동합니다.
```html
import { loadModule } from 'https://klesun.github.io/ts-browser/src/ts-browser.js';
loadModule('./main.tsx', { jsx: ts.JsxEmit.React });
```
libs/react.js
```js
import 'https://unpkg.com/react/umd/react.development.js';
export default globalThis.React;
```
libs/react-dom.js
```js
import 'https://unpkg.com/react/umd/react.development.js';
import 'https://unpkg.com/react-dom/umd/react-dom.development.js';
export default globalThis.ReactDOM;
```
main.tsx
```tsx
import React from './libs/react.js';
import ReactDOM from './libs/react-dom.js';
```
🔗 레퍼런스
- [ts-browser](https://github.com/klesun/ts-browser)
- [ts-browser + React](https://github.com/klesun-misc/ts-browser-react-example/blob/master/index.html#L4-L11)
# 컴파일러 구성
로컬 컴퓨터 환경에 컴파일 환경을 구성합니다.
- **Babel** JavaScript Compiler
- **TypeScript** Programming Language
## React + Babel CLI (Compile)
Babel 컴파일러를 사용해 React 애플리케이션을 구동합니다.
🔗 레퍼런스
- [Babel CLI](https://babeljs.io/setup#installation)
- [Babel Configuration File](https://babeljs.io/docs/en/config-files)
- [Babel Config Options](https://babeljs.io/docs/en/options)
- [Babel Preset Env](https://babeljs.io/docs/en/babel-preset-env)
- [Babel Preset React](https://babeljs.io/docs/en/babel-preset-react)
## React + TypeScript CLI (Compile)
TypeScript 컴파일러를 사용해 React 애플리케이션을 구동합니다.
🔗 레퍼런스
- [Babel Preset TypeScript](https://babeljs.io/docs/en/babel-preset-typescript)
- [Integrating with Build Tools](https://www.typescriptlang.org/ko/docs/handbook/integrating-with-build-tools.html#babel)
- [TypeScript Download](https://www.typescriptlang.org/download)
- [What is a tsconfig.json](https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html)
- [TypeScript Configuration](https://www.typescriptlang.org/ko/tsconfig)
- [TypeScript CLI](https://www.typescriptlang.org/ko/docs/handbook/compiler-options.html)