노마드코더 강의로 ReactJS 스터디를 시작하였습니다! 새로운 언어를 배우는 만큼 큰 설렘을 가지고 한 번 열심히 수강해보도록 하겠습니다! 화이탱..구리구리
#1.1~1.3 (Why React)
- 누가 이 기술을 사용하는지, 기술의 규모는 어떤지를 파악하는 것이 중요 --> 상위 1만 개의 웹사이트 중 44.76%는 ReactJS를 사용함 (e.g., Airbnb, Facebook, Instagram, Netflix)
- 페이스북이 ReactJS를 만들었으며, 그들의 웹사이트도 ReactJS로 작업하였으며, 이를 개선하기 위해 자금을 투자하고 있음
- 큰 커뮤니티를 가지고 있음. ReactJS는 Javascript와 비슷하기 때문에 Javascript의 커뮤니티를 함께 빌려왔기 때문에 커뮤니티가 아주 거대함
#2.0~2.1 (Introduction/Before React)
ReactJS makes the UI more interactive --> makes interactivity in the website very simple
Building vanillaJS to compare it with ReactJS
Vanilla JS using only html - making the button
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click me</button>
</body>
<script>
const button = document.getElementById("btn");
function handleClick(){
console.log("I have been clicked");
}
button.addEventListener("click",handleClick);
</script>
</html>Vanilla JS only using html - displaying clicks
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click me</button>
</body>
<!--step #1 create html, step #2 grab it from javascript, step #3 listen for events, step #4 update the data, step #5 update the html as well-->
<span>Total clicks: 0</span>
<script>
let counter = 0;
const span = document.querySelector("span");
const button = document.getElementById("btn");
function handleClick(){
counter = counter +1;
span.innerText=`Total clicks: ${counter}`;
}
button.addEventListener("click",handleClick);
</script>
</html>importing react and react-dom into html
<!DOCTYPE html>
<html>
<body>
</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>
</script>
</html>