나는 아주 간단하게 설명했다

React는 하나의 프레임입니까?

React의 로그인 페이지에 따라 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다.그것은 하나의 틀이 아니라 하나의 라이브러리이다.
각도, Vue, 다음.js, 게이츠비, 레이드우드.js 등은 프레임워크의 예이다.프레임워크는 대형 응용 프로그램이 필요로 할 수 있는 자원을 포함한다. 폼 만들기, 자동 테스트 실행, 네트워크 요청 보내기 등이다.
그러나 React 자체에는 많은 기능이 포함되지 않습니다.Core react는 사용자 인터페이스를 구축하는 데만 사용됩니다.완전한 React 응용 프로그램을 구축하기 위해서는 필요한 패키지와 도구를 스스로 선택해야 합니다.예를 들어 폼과 검증에 대해서는 React Hook 폼이나 Formik, 테스트에 대해서는 React 테스트 라이브러리나 Jest를 사용할 수 있다.

React의 특징

구성 요소 기반

React에서 웹 페이지는 봉인된 코드 블록으로 나눌 수 있으며, 이를 구성 요소라고 부른다.이러한 구성 요소를 결합하여 복잡한 UI를 만들 수 있습니다.구성 요소 논리는 React의 템플릿이 아닌 JavaScript로 작성됩니다.필요한 데이터는 이 구성 요소를 통해 웹 응용 프로그램에 쉽게 전달되고 변경할 때 이에 상응하여 나타난다.

성명의

응용 프로그램의 모든 상태를 간단하게 보고 데이터를 전달할 수 있습니다.React는 데이터가 변경될 때 정확한 구성 요소를 효율적으로 업데이트하고 렌더링합니다.

한 번 배우고 한 편 쓰다

React는 여러 기술 스택과 함께 사용할 수 있습니다.따라서 기존 코드를 다시 쓸 필요 없이 React에서 새로운 기능을 개발할 수 있습니다.React는 Node를 사용하여 서버에 렌더링할 수도 있고 React Native를 사용하여 모바일 애플리케이션에 전원을 공급할 수도 있습니다.

웹 사이트에 추가

React는 작은 부분을 당신의 사이트에 추가한 후에 점차적으로 그것의 존재를 확장할 수 있다

1단계: HTML에 DOM 컨테이너 추가

편집할 HTML 페이지를 열고 React를 사용하여 컨텐트를 표시할 위치를 표시하는 빈 태그를 추가합니다.
div에는 유일한 id HTML 속성이 있습니다. 이것은 자바스크립트 코드에서 나중에 찾을 수 있도록 하고 React 구성 요소를 보여 줍니다.너는 용기를 하나 놓을 수 있다<div> 라벨 안의 어느 곳에서든지 그렇습니다.한 페이지에 여러 개의 독립형 DOM 컨테이너가 있을 수 있습니다.그것들은 통상적으로 비어 있다.React는 DOM 컨테이너의 기존 컨텐트를 대체합니다.

<!--… existing HTML … --> 
<div id='name-container'></div>
<!-- … existing HTML … -->

2단계: 스크립트 태그 추가

마침<body> 태그 앞에 HTML 페이지에 3개<script> 태그를 추가해야 합니다.앞의 두 탭이 반응을 불러옵니다.세 번째는 구성 요소 코드를 불러옵니다.

<!-- … other HTML … -->
<script 
  src="https://unpkg.com/react@17/umd/react.development.js" 
  crossorigin
></script>
<script 
  src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
  crossorigin
></script>
<!-- Load our React component. -->
<script src="name_component.js"></script>

3단계: React 어셈블리 생성

</body>라는 파일을 만듭니다.이 코드는 name_container.js라는 이름의 React 구성 요소를 정의합니다.

‘use strict’;
const e = React.createElement;

class NameContainer extends React.Component {
  render() {
    return e(‘div’,null,’Joe’);
  }
}
const domContainer = document.querySelector(‘#name-container’);
ReactDOM.render(e(NameContainer), domContainer);

React 는 어셈블리를 생성하는 데 사용됩니다.React의 Create 요소 함수에는 세 가지 매개변수가 있습니다.

유형:div,h1,p,span 등

[아이템]: 레벨, id, 온클릭 등

[...하위 요소]: 문자열, 다른 DOM 요소

ReactDOM은 DOM에서 어셈블리를 렌더링하는 데 사용됩니다.ReactDOM의 Render 함수에는 두 개의 매개변수가 있습니다.

렌더링할 요소

그 중의 Dom 용기

를 보여야 한다.

4단계: JSX를 사용하여 반응 시도(옵션)

이전 예시에서, 우리는 브라우저가 지원하는 기능에만 의존했다.이것이 바로 우리가 자바스크립트 함수 호출을 사용하여 React에 무엇을 표시할지 알려주는 이유입니다. 그러나 React는 JSX를 사용하는 옵션을 제공합니다.JSX는 완전히 선택할 수 있지만 많은 사람들이 UI 코드를 작성하는 데 도움이 된다는 것을 발견했다.이 NameContainer 탭을 페이지에 추가하면 <script> 탭에 JSX를 사용할 수 있습니다.

<script src=”https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src=”name_component.js” type=”text/babel”></script>

<script> 수정 가능

‘use strict’;
const e = React.createElement;
class NameContainer extends React.Component {
  render() {
    return <div>Joe</div>
  }
}
const domContainer = document.querySelector(‘#name-container’);
ReactDOM.render(e(NameContainer), domContainer);

권장 도구 체인

React 팀은 주로 다음과 같은 솔루션을 권장합니다.

React 프로그램 만들기:React를 배우거나 새 페이지를 만드는 프로그램

다음.js: 만약 Node로 서버가 보여주는 사이트를 구축하고 있다면.js

게이츠비: 정적 내용 가이드 사이트를 만들고 있다면

기타: 중미자, Nx, 패키지, Razzle

Create React Apps는 React를 편안하게 학습할 수 있는 환경입니다.이것은 React에서 새로운 단일 페이지 응용 프로그램을 구축하기 시작하는 가장 좋은 방식이다.최신 JavaScript 기능을 사용하면 뛰어난 개발 환경을 제공하고 애플리케이션 생산성을 최적화할 수 있습니다.
컴퓨터에는 Node>=14.0 및 npm>=5.6이 필요합니다.
프로젝트를 만들려면 다음과 같이 하십시오.

npx create-react-app my-app
cd my-app
npm start

Create React 애플리케이션은 백엔드 로직이나 데이터베이스를 처리하지 않습니다.이것은 단지 전방 구축 파이프를 만들었을 뿐입니다. 모든 후단에 사용할 수 있습니다.엔진 덮개 아래에서, 그것은 Babel과 웹 패키지를 사용하지만, 당신은 그것들을 이해할 필요가 없습니다.생산 환경에 배치할 준비를 할 때 npm runbuild을 실행하면 응용 프로그램의 최적화 버전을 만들 것입니다.
내 JavaScript 블로그 보기: 4 JavaScript tips for shorter code

Reference

이 문제에 관하여(나는 아주 간단하게 설명했다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abhi_vp_/react-explained-and-made-simple-21me

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)