> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/start/jsx-react/undefined.md).

# 실습하기

## 함수 / 클래스 컴포넌트 

```javascript
import React from "react";
import ReactDOM from "react-dom";

// Functional Component
const App = () => {
   return (
     <div>
       <h1>Hello StackBlitz!</h1>
       <p>Start editing to see some magic happen :)</p>
     </div>
   );
 };

// Class Component
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

```

## App.js 파일에서 불러오기&#x20;

{% tabs %}
{% tab title="App.js" %}

```javascript
import React from "react";
import "./style.css";

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
};

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react";
import ReactDOM from "react-dom";

import App from './App'

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}
{% endtabs %}

React 요소를 랩핑할 때 `[]` 배열을 이용할 수 있다.&#x20;

```javascript
export default function App() {
  return ([
      <h1>Hello StackBlitz!</h1>,
      <p>Start editing to see some magic happen :)</p>
  ]);
};
```

`<div>`로 묶어줄 수 있다.&#x20;

```javascript
export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}
```

`<></>`로 묶어 줄 수 있다. 이는 `React.Fragment`의 별칭이다.&#x20;

```javascript
export default function App() {
  return (
    <>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </>
  );
}

```

{% tabs %}
{% tab title="App.js" %}

```javascript
import React from "react";
import "./style.css";

function Headline(props) {
  return <h1>{props.children}</h1>;
}

function Para(props) {
  return <p className={props.className}>{props.children}</p>;
}

export default function App(props) {
  return [
    <Headline children="Hello StackBlitz!" />,
    React.createElement(Headline, { children: "Hello StackBlitz!" }),
    <Para
      className="paraNode"
      children="Start editing to see some magic happen :)"
    />,
    React.createElement(Para, {
      className: "paraNode",
      children: "Start editing to see some magic happen :)"
    })
  ];
}
```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react";
import ReactDOM from "react-dom";

import App from './App'

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}

{% tab title="렌더링 결과 " %}
![](/files/-MSr02wOeVw25pIsREKZ)
{% endtab %}
{% endtabs %}

## ReactDOM.render()에 바로 적용&#x20;

{% hint style="warning" %}
JSX 내부에 React.createElement()를 사용할 때는 `{}`로 묶어 사용하기&#x20;
{% endhint %}

{% tabs %}
{% tab title="App.js" %}

```javascript
import React, { Component } from "react";
import "./style.css";

export function Headline(props) {
  return <h1>{props.children}</h1>;
}

export function Para(props) {
  return <p className={props.className}>{props.children}</p>;
}

export default function App(props) {
  return props.children;
}
```

{% endtab %}

{% tab title="index.js " %}

```javascript
import React from "react";
import ReactDOM from "react-dom";
import App, { Para, Headline } from "./App";

ReactDOM.render(
  <App>
    <Headline children="Hello StackBlitz!" />
    {React.createElement(Para, {
      className: "paraNode",
      children: "Start editing to see some magic happen :)"
    })}
  </App>,
  document.getElementById("root")
);

```

{% endtab %}
{% endtabs %}

## 컴포넌트 각 파일로 나누기&#x20;

{% tabs %}
{% tab title="App.js " %}

```javascript
import React, { Component } from "react";
import { Para } from "./Para";
import { Headline } from "./Headline";

export default function App() {
  return [
    <Headline children="Hello StackBlitz!" />,
    React.createElement(Para, {
      className: "paraNode",
      children: "Start editing to see some magic happen :)"
    })
  ];
}

```

{% endtab %}

{% tab title="index.js " %}

```javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}

{% tab title="Headline.js " %}

```javascript
import React from "react";

export function Headline(props) {
  return <h1>{props.children}</h1>;
}

```

{% endtab %}

{% tab title="Para.js " %}

```javascript
import React from "react";

export function Para(props) {
  return <p className={props.className}>{props.children}</p>;
}

```

{% endtab %}
{% endtabs %}

## Stack Blitz 실습&#x20;

{% embed url="<https://stackblitz.com/edit/react-sdy7ny?file=src%2Findex.js>" %}