dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다.
[React] 리액트 닷넷으로 시작하기
.NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and..
developefeel.tistory.com
dotnet프로젝트에서 html문서 열기
dotnet run을 통해 react프로젝트를 실행해주니 7204포트를 타고
44416포트에서 react앱이 열리는 것을 볼 수 있다.
react부분의 ClientApp을 44416포트에 연결하는 것으로 볼 수 있다.
해당 프로젝트를 VSC로 열어주면 ClientApp폴더를 확인할 수 있는데
여기서 순수 html문서를 열어주기 위해 wwwroot폴더를 생성해주고 html문서를 그 안에 만들어준다.
7204포트로 이동한다면 바로 ClientApp인 44416으로 연결되지만
wwwroot안의 html문서를 라우팅해준다면 해당 html문서가 열린다.
순수 html문서에서 react 사용하기
마찬가지로 wwwroot폴더에 새로운 html문서를 생성한다.
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
react는 JS의 라이브러리 이므로 CDN형식으로 사용하기 위해 링크를 복사해온다.
둘 중 뭘 해도 상관없이 동작하고 여기선 개발용으로 위의 링크를 복사해왔다.
생성한 html문서에 해당 링크를 적어준다.
react가 열리는 ClientApp의 초기화면인 index.html문서를 보면 root아이디를 가지는 div태그가 있다.
react에선 이 div가 비중이 높다.
생성한 문서에 div root를 생성하고 스크립트 태그를 추가한다. 위는 react의 문법인데
render함수는 생성할 태그와 생성된 태그의 위치를 인자로 받는다.
h1태그의 내용에 '안녕하세요.'를 생성하고
생성된 h1태그를 문서의 root의 위치에 집어넣는다.
7204포트의 reacttest문서로 이동하면 div태그안에 h1태그가 생성되었다.
'Front-end' 카테고리의 다른 글
| [React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 (0) | 2022.06.04 |
|---|---|
| [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 (0) | 2022.06.04 |
| [React] 리액트 닷넷으로 시작하기 (0) | 2022.05.22 |
| [React] 리액트 시작하기 (0) | 2022.05.13 |
| DOM이란, HTML의 DOM 트리구조 (0) | 2022.05.13 |