오늘은 노마드코더 ReactJS 수강 두 번째 날입니다! 내일 출근 전까지 화이탱구리구리
#2.2 (Our First React Element)
writing the code (e.g., making a span in html) in a hard way using ReactJS
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
//ReactJS is a tool that makes the website/UI interactive and React Dom is what put the react in the html
const root = document.getElementById("root");
//second item is the property, can be the class or the id name, give an id to the span called sexy-span
//third item is the content of the span
const span = React.createElement(
"span",
{id:"sexy-span", style: {color:"red"}},
"Hello I am a span");
//render is used to show it to the user -> render the span inside of the root
ReactDOM.render(span,root);
//first write in the html, grab it to javascript and revise it
//ReactJS inverse it by writing it first and putting it to the html
//ReactJS will be updated to change the html
</script>
</html>#2.3 (Events in React)
creating an eventlistener using ReactJS
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement("h3",
{onMouseEnter: () => console.log("mouse enter")},
"Hello I am a span");
const btn = React.createElement("button",
//eventlistner and background color is also an example of property
//ReactJS is smart to know what props shoud go into html (e.g., id, color) and what should not go into html (e.g., eventlistener)
{onClick: () => console.log("i am click"),
style: {backgroundColor:"tomato"}},
"Click me");
const container = React.createElement("div",null,[h3,btn]);
ReactDOM.render(container,root);
</script>
</html>#2.5~2.6 (JSX)
using JSX to shorten the lines
JSX is a syntax expanded from JavaScript -> makes a React element and looks similar to HTML
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script scr="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="Title" onMouseEnter={() => console.log("mouse enter")}>
Hello I am a title
</h3>
);
const Button = <button style={{backgroundColor: "tomato",}}
onClick={() => console.log("I am clicked")}
>
Click me</button>
const container = React.createElement("div",null,[Title,Button]);
ReactDOM.render(container,root);
</script>
</html>making a function and rendering it to html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I am a title
</h3>
);
//making a function
const Button = () => (
<button style={{backgroundColor: "tomato",}}
onClick={() => console.log("I am clicked")}
>
Click me</button>
);
const Container = () => (
<div>
<Title /> <Button />
</div>
);
ReactDOM.render(<Container/>,root);
//the first letter of the component should be uppercase, if it's lowercase then ReactJS and JSX will think it as a html tag
</script>
</html>function can be wrote in the following two ways
const Button = () => ()
function Button() { return }