1일차 | react 기본

package-lock.json

node 가 깔려 있는 pc에서 사용 가능한 명령어

  - node.js 설치가 되었나?

  - npm/yarn 이 설치 되었는지?

▶ npm install --global yarn

▶ npm create-react-app 프로젝트명

▶ npm start

 

APP.js (에서 주로 작업) 

import로 연결

 

APP.js

import React from "react";
import Hello from "./component/hello";
import Hello2 from "./component/hello2";
import Wrapper from "./component/Wrapper";
import "./app.css";


function App() { 
  const name = 'apple';

  const style = {
    backgroundColor : 'deepskyblue',
    color:'green',
    fontSize : 40,
    padding : '1rem'
  }


  return (
    <Wrapper>
      {/*div 가 여러 개 일 때는 전체를 묶어주기위해 div 전체를 감싸줘야함*/}
      <div className="deeppink-box">Hello</div>
      {/*외부 스타일 시트*/}
      <div style={style}> {name}Hello</div>
      {/*내부 스타일 시트*/}
      <Hello />
      <Hello name="apple" color="blue" />
      <Hello name="banana" color="gold" isSpacial={true} />
      <Hello2 />
      <Hello2 name="apple" color="blue" />
      <Hello2 name="banana" color="gold" isSpacial={true} />
    </Wrapper>
  );

}

export default App;

app.css

.deeppink-box{
  background-color: deeppink;
  width: 100px;
  height: 40px;
  padding: 10px;
}

component>

1. hello.jsx

import React from "react";

function Hello({color, name, isSpacial}) {
  return (
    <div style={{color}}>
      {/* Hello!{name} */}
      {isSpacial ? <b>***</b>:null} Hello!{name}
      {isSpacial && <b>***</b>} Hello!{name}
    </div>
  );
}

// Hello.defaultProps = {
//     color :'red',
//     name:'무명'
// }

export default Hello;

2. hello2.jsx

import React from "react";


function Hello2({ Props }) {
     Props = {color: "gold", name: "김사과2"};
    return <div style={{ color: Props.color }}>안녕하세요2 {Props.name}</div>;
}
export default Hello2;

3. Wrapper.jsx

import React from "react";

function Wrapper({ children }) {
  //{ children } 안에 콘텐츠 내용을 자식객체로 설정
  const style = {
    border: "3px solid red",
    padding: "10px",
    backgroundColor: "#cccccc",
  };
  return <div style={style}>{children}</div>;
}
export default Wrapper;