6. React / 리액트 시작하기 (나의 페이지 만들기)

프로젝트 생성 시 만들어졌던 페이지를 수정해보자 

프로젝트

   src -> App.js 를 수정해보자

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
     <h1>리액트를 시작해보자</h1>
     <h2>리액트</h2>
    );
  }
}
 
export default App;

이렇게 하면 에러를 발생시킨다 ..

이유는 h1 , h2 두개의 요소가 1개의 부모 요소를 가지고 있지 않아서 에러를 발생시킨다 ..

그래서 div로 둘러준다 ~

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
    <div>
      <h1>리액트를 시작해보자</h1>
      <h2>리액트</h2>
    </div>
    );
  }
}
 
export default App;
 

그리고 yarn start 로 실행해보자

리액트 v16 이상에서는 Fragment컴포넌트가 추가되어  div로 감싸지 않고 여러 요소를 렌더링 하고싶다면

import React, { Component , Fragment} from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
    <Fragment>
      <h1>리액트를 시작해보자</h1>
      <h2>리액트</h2>
    </Fragment>
    );
  }
}
 
export default App;

다음과 같이 작성해서 실행하면 된다.~