기본 코드 (w/ head tag)

HTML
<head>
  <title>헬로 월드</title>
</head>
<body>
  <main><p>안녕 세상</p></main>
</body>
Angular.js (1.x.x)
<head>
  <title>헬로 월드</title>
</head>
<body ng-app>
  <main><p>안녕 세상</p></main>
</body>
Angular (2.x.x higher)

Angular는 예제는 하단 component 예제를 참조하세요.

Vue.js (w/ Nuxt.js)
<template>
  <main><p>안녕 세상</p></main>
</template>

<script>
  export default {
    head: () => ({
      title: '헬로 월드',
    }),
  }
</script>

Vue.js의 확장자는 .vue 입니다.

React (w/ Next.js)
function Home() {
  return (
    <main>
      <Head>
        <title>헬로 월드</title>
      </Head>
      <p>안녕 세상</p>
    </main>
  )
}

React의 확장자는 .jsx 입니다. (JavaScript XML)

TypeScript를 사용할 때는 .tsx 입니다. (TypeScript XML)

Svelte
<svelte:head>
  <title>헬로 월드</title>
</svelte:head>

<svelte:body>
  <main><p>안녕 세상</p></main>
</svelte:body>

Svelte의 확장자는 .svelte 입니다.

Component

HTML (w/ jQuery)
<p>곱창 먹고싶다</p>
<div id="bibimbap"></div>
 
<script>
  $("#bibimbap").load("./components/bibimbap.html #bibimbap-dundun");
</script>
<!-- components/bibimbap.html -->
<p id="bibimbap-dundun">비빔밥도 먹고싶다</p>

jQuery를 불러온 상태에서만 동작합니다.

HTML (w/ jQuery Component)
<p>곱창 먹고싶다</p>
<div id="component"></div>

<script type="text/template" id="bibimbap">
  <p>비빔밥도 먹고싶다</p>
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery-components.js"></script>
<script>
  $.components.register('bibimbap', {
    template: { selector: '#bibimbap' }
  });

  $('#component').component('bibimbap');
</script>

jQuery Component는 jquery-component.js가 필요하며 jQuery를 미리 불러온 상태에서 사용 가능합니다.

Angular.js (1.5.0 higher)
// contoller.js
Application.component('bibimbap', {
  template: `<p>비빔밥 먹고싶다</p>`
});
<!-- index.html -->
<p>곱창 먹고싶다</p>
<bibimbap></bibimbap>
Angular (2.x.x higher)
<!-- index.html -->
<head>
  <title>헬로 월드</title>
</head>

<body>
  <app-root></app-root>
</body>
<!-- app/app.component.html -->
<main><p>안녕 세상</p></main>
// app/app.components.ts
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class RootComponent {
  title = "헬로 월드";
}
Vue.js
<!-- index.html -->
<div id="app">
  <p>곱창 먹고싶다</p>
  <bibimbap />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  var bibimbap = Vue.component("bibimbap", {
    template: `<p>비빔밥도 먹고싶다`,
  });

  var app = new Vue({
    el: "#app",
    data: {
      message: "헬로 월드! index.html"
    }
  });
</script>
React
import Bibimbap from './bibimbap';

const Gopchang = <p>곱창 먹고싶다</p>

function Home() {
  return (
    <>
      <h1>배고픈 O612</h1>
      <Gopchang />
      <Bibimbap />
    </>
  )
}

export default Home;
// bibimbap.jsx
function Bibimbap() {
  return <p>비빔밥도 먹고싶다</p>
}

export default Bibimbap;
Svelte
<script>
  import Bibimbap from './bibimbap.svelte';
  const Gopchang = <p>곱창 먹고싶다</p>
</script>

<Gopchang></Gopchang>
<Bibimbap></Bibimbap>
<!-- bibimbap.svelte -->
<p>비빔밥도 먹고싶다</p>


(O씨, 지구, 06월 12일생) 세상에서 글 쓰는 게 제일 어려웠어요...

O612님의 창작활동을 응원하고 싶으세요?