[리액트(React) Study Log] [Person App-002] Understanding the Folder Structure

[리액트(React) Study Log] [Person App-002] Understanding the Folder Structure

 

1. Folder Structure and File

 - package.js : dependencies, scripts

 - index.html

 - index.js

 - app.js

...

 

2. Folder 및 File 편집

* 기존 파일

// src-App.js

 

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

 

class App extends Component {

  render() {

    return (

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <p>

            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a

            className="App-link"

            href="https://reactjs.org"

            target="_blank"

            rel="noopener noreferrer"

          >

            Learn React

          </a>

        </header>

      </div>

    );

  }

}

 

export default App;

 

 

위 파일에서 최 상위 div 안쪽 내용 모두 삭제

 

* 변경 파일

// src-App.js

 

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

 

class App extends Component {

  render() {

    return (

      <div className="App">

        <h1>Hi. I'm a React App</h1>

      </div>

    );

  }

}

 

export default App;

 

 

* 브라우져

3. 불필요 file 삭제

 - src-logo.svg

 - src-App.js 에서 아래 내용 삭제

import logo from './logo.svg';

 

4. src-App.css 내용 수정

아래 내용만 남기고 모두 삭제

.App {

  text-align: center;

}