의사 일정

1. React 정보
2. React 배포
3. React 구현
4. 요약

1. React 정보

JavaScript 라이브러리유사한 라이브러리에는 jQuery, Vue가 있습니다.js 등이 있습니다.즉, HTML 화면에 동적으로 표시하려는 경우에 사용됩니다.
■ React의 특징
소스 코드 컴파일 필요
(따라서 개발 환경을 만들어야 함)
・React 내의 HTML 섹션은 JSX로 작성합니다(=JavaScript와 HTML이 혼합된 글쓰기).
⇒복잡한 UI를 잘 만듭니다.
• 오해를 두려워하지 않는다면 JavaScript 버전의 Wicket 같은 설치

2. React 배포

■ React 가져오기는 몇 가지 방법이 있습니다.

1. 배포 방법은 jQuery와 같습니다.React를 사용할 수 있지만 정말 초보적인 일만 할 수 있습니다.JSX는 사용할 수 없고 처리 부담이 크기 때문에 서비스를 제작할 때 실용적이지 않다.
2. 개발 환경을 쉽게 만들 수 있습니다.
3. React를 사용할 때 Node가 필요합니다.직접 js와 Babel을 가져옵니다.기존 시스템을 포함할 때 이 방법을 사용합니다.
babel···새로운 자바스크립트의 형식을 현재의 서비스에도 대응할 수 있는 것으로 바꾸었다.
Node.js···javaScript 서버에서도 이동할 수 있는 플랫폼입니다.
npm・・・Node.js의 사용에 필요한 정보를 종합하다

배치

①Node.설치 js
아래 공식 사이트에서 다운로드하여 설치하다
https://nodejs.org/ja/

②create-react-app 설치
명령 항목에
npm install -g create-react-app

③ 프로젝트 제작
원하는 경로로 이동
create-react-app<프로젝트 이름>

※ 프로젝트 제작 시 주의사항
다음 항목 이름에 오류가 발생합니다.
・react
・react-dom
・react-scripts

④ 프로젝트의 시작
만든 항목에서 npmstart를 누르십시오

⑤ 브라우저 시작

3. React 구현

소스 코드 설명

코드를 수정하고 저장하면 자동으로 다시 로드됩니다.

구현 고려 사항

render 방법을 실행해야 합니다. 되돌릴 수 있는 구성 요소만 지정할 수 있습니다.

이미지 레이블 등은 HTML에서 "/"로 닫지 않아도 표시되지만 React에서 오류가 됩니다.

읽기 인코딩 기반

상태 및 진행 정보

상태
속성
가변 데이터
불변의 데이터
구성 요소에 의해 보존
부모에게 맡기다
변경 가능
변경할 수 없음
개인적일 거예요.
기본값 설정 및 검증 허용

Stete 상세 정보

Props 상세 정보

총결산

■ React 소감
· jQuery와 비교할 수 없는 것과 달리 학습 원가가 매우 높다.
· HTML을 업데이트해야 할 때 (= 화면이 많이 변하는 경우) 편리할 것 같습니다.
・ 실제 운용을 고려하여 React, Babel, Node.js의 버전이 일치하지 않을 가능성도 있기 때문에 가져오는 것이 좋다고 생각하지 않습니다.

참조 사이트

https://qiita.com/KKoh/items/8aa1bf0bb3673e8e2455
https://qiita.com/maron8676/items/4457b4d70be6db260eee
https://tech-brook.com/525/
https://tech-brook.com/558/
https://qiita.com/tomi_linka/items/6563eacd88e63bda5de3
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50
https://codezine.jp/article/detail/9928