【Node.js/React】자발적인 React코드 생성은 처음이다.

1. I don't know nothing about react(except for a little bit skills)

그래서, 설치 및 환경을 구성하는 메뉴얼을 찾았다.

---

2. Where

구성에 필요한 설치파일들은 아래의 링크를 통해서 다운로드 했다.

• Node.js : https://nodejs.org/en/
• Visual Studio Code : https://code.visualstudio.com/download

---

3. How

다운로드 받은 실행파일들을 더블클릭하고 안내에 따라 설치하면 된다.

---

4. Tutorial

아래의 링크를 참고했다.

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

---

5. Create first react app by myself

• 프로젝트를 위한 폴더를 하나 생성하고 튜토리얼에 나온대로 다음의 명령어를 실행하여 React 앱을 생성했다.

npx create-react-app my-app

• 그리고 Visual Studio Code를 실행해서 해당 프로젝트를 읽어들였다.

File > Open Folder

• 그 상태에서 Visual Studio Code의 터미널을 열어서 다음 명령어를 실행했다.

npm start

---

6. Great!!

http://localhost:3000으로 접속하면 다음과 같은 화면이 표시된다.

---

7. Edit

튜토리얼에 나온대로 코드를 수정해 보기로 한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));

reportWebVitals();

---

8. WTF(Error!!)

화면은 하얗게, 에러는 뻘겋게...

bootstrap:27 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
    at ./src/index.js (index.js:8:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

9. Search

그래서 다시 검색의 나라로...

아래에서 해결책을 찾았다.

 

• ReactDOM.render대신에 createRoot를 사용하거나, 17버전을 사용한다.

How to Upgrade to React 18 – React Blog

---

10. Resolve

1. ReactDOM.createRoot를 사용한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
root.render(element);

reportWebVitals();

2. createRoot만 임포트해서 사용한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createRoot } from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

const root = createRoot(document.getElementById('root'));
var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
root.render(element);

reportWebVitals();

---

11. Result