React.js 시작하기

React.js ~이다. 유연하고 컴포넌트 기반 에 대한 자바 스크립트 라이브러리 대화 형 사용자 인터페이스 구축. 그것은 페이스 북이 창작하고 오픈 소스했다. Dropbox, AirBnB, PayPal 및 Netflix와 같은 많은 선도적 인 기술 회사에서 사용됩니다. React는 개발자가 데이터 무거운 앱 만들기 고통없이 업데이트 할 수 있습니다. 필요한 구성 요소 만 다시 렌더링.

반응은 에서 레이어보기 MVC 소프트웨어 디자인 패턴, 주로 DOM 조작에 중점을 둡니다.. 요즘처럼 모든 사람들이 React에 대해 이야기합니다.이 게시물에서 우리는 시작하기.

설치 반응

React를 설치할 수 있습니다. npm 패키지 관리자와 함께 또는 수동으로 필요한 라이브러리 추가 귀하의 HTML 페이지. 권장 사항입니다. 바벨과 반응하기 ~ 할 수있는 ECMAScript6 구문과 JSX를 사용하십시오. 당신의 반응 코드에.

네가 원한다면 수동으로 설치하십시오., 공식 문서에 추천 이 HTML 파일을 사용하십시오.. 을 클릭하여 페이지를 다운로드 할 수 있습니다. 파일> 다른 이름으로 페이지 저장 ... 메뉴를 클릭하십시오. 필요한 스크립트 (React, React DOM, Babel)도 react-example_files / 폴더. 그런 다음 다음 스크립트 태그를 HTML 문서의 섹션

그들을 다운로드하는 대신 React 스크립트를 추가 할 수 있습니다 CDN의 게다가.

또한 축소 판 위의 JavaScript 파일 중 :

당신이 오히려 npm으로 설치하기, 가장 좋은 방법은 반응 앱 만들기 페이스 북 인큐베이터 (Facebook Incubator)에서 만든 Github 레포 - 이것은 React docs가 권장하는 솔루션이기도합니다. React와 별도로, Webpack, Babel, Autoprefixer, ESLint 및 기타 개발자 도구가 포함되어 있습니다.. 시작하려면 다음 CLI 명령을 사용하십시오.

 npm install -g create-react-app create-react-app my-app cd my-app npm start

준비가되면 새로운 React 앱에 액세스하십시오. ~에 localhost : 3000 URL :

자세한 내용을 보려면 React 설치 방법, 체크 아웃 설치 지침 문서.

React와 JSX

의무는 아니지만 JSX 문법을 사용한다. 귀하의 React 애플 리케이션. JSX는 다음을 의미합니다. 자바 스크립트 XML, 그리고 그것 정규 자바 스크립트로 변환. JSX의 가장 큰 장점은 자바 스크립트 파일에 HTML을 포함시킬 수 있습니다., 그러므로 그것은 반응 요소를 더 쉽게 정의하게 만든다..

다음은 JSX에 대해 알아야 할 가장 중요한 사항입니다.

그 태그들 소문자로 시작한다. (하단 낙타의 경우)가 렌더링됩니다 정규 HTML 요소로.
그 태그들 대문자로 시작하다 (위의 낙타의 경우)가 표현된다. 반응 성분으로.
모든 코드 중괄호 ... 안에 쓰여있다. 해석하다 리터럴 자바 스크립트로.

더 많은 것을 알고 싶다면 JSX를 React와 함께 사용하는 법 문서에서이 페이지를 확인하십시오. 기본 JSX 문서 당신은 JSX 위키를 살펴볼 수 있습니다..

반응 요소 만들기

반응은 구성 요소 기반 아키텍처 개발자가 만드는 재사용 가능한 구성 요소 다른 문제를 해결하기 위해서. React 구성 요소는 몇 개 또는 다수로 구성됩니다. 반응 요소 그것은 React 애플 리케이션의 가장 작은 단위.

아래에서 볼 수 있습니다. 반응 요소의 간단한 예 HTML 페이지에 Click me 버튼을 추가합니다. HTML에서는

