3. 나의 첫번째 리액트 컴포넌트 · GitBook

[utterances-bot]

3. 나의 첫번째 리액트 컴포넌트 · GitBook

https://react.vlpt.us/basic/03-first-component.html

[gomiseki]

암만해도 템플릿이 안생겨서 이것저것 다해봤는데 안되네요ㅠㅠ A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported. 이런 오류가 뜨면서요....검색해서 나오는 방법들은 다 해본 것 같은데 npx로는 도저히 템플릿 생성이 안되네요. 몇 시간 동안 뻘짓하다가 yarn으로 설치를 하니 템플릿이 생기는데 혹시나 같은 문제 겪는 분은 참고 해주세용

[Dev-HyunSang]

@gomiseki 위 분처럼 문제가 생기신다면 기본 템플릿이 없기 때문에 오류가 뜹니다.

$ npm uninstall -g create-react-app
$ rm -rf /usr/local/bin/create-react-app
$ npm install -g create-react-app

위 명령어 입력하셔서 모듈을 전부 삭제 해 주시고 다시 설치 해 주시면 해결될 겁니다~

해결 방법

[wenodev]

JSX란?

리액트 컴포넌트에서 xml 형식의 값을 반환해는 것

[ghost]

오늘 프로젝트를 생성해봤는데 index.js가 살짝 다르네요

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[sshusshu]

리액트 컴포넌트는 XML 형식의 값을 반환(JSX) 컴포넌트는 일종의 UI 조각 (쉽게 재사용 가능) 실제 DOM 내부에 리액트 컴포넌트를 렌더링

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

[SayisMe]

리액트 컴포넌트

• XML 형식의 값을 반환 -> JSX라고 부른다
• 일종의 UI 조각 -> 재사용이 쉽다