Practice/# sulee

[0000000000ps]

• CRA 없이 개발 환경 구축 시도
  https://velog.io/@ksh4820/CRA-%EC%97%86%EC%9D%B4-React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0
  https://leehwarang.github.io/2019/08/20/react_setting.html
  https://baeharam.netlify.app/posts/react/React-CRA-%EC%97%86%EC%9D%B4-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%99%98%EA%B2%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0
  https://lsy26499.tistory.com/68
  여러 블로그를 참고해 시도했으나 작동하지 않음
  구축하는 과정에서 react, react-dom, webpack, babel, html-loader, css-loader, style-loader, plugin 설치한다는 점을 확인

• 생활코딩 react 컴포넌트 만들기 2 까지 시청

• CRA 설치

   mkdir sulee
   npx create-react-app sulee
  

• sulee/src/App.js 수정

   import React, { Component } from  'react';
   import  './App.css';
   
   class Button extends  Component {
   	render() {
   		return(
   			<div>
   				<button  onClick={() =>  alert('Hello, Cadet !')}>Matching 42</button
   			</div >
   		);
   	}
   }
    
   class App extends  Component {
   	render() {
   		return (
   			<div  className="App">
   				<Button></Button>
   			</div>
   		);
   	}
   }
   
   export  default App;
  

  CRA로 구축을 한 뒤에, Button 태그로 버튼을 만들고
  alert 함수를 시도했으나 작동하지 않음
  https://medium.com/@yeon22/react-js-react%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%A0%81%EC%9A%A9-%ED%95%98%EA%B8%B0-904015a3bb1f
  이 글을 보고, button onClick 코드 한 줄을 가져다가 alert 함수까지는 할 수 있었음

  상위 태그가 꼭 있어야 한다고 해서 Button 태그 위에 div 태그를 넣었음
  그 외 코드는 실습을 하며, 기존 CRA 의 App.js 안의 코드를 조금씩 수정해서 완성함