0624

React
프런트엔드 프레임워크 중 하나
react, angular, vue.js

장점

-페이스 개발에 사용한 기술
-공개 소프트웨어
-화면 출력에 특화된 프레임위크
-컴포넌트를 조립하여 화면 구성
-게임 엔진 원리를 도입흐여 화면 출력 속도가 빠름(Virtual DOM)

개발 환경 설치

Node.js(필수) : 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼, 작성 언어로 자바스크립트를 활용

에디터(vsc)

웹브라우저(크롬)

https://nodejs.org/en/
recommanded for most users 설치

https://github.com/coreybutler/nvm-windows/releases
Nvm-setup.zip 다운로드
설치 후 명령프롬프트에서(관리자 권한으로 실행)

Component } from 'react';

class TodaysPlan extends Component {
render(){
   return(
        <div className=:message-container">놀러가자!!!
       </div>
      );
     }
    }
export default TodaysPlan;
저장 후 app.js로 이동
컴포넌트 불러오기
import TodaysPlan from './component/TodaysPlan';
function App(){
return
<div className="body">
 <TodaysPlan><TodaysPlan>
 </div>
  );
 }
 
 실습 box 만들기
 app.js
 function App() {
 return (
 <div>
  <div className="box">
   Box1
    <p>한국</p>
    </div>
    <div className="box">
    Box2
    <p>미국</p>
    </div>
    <div className="box">
    Box3
    <p>중국</p>
      </div>
     </div>
     );
    }
    app.css : 스타일 적용하기
    .box{
    width : 100px;
    height:100px;
    border:1px solid red;
    }
    실습3.box 만들기 -컴포넌트 활용
    
    BOX.jsx컴포넌트 만들기
    class Box1 extends Component {
    render(props) {
    return (
     <div className="box">
       Box1
       <p>{this.props.name}</p>
       </div>
       );
       }
       app.js 수정
       import Box from '.component/Box1'
       function App() {
       return 
       <div> 
         <Box1 name="한국"></Box1>
         <Box1 name="미국"></Box1>
         <Box1 name="중국"></Box1>
         </div>
         );
         }