용기에 "myDiv" 될 ID 반응 요소가 채워진다.. 우리는 React 요소를

   우리는 React 요소를 ReactDOM.render () 방법 어느 두 가지 필수 매개 변수를 취합니다., 그만큼 반응 요소 () 및 그 컨테이너 (document.getElementById ( 'myDiv')). 자세한 내용은 반응 요소의 작동 원리 ~ 안에 “렌더링 요소” 문서 섹션.
 구성 요소 만들기
 반응 성분 아르 재사용 가능한 독립적 인 UI 유닛 데이터를 쉽게 업데이트 할 수 있습니다. 구성 요소는 하나 이상의 React 요소로 구성 될 수 있습니다.. 소품 아르 임의의 입력 구성 요소에 데이터를 전달하는 데 사용할 수 있습니다. React 구성 요소는 JavaScript 함수와 유사하게 작동합니다. 호출 될 때마다 어떤 종류의 산출물을 생성한다..
 다음 중 하나를 사용할 수 있습니다. 고전적인 함수 구문 또는 새로운 ES6 클래스 구문 에 반응 성분 정의. 이 기사에서는 바벨 (Babel)이 ECMAScript 6을 사용할 수 있도록하기 위해 후자를 사용하겠습니다. ES6없이 컴포넌트를 작성하는 방법에 관심이있는 경우 문서의 구성 요소 및 소품 페이지를 살펴보십시오.
 아래에서 간단한 반응 성분 우리는 예로서 창조하려고합니다. 사용자가 사이트에 로그인 한 후 사용자에게 표시되는 기본 알림입니다. 세 가지 데이터가 있습니다. 대소 문자 변경: 사용자 이름, 메시지 수 및 알림 수를 전달합니다. 소품으로.
  
각 React 구성 요소는 연장하다 React.Component 기본 클래스. 우리 구성 요소가 호출됩니다. 통계 이는 사용자에게 기본 통계를 제공하기 때문입니다. 첫째, 우리는 창조하다 통계 수업 와 더불어 클래스 통계는 React.Component ...를 확장합니다. 구문 다음에 우리는 그것을 화면에 렌더링한다. ~를 부름으로써 ReactDOM.render () 방법 (이전 섹션에서 이미 후자를 사용했습니다).
  클래스 통계는 React.Component render () return (  Hi this.props.name 님, not.props.notifications 개의 새 알림과 this.props.messages 개의 새 메시지가 있습니다.. 
 );  ReactDOM.render ( , document.getElementById ( "myStats")); 
 그 첫 번째 인자는 ReactDOM.render () 방법은 React 구성 요소의 이름 (), 그 소품 (이름, 알림, 과 메시지)를 값과 함께 사용합니다. 우리가 소품의 가치를 선언 할 때, 문자열은 따옴표로 묶인 (처럼 "존 도우") 및 숫자 값 중괄호 안에 (처럼 삼).
 자바 스크립트 덕분에 익숙한 className 대신에 수업 클래스 속성을 HTML 태그에 전달하려면className = "요약").
 일치하는 HTML 페이지는 다음과 같습니다.
          
    
 React docs에는 많은 다른 멋진 예제가 있습니다. 반응 구성 요소를 만들고 관리하는 법, 과 소품에 대해 무엇을 알아야 할까?.
 추가 읽기
 React로 페이스 북 소개 새로운 종류의 틀 프론트 엔드 개발로 MV * 디자인 패턴에 도전. 그것이 어떻게 작동하는지, 그리고 그걸로 무엇을 할 수 있고 할 수 없는지 더 잘 이해하고 싶다면, 다음과 같은 흥미로운 기사가 도움이 될 수 있습니다 :
 페이스 북의 블로그 포스트 왜 그들은 React를 만들었습니까?.
 Andrew Ray의 훌륭한 블로그 게시물 반응의 선과 악에.
 Codementor on React와 AngularJS의 비교 방법.
 FreeCodeCamp의 생각 여부 MVC가 프런트 엔드에서 죽었습니다..
 HackerNoon의 기사 반응 관련 성능을 최적화하는 방법.