Studying Coding Studying Coding

Props System Parent Component => [props] => Child Component - Pass data from a parent to a child - Allows a parent to configure each child differently - One-way flow of data. A child can't push props back up. - Like 25% of understanding React Example) Parent Component : function App(){ return } => Props Object : {color : "red"} => Child Component : function Child(props){ return props.color } 29...

Inside the index.js // 1) Import the React and ReactDOM libraries import React from "react"; import ReactDOM from "react-dom/client"; // 2) Get a reference to the dic with ID root const el = document.getElementById("root"); // 3) Tell React to take control of that elememt const root = ReactDOM.createRoot(el); // 4) Create a component function App() { return Hi there!; } // 5) Show the component ..

Generating a Project npx create-react-app Go Into the Project cd Run npm start What are we running in our terminal? Files in my Project [index.js , App.js , reportWebVitals.js] => Create React App Dev Server - Babel : Tool to true JSX into normal JS code => - Webpack : Tool to merge all project into a single file => - bundle.js Inside the folder - index.js : First file that gets executed when ou..

Html history vision goals ..... ..... ..... CSS .tab-btn{ background:gray; } .content{ display:none; } .active{ display:block; } Javascript const contents = document.querySelectorAll(".content"); const btns = document.querySelectorAll(".tab-btn"); const container = document.querySelector(".about") container.addEventListener("click",(e)=>{ const id = e.target.dataset.id; if(id){ btns.forEach((btn..

Html video Project play pause CSS - switch button .switch{ position: absolute; width: 50%; height: 100%; top: 0; left: 0; background: var(--clr-primary-5); border-radius: var(--radius); margin: 0; display: block; transition: var(--transition); } .slide .switch { left: 50%; } Javascript const btn = document.querySelector(".switch-btn"); const video = document.querySelector(".video-container"); bt..

return 함수 function의 실행에 끝부분에 온다. - Syntax return [expression] expression에 해당하는 값이 반환이 된다. 이것이 생략이 되어있다면 undefined 가 반환이 될것이다. 함수 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단된다. * 다음 return 명령문은 모두 함수의 실행을 끊는다. return; return true; return false; return x; return x+y;

map : 기존의 array 에서 특정기준에 맞는 data만 return 한다. 새로운 array로 return 한다. filter : 특정기준에 맞는 data를 선별해서 새로운 array를 바꿔서 return 한다. * filter 에서는 callback함수를통해 요소를 시험한다. true를 반환하면 요소를 유지하고, false이면 반환하여 버린다. - map arr.map(callback(currentValue[, index[, array]])[, thisArg]) https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-map-%EA%B3%BC-filter-%EC%B0%A8%EC%9D%B4

JavaScript에 reduce 기능에 대해 알아보자! reduce의 정의 - array의 값을 줄이는데에 사용이 된다. - 원래 array는 변화시키지 않는다. const numbers = [15.5, 2.3, 1.1, 4.7]; numbers.reduce(getsum,0); function getsum(total, num){ return total + Math.round(num) } //24 Syntax array.reduce(function(total, currentValue,currentIndex,arr), initialValue) Example function displayMenuButtons(){ const categories = menu.reduce( function(values, item..