728x90
반응형
섹션 2. 리액트 시작하기
index.html
<!-- index.html --> <html> <head> <title>잡식성 개발자</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>잡식성 개발자 블로그에 오신 여러분을 환영합니다.</h1> <!-- DOM Conatiner(Root DOM Node) --> <div id="root"></div> </body> </html><!-- index.html --> <html> <head> <title>잡식성 개발자</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <h1>잡식성 개발자 블로그에 오신 여러분을 환영합니다.</h1> {/* DOM Conatiner(Root DOM Node) */} <div id="root"></div> <!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script> </body> </html>
MyButton.js
// MyButton.js function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', { onclick: () => setIsClicked(true) }, isClicked ? 'Clicked!' : 'Click here!' ) } const domContainer = document.querySelector('#root'); ReactDOM.render(React.createElement(MyButton), domContainer);
실습. create-react-app
create-react-app
리액트로 개발을 하기 위한 모든 설정이 되어있는 상태로 프로젝트를 생성
조건
Node.js v14.0.0 이상
npm v6.14.0 이상
VS Code
명령어
# 사용법 $ npx create-react-app <your-project-name> # 실제 사용 예제 $ npx create-react-app my-app# 경로 변경 (change directory) $ cd my-app # 애플리케이션 실행 $ npm start실행 화면
참고
728x90
'개발 관련 학습 > React' 카테고리의 다른 글
| [처음 만난 리액트] 섹션 5. Components and Props (0) | 2023.03.10 |
|---|---|
| [처음 만난 리액트] 섹션 4. Rendering Elements (0) | 2023.03.10 |
| [처음 만난 리액트]섹션 3. JSX (0) | 2023.01.12 |
| [처음 만난 리액트]섹션 1. 리액트 소개 (0) | 2023.01.10 |
| [처음 만난 React]섹션 0. 준비하기 (2) | 2023.01.08 |