Contents
1. (실습) HTML만으로 간단한 웹사이트 만들기
index.html 작성
<html>
<head>
<!-- 웹사이트 제목넣기 -->
<title>소플의 블로그</title>
</head>
<body>
<h1>소플의 블로그에 오신 여러분을 환영합니다!</h1>
</body>
</html>
2. (실습) CSS를 사용하여 웹사이트 스타일링하기
styles.css
h1 {
color:green;
font-style: italic;
}
index.html에 styles.css 적용
브라우저로 열때는 다음과 같이 마우스 오른쪽 버튼 클릭 > Open with Live Server
3. (실습) 웹사이트에 React.js 추가하기
react와 react-dom ,react component 가져오기
react component 만들기
그냥 react component가 이렇게 생겼구나 하고 넘어가기
// 아주 간단한 react의 함수 컴포넌트
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{onClick: () => setIsClicked(true)},
isClicked? 'Clicked!' :'Click here!'
)
}
// ReactDom의 render 함수를 사용해서 React component를 domContainer에 렌더링
// 아래 코드가 필요한 이유는 script 태그를 사용해서 component를 가져왔다 해도 component가 화면에 보이지 않기 때문
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
웹 브라우저를 열면 아래와 같이 뜸. Click here! 버튼이 우리가 방금 만든 MyButton이라는 이름의 react component
Click here!를 클릭하면 버튼이 Clicked!로 변경됨
이는 react component의 state가 변경되었기 때문
react를 사용해 웹사이트를 만들때마다 매번 위와 같은 환경설정을 해줘야 한다면 굉장히 번거로울 것이다.
그래서 이 모든 과정이 필요없이 곧바로 react web application을 개발할 수 있도록 프로젝트를 자동으로 생성해주는
create-react-app이라는 package가 있다
지금부터는 create-react-app에 대해서 배워보자.
'JavaScript, React 🍦 > [React.js] 처음 만난 리액트' 카테고리의 다른 글
| [React.js] 처음 만난 리액트 3-1 JSX의 정의와 역할 (0) | 2023.11.09 |
|---|---|
| [React.js] 처음 만난 리액트 2-2 (실습) create-react-app (0) | 2023.11.09 |
| [리액트] 처음 만난 리액트 5강 개발환경 설정하기 (1) | 2023.10.20 |
| [리액트] 처음 만난 리액트 4강 JavaScript의 함수 (0) | 2023.10.20 |
| [React.js] 처음 만난 리액트 3강 JavaScript의 연산 (0) | 2023.10.20 |
