index.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- React JS: 어플리케이션이 interactive하도록 만들어주는 Library -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- React-dom: React element들을 HTML body에 둘 수 있도록 하는 Library 또는 Package -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Babel Standalone을 이용하여 JSX문법을 브라우저에 렌더링 가능한 형태로 변환
// React에선 JSX문법을 활용하는데 브라우저에선 정상적인 렌더링이 불가하기에,
// Babel을 통해 브라우저가 이해할 수 있는 React.js 형태로 코드 변환하여 <head>부분에 넣어줌.
const root = document.getElementById("root");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = () => (
<button
style={{
backgroundColor: "tomato"
}}
onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
const Container = () => (
<div>
</div>
);
// Title과 Button 컴포넌트를 <div> 아래 element처럼 넣어줄 수 있다.
// 컴포넌트의 첫 글자는 반드시 대문자여야 HTML이 아닌 JSX Code로 인식함.
ReactDOM.render(<Container />, root);
// 화면에 렌더링 해주는 코드
</script>
</html><!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- React JS: 어플리케이션이 interactive하도록 만들어주는 Library -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- React-dom: React element들을 HTML body에 둘 수 있도록 하는 Library 또는 Package -->
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<!-- PropType: 어떤 타입의 prop을 받고 있는지 체크해주는 패키지로 에러 발생 시 Console에 나타내줌-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Babel Standalone을 이용하여 JSX문법을 브라우저에 렌더링 가능한 형태로 변환
// React에선 JSX문법을 활용하는데 브라우저에선 정상적인 렌더링이 불가하기에,
// Babel을 통해 브라우저가 이해할 수 있는 React.js 형태로 코드 변환하여 <head>부분에 넣어줌.
function Btn({ text, fontSize = 12 }) {
// function Btn({ props })
// Btn 함수의 첫 번재 인자로서 App함수의 Btn컴포넌트의 prop들을 선언해주어야만 해당 prop들은 작동할 수 있음.
// cf. fontSize=12의 경우, Prop에 fontSize를 선언하지 않은 컴포넌트에만 해당 코드를 적용하게 됨
return <button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{btnInput}
</button>
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropType.number
};
// PropType은 어떤 타입의 prop을 받고 있는지 체크해주는 패키지.
// 'text' prop에 string 형태의 코드를 받아야함. 'isRequired'코드가 붙으면 필수 요소라는 것(text라는 prop이 없으면 에러 표시)
// 'fontSize' prop에 number 형태의 코드를 받아야함.
function App() {
return (
<div>
<Btn text="Save changes" fontSize={18} />
<Btn text={"Continue"} />
</div>
);
}
// <Btn>의 Prop인 text와 fontSize는 코드 상부의 Btn 함수의 인자로 기입해주어야만 작동한다.
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
// 화면에 렌더링 해주는 코드
</script>
</html>
