2021년 2월 11일 복기 (TIL React)
React
진짜 모르겠다 시작을 못했다
유투브 존버만이 승리다.
https://www.youtube.com/watch?v=w7ejDZ8SWv8
App.js
import React from "react";
import Header from "./components/Header";
// function App() {
// return (
// <div className="container">
// <Header />
// </div>
// );
// }
class App extends React.Component {
render() {
return <h1>Hello from a class</h1>;
}
}
export default App;
Header.js
const Header = () => {
return (
<div>
<h1>Task Tracker</h1>
</div>
);
};
export default Header;
App.js
import Header from "./components/Header";
function App() {
return (
<div className="container">
<Header />
</div>
);
}
export default App;
Header.js
import PropTypes from "prop-types";
const Header = ({ title }) => {
return (
<header>
<h1>{title}</h1>
</header>
);
};
Header.defaultProps = {
title: "Task Tracker",
};
Header.propTypes = {
title: PropTypes.string.isRequired,
};
export default Header;
Event
Header.js
import PropTypes from "prop-types";
import Button from "./Button";
const Header = ({ title }) => {
const onClick = () => {
console.log("Click");
};
return (
<header className="header">
<h1>{title}</h1>
<Button color="green" text="Add" onClick={onClick} />
</header>
);
};
Header.defaultProps = {
title: "Task Tracker",
};
Header.propTypes = {
title: PropTypes.string.isRequired,
};
export default Header;
Button.js
import PropTypes from "react";
const Button = ({ color, text, onClick }) => {
return (
<button
onClick={onClick}
style={{ backgroundColor: color }}
className="btn"
>
{text}
</button>
);
};
Button.defaultProps = {
color: "stellblue",
};
Button.porpTypes = {
text: PropTypes.string,
color: PropTypes.string,
onClick: PropTypes.func,
};
export default Button;
Create a list with .map()
Task.js
"tasks": [
{
"id":1,
"text": "Doctors Appointment",
"day": "Feb 5th at 2:30pm",
"reminder": true
},
{
"id":2,
"text": "Metting at School",
"day": "Feb 6th at 1:30pm",
"remider": true
},
{
"id":3,
"text": "Food Shopping",
"day": "Feb 5th at 2:30pm",
"reminder": false
}
]
Author And Source
이 문제에 관하여(2021년 2월 11일 복기 (TIL React)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jtlim0414/2021년-2월-11일-복기-TIL-React저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)