Before we start we assume that , you have a basic about HTML5, CSS , JavaScript and Document Object Model(DOM API) and JSX. Let's Dive into it

React는 프레임이 아닙니다.

React는 단지 도서관일 뿐이니, 너는 스스로 모든 결정을 해야 한다.이것은 구성 요소를 사용하여 사용자 인터페이스를 구축하는 데 전념합니다.
그것은 서버 통신, 번역, 루트 등 방면에서 너를 도울 수 없다.어떤 사람들은 이것이 약점이라고 생각한다.나는 한 지혜로운 사람이 한 말에 동의한다.

“Framework solves the problem of its creators” ~one of my mentors

React는 매우 얇아서 다른 제3자 라이브러리와 혼합하여 사용하기 쉽다.Rich JS 생태계는 모든 내용의 라이브러리를 가지고 있습니다.프레임의 설계 결정/제한 없이 원하는 것을 선택한 다음 삽입할 수 있습니다.

모든 구성 요소

React는 어셈블리 정보

React는 재사용 가능한 어셈블리의 개념을 따릅니다.

작은 구성 요소를 만들고 그것을 연결해서 더 큰 구성 요소를 만든다.

구성 요소를 만들고 프로젝트의 어느 곳에서든 그것을 사용합니다.

어셈블리 선언 이전의 주요 주제

어셈블리 이름은 대문자로 시작해야 합니다.HTML 요소의 소문자 이름이 반대이기 때문에 필수입니다.

구성 요소는 속성 목록을 전달하고 수신할 수 있습니다.일반적으로 프로그래머는 도구라고 부른다.

어셈블리에서 분해할 수 있습니다.

클래스를 정의하기 위해className 대신 className을 사용합니다.

JSX

반응을 보이다.Js는 특수한 자바스크립트 코드를 도입하여 XML과 비슷한 문법을 자바스크립트에 추가합니다.그것은 검증된 파일에 저장할 수 있는 읽기 가능한 코드를 구축하는 데 도움이 된다.렌더링 함수에서 문자열을 연결하지 않고 HTML을 삭제할 가능성이 높습니다.HTML은 특정 JSX Transformer를 사용하여 함수로 변환됩니다.

서버측 렌더링

상술한 기능은 동구/통용 웹 응용을 만드는 기능을 제공한다.사용자가 웹 사이트를 보기 전에 JavaScript 로드를 기다리지 않아도 되므로 시작 페이지의 로드가 빨라집니다.

단방향 데이터 바인딩

사람들은 항상 데이터 위치의 변화를 쉽게 볼 수 있다.그것은 특히 대형 응용 프로그램에서 React의 독립된 구성 요소를 신속하게 감시하고 디버깅하는 데 도움이 된다.

가상 DOM

반응을 보이다.js는 효율적인 가상 DOM을 구성하는데 문서 대상 모델 또는 vDOM이라고 부른다.가벼운 DOM 트리를 생성하여 서버 측에 저장할 수 있습니다.이러한 작업의 이점 중 하나는 다음과 같습니다.

사용자가 인터넷 자원과 상호작용할 때 새로운 vDOM을 만들고 있습니다.

이전 버전과 최근 버전을 비교했다.

위의 릴리즈에 차이가 있으면 vDOM이 재구성됩니다.

렌더링 작업 원리

매번setState() 통화할 때마다React 상태 변화를 알린다.그리고 React 호출 render() 방법으로 메모리의 구성 요소 표시 (Virtual DOM 를 업데이트하고 브라우저에 나타난 내용과 비교합니다.변경 사항이 있을 경우 React에서 DOM을 최소한으로 업데이트합니다.
서브어셈블리는 도구가 변경되었기 때문에 다시 렌더링해야 한다는 것을 알고 있습니다.
나는 자주 그것을 Git의 diff 메커니즘에 비유한다.구성 요소 트리에는 두 개의 스냅샷이 있는데 반응 비교를 할 수 있고 교환할 내용만 교환할 수 있다.
나는 렌더링 흐름을 설명하는 스마트 그래프를 찾고 있지만, 찾을 수 없다.하지만 그것에 대한 정보를 더 많이 읽을 수 있다here.

프레젠테이션

지금까지 우리는 정적 구성 요소만 논의했고 정적 데이터는 구성 요소 트리를 따라 전달되었다.일반적으로 시간에 따라 상태가 변하는 stateful component 모델을 만들어야 한다.
다음 텍스트에 표시할 텍스트를 입력할 수 있는 <input> 를 생각해 봅시다.

const InputBox = React.createClass({
  getInitialState () {
    return {
      text: ''
    }
  },

changeText (event) {
    this.setState({text: event.target.value})
  },

React의 장점과 단점.JS

있어요?ReactJS의 장점은 무엇입니까

업데이트 프로세스를 최적화하고 가속화합니다.

JSX는 구성 요소/블록 코드를 읽을 수 있도록 합니다.이것은 구성 요소가 어떻게 삽입되거나 조합되는지 보여 줍니다.

React의 데이터 바인딩은 동적 응용 프로그램을 만들기 위한 조건을 설정합니다.

프롬프트 렌더링.방법을 사용하여 DOM 작업의 수를 최소화하면 업데이트 프로세스를 최적화하고 가속화할 수 있습니다.

테스트 가능.React의 기본 도구는 코드를 테스트하고 디버깅하는 데 사용됩니다.

검색엔진 최적화가 우호적이다.React는 서버 측에서 사용자 측의 이벤트 처리 프로그램을 보여주고 연결함으로써 첫 번째 불러오는 체험을 나타낸다:

1. React.renderComponentToString is called on the server.

2. React.renderComponent() is called on the client side.

3. React preserves markup rendered on the server side, attaches event handlers.

최신.페이스북팀은 이 도서관을 지원한다.페이스북 커뮤니티는 조언이나 코드 예시를 제공할 수 있다.

React+ES6/7을 사용하여 응용 프로그램이 첨단 기술로 변하여 고부하 시스템에 적용된다.

ReactJS의 단점

학습 곡선.전체 기능 프레임워크가 아니기 때문에 사용자 인터페이스의 자유 라이브러리를 MVC 프레임워크에 어떻게 통합하는지 깊이 있게 이해해야 한다.

뷰 방향은 ReactJS의 단점 중 하나입니다.뷰 문제를 해결하려면 모델 및 디렉터를 찾아야 합니다.

같은 구성 방법을 사용하지 않고 응용 프로그램을 이용하면 검색엔진의 인덱스 문제를 초래할 수 있다.

많은 개발자들이 JSX React의 문서를 좋아하지 않아서 초보자들이 이 수첩들을 이해하기 어렵다.

React의 대형 라이브러리입니다.