리액트 기초개념 JSX

컴포넌트란?
자바스크립트와 html을 조합한 JSX라는 문법을 사용해서 만든다.

src폴더 안에 Potato.js라는 이름의 새로운 파일을 만든다.

import React from 'react';


function Potato() {
    return <h3 > I love Potato < /h3>;
}

export default Potato;

 

index.js에 import from './Potato'; // 추가 해준다. ./는 현재파일이 있는 폴더라는 뜻이다.
<Potato/>  추가

import React from 'react';
import Potato from './Potato';

function App() {
    return(
     <div>
        <h1> Hello </h1>  
        <Potato/> 
    </div>
    );
}

export default App;

실행 화면

실행화면

 

 

***App 컴포넌트 안에 Potato 컴포넌트 만들기

import React from 'react';

function Potato() {
    return <h1> I like potato</h1>
}

function App() {
    return(
     <div>
        <h1> Hello </h1>  
        <Potato/> 
    </div>
    );
}

export default App;

실행화면