<!DOCTYPE html>
<html lang="en">
<body>
<h1>hello html!</h1>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = document.createElement("h1");
element.textContent = "Hello javaScript!";
rootElement.appendChild(element);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<body>
<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>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", {
children: "Hello React!"
});
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<body>
<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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello JSX!";
const className = "title";
const element = <h1 className={className}>{text}</h1>;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
해당 div
와 button
이 동시에 업데이트 됨
<!DOCTYPE html>
<html lang="en">
<body>
<!--<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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
function draw() {
const number = Math.floor(Math.random() * 9 + 1);
const element = `
<button>${number}</button>`;
rootElement.innerHTML = element;
}
setInterval(draw, 1000); // 함수를 1초마다 호출함 -> 랜덤숫자가 1초마다 생성됨
</script>
</body>
</html>
해당 button
만 업데이트됨
<!DOCTYPE html>
<html lang="en">
<body>
<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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
function draw() {
const number = Math.floor(Math.random() * 9 + 1);
const element = (
<React.Fragment>
<button>{number}</button>
<div>
<p>{number}</p>
</div>
</React.Fragment>
);
ReactDOM.render(element, rootElement);
}
setInterval(draw, 1000); // 함수를 1초마다 호출함 -> 랜덤숫자가 1초마다 생성됨
</script>
</body>
</html>
// <생략>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
{/* function Hello({ name }) {
return <h1>Hello, Component {name}</h1>;
}*/}
const Hello = (data) => <h1>Hello, Component {data.name}</h1>;
const element = <Hello name="component" />;
ReactDOM.render(element, rootElement);
<!-- React-->
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
// 공통되는 버튼의 재사용목적 컴포넌트
const Button = ({ color, onClickButton }) => {
// 버튼을 클릭했을 때 실행되는 함수
const handleClickButton = (color) => {
onClickButton(color);
};
return (
<button
onClick={() => handleClickButton(color)}
style={{ backgroundColor: color }}
>
{color} button
</button>
);
};
function Buttons() {
const [textColor, setTextColor] = React.useState("black");
console.log("textColor", textColor);
return (
<>
<Button color="pink" onClickButton={setTextColor} />
<Button color="blue" onClickButton={setTextColor} />
<Button color="green" onClickButton={setTextColor} />
</>
);
}
const element = <Buttons />;
ReactDOM.render(Buttons(), rootElement);
</script>
</body>
</html>
<!-- React-->
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
// 공통되는 버튼의 재사용목적 컴포넌트
const Button = ({
color,
onClickButton,
changeTextColor,
array,
count,
addCount
}) => {
// 버튼을 클릭했을 때 실행되는 함수
const handleClickButton = (color) => {
addCount(count + 1);
changeTextColor(color);
// 버튼을 클릭했을 때 array 배열에 텍스트 추가
const newArray = array.concat({
key: count,
des: `Click ${color}button`
});
addNewArray(newArray);
};
React.useEffect(() => {}, [count]);
return (
<button
onClick={() => handleClickButton(color)}
style={{ backgroundColor: color }}
>
{color} button
</button>
);
};
function Buttons() {
const [textColor, setTextColor] = React.useState("black");
const [newState, setNewState] = React.useState([
{ key: 0, color: "pink" },
{ key: 1, color: "blue" },
{ key: 2, color: "green" }
]);
const [array, setArray] = React.useState([]);
const [count, setCount] = React.useState(0);
return (
<>
{newState.map((button) => {
return (
<Button
key={button.key}
color={button.color}
changeTextColor={setTextColor}
addNewArray={setArray}
array={array}
addCount={setCount}
count={count}
/>
);
})}
<h1 style={{ color: textColor }}>color</h1>
{array.map((text, index) => {
return <p key={index}>(desc)</p>;
})}
</>
);
}
const element = <Buttons />;
ReactDOM.render(Buttons(), rootElement);
</script>
</body>
</html>