react 기본 소스 공부

function App() {

  const name ="안녕ㅋㅋ"
  return (
    <>
      <div
        style={{
          backgroundColor: 'black',
          color: 'aqua',
          fontSize: '48px',
          fontWeight: 'bold',
          padding: 16
        }}
      >
        {name}
      </div>
    </>
    
  );
}

스타일 적용

function App() {

  const name ="안녕ㅋㅋ"
  return (
    <>
      <div
        style={{
          backgroundColor: 'black',
          color: 'aqua',
          fontSize: '48px',
          fontWeight: 'bold',
          padding: 16
        }}
      >
        {name ==='안녕ㅋㅋ'?(
            <h1>맞았습니다</h1>
          ):(
            <h1>틀렸습니다</h1>
          )
        }
      </div>
    </>
    
  );
}

if 문 추가

function App() {

  const name ="안녕ㅋㅋ"

  const onChange = (e) => {
      console.log(e.target.value);
  }
  return (
    <>
    <input onChange={onChange}></input>
      <div className='react'>
        {name ==='안녕ㅋㅋ'?(
            <h1>맞았습니다</h1>
          ):(
            <h1>틀렸습니다</h1>
          )
        }
      </div>
    </>
    
  );
}

input값 console에 출력

import { Component } from 'react';

class App extends Component{
  render() {
   const name='react';
   return <div className='react'>{name}</div>
   
  }
}

클래스형 컴포넌트

const MyComponent = () =>{
    return <div>나의 새롭고 멋진 컴포넌트</div>;
};

export default MyComponent;

화살표 함수

import MyComponent from './MyComponent'; 

const App = () =>{
  return <MyComponent />
}

위 컴포넌트 불러오기