728x90 반응형 Frontend/React2 [REACT] 리액트의 JSX JSX란? JSX는 자바스크립트의 확장 문법이다. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 된다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); JSX 문법 JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들이 있다. 1. 속성명은 카멜 케이스로 작성하기 JSX 문법에서도 태그에 속성을 지정해 줄 수 있다. 단, 여러 단어가 조합된 몇몇 속성들을 사용할 때.. 2023. 3. 1. [REACT] 리액트로 프로젝트 시작하기 리액트는 프론트엔드에서 사용하는 기술 중 하나이다. 리액트를 시작하기에 앞서 먼저 node.js를 검색하여 LTS버전으로 다운로드를 해야한다. 최신버전보다 안정적으로 사용할 수 있기 때문에 홈페이지에서도 추천하는 버전이라고 써져있다. 본인의 환경에 맞는 버튼을 누르면 자동으로 깔린다. https://nodejs.org/ko/download/ 잘 깔렸는지 확인하는 방법은 터미널을 열어 node -v를 입력해보면 된다. node와 npm의 버전을 둘 다 확인해보자. 이렇게 나온다면 잘 설치된 것이다. IDE에 폴더를 하나 만들고 터미널에 npm init react-app . 를 입력하면 시작이다. 위의 코드를 입력하고 엔터를 누르게되면 설치할꺼냐는 질문이 나오는데 y를 입력하면 다운로드가 시작되고 프로젝트가.. 2023. 3. 1. 이전 1 다음 728x90 반응형
