React STEP 19 - Create React App - 1

⭐ 기본 구조 이해하기

 

1. src/index.js

 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"));
 root.render(
 	<App />
 );
 // 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()

 

2. src/App.css

.container {
    padding: 10px;
 }
 .container h1 {
    font-size: 25px;
    font-weight: normal;
 }
 .container h2 {
    margin-top: 16px;
    font-size: 16px;
    font-weight: normal;
 }
 .container p {
    margin-top: 16px;
    font-weight: normal;
 }

 

3. src/App.js

 import React, { Component } from 'react';
 import './App.css';
 // class App extends React.Component {
 class App extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div className="container">
                <h1>React Example</h1>
                <p>HTML 적용하기</p>
            </div>
        );
    }
 }
 export default App;

 

⭐ React 컴포넌트 이해하기

 

1. src/App.js

import React, { Component } from 'react';
 import ImportComponent from './ImportComponent';
 import './App.css';
 class App extends Component {
    render(){
        return(
            <div className="container">
                <h1>React Example</h1>
                <ImportComponent />
            </div>
        );
    }
 }
 export default App;

 

2. src/ImportComponent.js

 import React, { Component } from 'react';
 class ImportComponent extends Component {
    render(){
        return (
            <h2>This is Imported Component.</h2>
        );
    }
 }
 export default ImportComponent

 

⭐ 생명주기 함수 이해하기

 

1. src/App.js

import React, { Component } from 'react';
 import Lifecycle from './Lifecycle';
 import './App.css';
 class App extends Component {
    render(){
        return(
            <div className="container">
                <h1>React Example</h1>
                <Lifecycle />
            </div>
        );
    }
 }
 export default App;

 

2. src/Lifecycle.js

 import React, { Component } from 'react';
 class Lifecycle extends Component {
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 export default Lifecycle;