우선,이 프레임 워크를 배우기 전에 다음 지식을 이해해야합니다.
1. 기본 JS 기본 사항
2. CSS 기본
3.NPM 패키지 관리 기본 사항
4. 웹 팩 빌드 프로젝트 기본 사항
5.ES6 사양
위의 5 가지 지식은 또한 다른 프론트 엔드 프레임 워크를 배우는 데 이해되어야하는 사전 작업입니다.
나는 JS와 CSS에 대해별로 말하지 않을 것입니다. NPM은 현재 가장 옹호적이고 지배적 인 패키지 관리 도구입니다. 여전히 Bower 또는 기타 도구를 사용하는 경우 고려할 수 있습니다. 새로운 세대의 포장 도구 인 Webpack은 이미 프론트 엔드 포장 도구를 지배했으며 Browserify와 비교하여 큰 이점을 가지고 있습니다. ES6 사양의 경우, 주류 브라우저는 현재 호환되지 않지만 Babel과 같은 변환기를 사용하여 변환 할 수 있습니다.
다른 주류 프론트 엔드 프레임 워크를 결합하여 단일 페이지 응용 프로그램을 구축 할 세 가지 기본 사항이 있다고 생각합니다 : 구성 요소, 라우팅 및 상태 관리 . 그런 다음이 세 가지를 기반으로 React를 소개 할 것입니다. 물론 추가 지식 포인트가 산재해질 것입니다.
구성 요소
React의 구성 요소 작성 및 호출은 주로 ES6의 모듈성 및 JSX 구문에 따라 다릅니다. 예는 다음과 같습니다.
// main.jsimport 'react-dom'import mycomponent from'./component.js'import './main.css'// main component class mydemo를 reclt.component {render (<div classname (<div classname) "(<mycmponent/<mycomponents/>) {mycomponents (<mycomponents/>)}에서'react'import {render}에서 'react'import {render}에서 반응합니다. />), document.getElementById ( 'app')) // component.js // 하위 컴포넌트 가져 오기 'react'Export 기본 클래스 MyComponent rectends react.component {{return (<div> <p>}}}}}}}} // main.css.box}입니다.vue.js 프레임 워크와 비교할 때 개인적으로 React 구성 요소가 작성된 방식은 VUE만큼 편안하지 않으며 구성 요소의 CSS 스타일은 여전히 구성 요소 외부에서 분리되어 있으므로 유지 관리가 그다지 편리하지 않습니다.
이 예에서 우리는 React의 Virtual Dom 및 JSX의 기능을 볼 수 있습니다. 다른 프레임 워크와 비교하여 React의 가상 DOM은 페이지의 성능을 향상시킬뿐만 아니라 XSS 공격 등을 방지 할 수 있습니다. 가상 DOM의 특정 원리는 여기에 소개되지 않습니다.
JSX 구문은 JS의 일종의 구문 설탕입니다. 이 구문 설탕을 통해 일부 기능을 쉽게 구현할 수 있습니다. 여기서 JSX는 XML의 구문을 순수한 JavaScript로 변환하고 XML 요소, 속성 및 하위 노드는 React.CreateElement의 매개 변수로 변환됩니다. 유사한 JS 구문 설탕에는 TypeScript 및 기타 유형이 포함됩니다.
라우팅
프론트 엔드 라우팅 메커니즘은 단일 페이지 응용 프로그램 (SPA)을 구축하는 데있어 가장 중요한 링크 중 하나입니다. 프론트 엔드 라우팅을 통해 매번 서버에서 모든 데이터를 얻지 않고 사용자 경험을 최적화하여 페이지를 사용자에게 신속하게 제시 할 수 있습니다.
React 라우팅은 React 라우터 에 따라 다릅니다. 반응 라우터는 UI 및 URL을 동기화합니다. 코드 버퍼링로드, 동적 라우팅 매칭 및 올바른 위치 전환을 설정하는 것과 같은 간단한 API 및 강력한 기능이 있습니다.
다음은 React 라우팅의 예입니다.
import React, 'react-dom'import {react-dom'import {rout, route, indexroute, link, browserhistory}의'react'import {render}의 import react, {component}} 'react-router'const active = {color :'red '} component {render () {rinter (<h1> <h1> my router <li> <li> <h1> <h1>. to = "/"activeStyle = {active}> home </link> </lip> </li> <li> <link to = "/user"activestyle = {active}> 사용자 페이지 </link> </li> </ul> {this.props.children} </div>)}} class.component {</h2> </h2>) {div> </h2>) }} 클래스 사용자는 rect.component {render () {return (<div> <h2> 사용자 </h2> </div>)}} reender ((<router history = {browserHistory}> <Route Path = "/"component = {app}> <indexroute component = {index}/> </route> </router>), document.getElementById ( 'app'))React에 대한 하나의 라우팅 방법 만 여기에 나열됩니다. 다른 프레임 워크와 비교할 때 React 라우팅의 구문은 이해하기 쉽습니다.
상태 관리
주 경영진은 필요한 1 페이지 응용 프로그램이 아닙니다. 이를 사용하면 통일 된 방식으로 각 상태의 변경 사항을 관리하여 전체 프로젝트 프로세스를 명확하고 유지 관리 할 수 있습니다. React 구현 상태 관리는 공식적으로 권장되는 Redux를 사용할 수 있습니다.
Redux는 엄격한 단방향 데이터 흐름을 사용합니다. 전체 응용 프로그램 상태는 객체 트리에 저장 되며이 객체 트리는 유일한 저장소에만 존재합니다.
프로젝트 예
여기에 React를 사용하여 단일 페이지 웹 사이트를 작성했으며 페이지는 다음과 같습니다.
술책
위의 예에서 Ajax 상호 작용을 위해 Fetch를 사용했기 때문에 여기에 Fetch를 간략하게 소개합니다.
현재 인기있는 약속 방법을 사용하는 차세대 Ajax 기술로 Fetch를 사용할 수 있습니다.
Fetch를 사용하여 Ajax를 작성하여 다음과 같은 데이터와 상호 작용할 수 있습니다.
// 데이터 메소드 가져 오기 fetchfn = () => {fetch ( '../../ data.json') .then ((res) => {console.log (res.status); return res.json ()}) .then ((data) => {this.setstate ({list : data.listdata}). Console.log (e.message)})}요약
프레임 워크를 배우는 데있어 가장 중요한 것은 기술을 배우는 것이 아니라 문제 해결 아이디어를 배우는 것입니다. React의 틀을 배우면 독특한 새로운 기능에서 새로운 사고 방식을 발견 할 수 있습니다. 사고 수준이 확장 될 때만 프론트 엔드의 바다에서 자유롭게 비행 할 수 있습니다. 이 기사가 모든 사람이 React를 배우는 데 도움이되기를 바랍니다.