728x90 300x250 SMALL 2024/104 기존 웹사이트에 리액트 적용하기 html 테스트 기존 사이트 리액트 삽입하기 jsfunction MyButton() { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', {onClick:() => setIsClicked(true)}, isClicked ? 'Clicked' : 'Click here!' )}const domContainer = document.querySelector('#root');ReactDOM.render(React.createElement(MyButton), domContainer); 2024. 10. 22. JSX란? JSX는 JavaScript XML의 약자로 자바스크립트를 확장 시킨 문법이기 때문에 모든 자바스크립트 문법을 지원하고 여기에 HTML과 XML을 같이 사용하는 형태다. 리액트는 컴포넌트 기반으로 UI를 구성하는데, 이 컴포넌트를 작성할 때 JSX를 사용하면 HTML태그와 유사한 문법으로 UI 구조를 쉽게 정의할 수 있음.JSX는 최종적으로 브라우저가 이해할 수 있는 순수 자바스크립트로 변환되고 이 변환 작업은 Babel 같은 트랜스파일러에 의해 이루어지며, 실제로 브라우저는 변호나된 자바스크립트 코드를 실행한다. JSX 사용법const element = Hello, world!; 위와 같은 JSX는 Babel에 의해 다음과 같이 변환된다.const element = React.createElement(.. 2024. 10. 18. 리액트 시작하기 - 리액트 색성하기 리액트 설치는 아래 게시글을 확인https://moo-you.tistory.com/536 React 리액트 설치 방법React를 설치하기 위해서는 몇 가지 재료가 필요 합니다. 1. node.js, 2. Visual Studio Code node.js설치 먼저 검색창에서 node.js를 검색합니다. Node.js 사이트로 들어가면 바로 Download가 나오는데 오른쪽은 최moo-you.tistory.com 리액트로 웹사이트를 개발할 때에는 create-react-app 주려서 CRA를 사용한다.리액트로 개발하는데 필요한 모든 설정들을 생성해 주는 도구이다. vscode 터미널에서 아래 명령어를 실행한다.npx create-react-app test test에는 자신의 프로젝트 명을 입력한다.패키지.. 2024. 10. 14. 비주얼 스튜디오 코드 라이브 서버 크롬 연결 1. File > Preferences 2. Settings 3. Extensions > Live Server config > Custom Browser > chrome로 변경 2024. 10. 11. 이전 1 다음 728x90 반응형 LIST