react.js 리액트 & JS

코드 수정중입니당!

개발환경

#실행

npm run start
```#배포
npm run build
npx serve -s build

컴포넌트

컴포넌트 : 사용자 정의 태그

• 함수를 선언하는 방식이며 함수 이름은 대문자로 시작한다.

컴포넌트 생성 예제

#컴포넌트 생성
#함수 선언
function App() {
    return <div>React App</div>;
}

#함수 내보내기
export default App;

컴포넌트 수정(App.js)

#컴포넌트 불러오기
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}
#컴포넌트 사용
export default App;

Props

Props : Properties, 컴포넌트에게 값을 전달할 때 사용

function Create(props){
  return <article>
    <h2>Create</h2>
    <form onSubmit={event =>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onCreate(title, body);
    }}>
      <p><input type = "text" name = "title" placeholder='title'/></p>
      <p><textarea name = "body" placeholder='body'></textarea></p>
      <p><input type = "submit" value="Create"></input></p>
    </form>
  </article>
}