whatisthis?

React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } ❗❗ 주의 우리는 jsx를 사용중인 것이지 HTML을 작성하는게 아니므로 몇가지 주의할 점이 있다. 예를 들면 의 경우에는 자바스크립트에 for이라는 예약어가 이미 존재하므로 에러가 발생하게 된다. BUT > 우리가 지금 import한 react파일은 production용이라 에러는 안뜸. 만약 이걸 development로 바꿔주면 에러가 바로 발생함. class도 마찬가지.(js에 이미 class가 존재하기때문.) >> 따라서 className=""으로 작..

지난 포스팅의 예제를 이어서 진행함. 🔻 React. React Js - setState React. React Js - state (상태) / 예제 React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해.. mywebproject.tistory.com State Functions const root = document.getElementById("root"); function App() { const data = React.useState(0); const [counter, setCounter] = data; con..

React. React Js - state (상태) / 예제 React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨.. mywebproject.tistory.com 지난 포스팅의 예제를 이어서 진행함. 좌) React 사용시 (바뀌는 부분만 따로 렌더링됨) / 우) vanila JS 사용시 body와 h3가 통으로 바뀜 위 사진을 보면 리액트를 사용해서 우리는 분명 아래 코드와 같이 function render() { ReactDOM.render(, root); } Co..

React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 **.. mywebproject.tistory.com 입문편의 예제를 이어서 진행함. (지난 포스팅 참조) 컴포넌트에 state를 추가 let count = 0; const Container = () => ( Total clicks: {count} Click me ); 우선, count변수에 저장된 값이 출력되도록 {count}와 같이 적는다. 그리고, button을 클릭했을 때 카운트..

React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를. mywebproject.tistory.com - 이전 포스팅에서 요소를 만들때는 -const 변수명 = React.createElement(태그명, {props Obj}, content} 와 같이 작성했었다. 이 방법은 기본적이지만 어려운 방식이고, 이번 시간에 더 효율적이고 쉽게 element를 생성하는 법을 알아보겠다. JSX 소개 – React A JavaScript library ..

React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를 사용한 코드를 비교해 mywebproject.tistory.com const root = document.getElementById("root"); const span = React.createElement("span", null, "Hello!"); const btn = React.createElement("button", null, "Click me"); 여기서 span과 btn을 동시에 root위치에 보내려면 방법1 / 배열로 묶듯이 함 ReactDOM.r..

React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를 사용한 코드를 비교해보자. - vanila JS만 사용해서 버튼을 클릭하고, 클릭할때마다 1,2,3,4, .. 회가 뜨도록 하는 간단한 앱을 만들자. vanila.html Total clicks: 0 Click me 그러면, 이제 리액트를 사용했을 때를 보기 위해 리액트를 설치하는 코드를 두개 추가해야한다. 새로운 파일인 index.html에 body 아래에 script태그 두줄을 추가하고, 콘솔창을 켜서 React라고 쳐보면 아래와 같이 떠야한다. 위 코드는 react.js와 react-dom 두가지를 ..

이 기술을 배워야하는지? 1 / 누가 이 기술을 사용하는지, 규모가 어느정도 되는지. 2 / 사용하는 이들에게 얼마나 중요한 기술인지. 3 / 계속해서 사용 가능한지. (전망) - 리액트는 FaceBook에서 처음 만들었고, 모든 FaceBook 웹사이트를 다시 만들었다. 4/ 큰 커뮤니티를 가지고 있다. - 자바스크립트와 아주 가깝기 때문에 대부분의 작업은 js 작업이다. >> 더 나은 js 개발자가 되기 위해 배우는 라이브러리. 5/ 리액트를 기반으로 제작하는 프레임워크 등이 존재. -> 예- 리액트 native. (리액트 JS로 안드로이드 or iOS 어플 제작 가능) React 시작하기 - Web 개발 학습하기 | MDN 이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경..