React Web의 목적과 중요성은 매우 명확합니다. React Native Code를 웹에서 실행하고 다양한 모바일 터미널에서 코드 세트를 실행하게하십시오. 프론트 엔드 및 비즈니스의 경우, 이것은 개발 효율성의 질적 개선입니다. 프로젝트의 초기 단계에서 우리는 비슷한 질문으로 React 팀과 상담했습니다. 그들의 팀 @vjeux의 핵심 반 친구는 이것이 매우 멋진 일이며 그들이 앞으로하고 싶은 일이라고 생각했습니다. 어쩌면 Android 용 React Native 일 때 React Web이 출시 될 수 있습니다. (YY)
기술 아키텍처
React Native를 기반으로 한 몇 가지 적응 솔루션이 있습니다.
1. 브리지 표준을 개발하고 RN과 RW는 각각 최적의 방식 으로이 표준 세트를 구현합니다.
예를 들어, Flex 레이아웃을 기반으로, 우리는 일관된 플렉스 구성 요소, <flex>, <cell> 등을 구현합니다.
2. RN과 완전히 정렬 된 RW는 RN이 구현할 수있는 모든 API를 구현합니다.
토론에서 후자는 마침내 선택되었습니다.
React Web이라는 개념으로 인해 REAct 기본 코드가 웹 쪽에서 실행되도록 RW는 RN과 분리 된 구조 및 포장 도구 일 뿐이며 RW의 구현이 그다지 중요하지 않다는 것을 결정합니다. 그런 다음 전반적인 기술 방향은 매우 명확합니다. RN 일관된 스타일, 구성 요소 및 API를 구현하고 마지막으로 건설 도구를 통해 웹 버전으로 컴파일하는 것입니다.
예
React 웹 프로젝트의 생성 과정을 살펴 보겠습니다.
1 단계 : React Web을 설치하고 관련 구성을 수행하십시오
이 단계는 주로 React-WEB 패키지 및 관련 종속성을 설치하고 Webpack Packaging Scripts를 구성하는 것입니다.
이 단계를 단순화하기 위해 명령 줄 도구 React-Web-Cli를 개발했으며, 이는 두 줄의 명령을 실행하면됩니다. 동시에 명령 줄 도구는 디버깅 서버, 포장 및 기타 기능 시작을 지원하며 나중에 소개됩니다.
CLI 도구 설치 :
NPM 설치 React-Web-Cli -g
React Web 등을 설치하고 구성하십시오.
React-Web init <현재 프로젝트 디렉토리>
실행이 완료되면 NPM 설치 관련 라이브러리가 프로젝트 디렉토리에서 생성되며 Web/WebPack.config.js 파일은 작성된 구성으로 자동으로 작성됩니다. 현재 디렉토리 구조는 다음과 같습니다.
.├ 통로 readme.md├|) index.Android.js├|) index.ios.js├|) ioS/├ 들어가 Package.json└|) Web/└ ─ webpack.config.js
2 단계 : 항목 파일을 추가하고 관련 구성을 만듭니다.
각 프로젝트에는 입력 파일이 있어야하며, 일반적으로 다른 구성 요소를 소개하고 호출하고 INDEX.IOS.JS와 같은 프로젝트를 초기화하는 데 사용되는 입력 파일이 있어야합니다. React Native File Naming Specification을 준수하기 위해 INdex.Web.js를 항목 파일로 작성하고 파일이 WebPack의 항목 파일을 지정해야합니다. Web/webpack.config.js 파일을 열고 구성 변수를 수정하십시오.
var config = {paths : {src : path.join (root_path, '.'), index : path.join (root_path, 'index.web'),},};그런 다음 index.web.js 파일을 만듭니다. 이 파일은 실제로 Index.ios.js와 매우 유사하지만 약간 다릅니다. 주요 차이점은 iOS가 AppRegistry.registerComponent ( 'awes', () => awes) 만 필요하다는 것입니다. Xcode의 기본 코드가 JS 코드를 수신하고 처리 할 수 있도록하려면 웹 쪽을 사용하기 전에 DOM 노드에 삽입해야합니다. 따라서 index.web.js 하단에 다음 코드를 추가해야합니다.
AppRegistry.registerComponent ( 'awes', () => awes); if (platform.os == 'web') {var app = document.createElement ( 'div'); document.body.appendchild (app); AppRegistry.runApplication ( 'awes', {roottag : app});}그런 다음 플랫폼 구성 요소를 상단 요구 섹션에 도입해야합니다. 이러한 방식으로 구성 부분이 처리되었습니다. Debugging Server를 시작하려면 React-web start 명령을 실행하십시오!
당신은 그것을 마음대로 수정할 수 있습니다. 그것은 React 기본 시뮬레이터의 경험과 거의 동일합니다.
3 단계 : 웹 버전 코드를 테스트하고 포장합니다
웹 쪽 수정 및 개발 및 테스트를 마치면 패키지 및 게시 할 수 있습니다. React-Web-Cli 도구가 포장 한 명령은 다음과 같습니다.
React-Web 번들
포장 후 파일은 웹/ 출력/ 디렉토리에 저장됩니다. index.html을 직접 열 수 있습니다 (앱이 작업을 요청한 경우 로컬 서버에서 확인해야 함)를 확인한 후 확인 후 게시 할 수 있습니다.
이 과정에서 무슨 일이 있었습니까?
호기심 많은 학생들은 이것을 볼 때 몇 가지 질문이있을 수 있습니다. 위 명령 줄 도구의 일부 명령은 무엇을 했습니까? React Web Package가 원시 코드를 웹쪽에 사용하는 코드 사본으로 반응하는 이유는 무엇입니까? React 웹은 안전하고 신뢰할 수 있습니까? 내부는 무엇입니까?
여기서는 React Web의 구현 원리와 실제로 한 단계를 소개하겠습니다.
React Web Implements 웹 쪽의 기본 구성 요소에 반응
React는 플랫폼 환경에서 코드를 분리하여 레이어를 추가하여 개발자가 플랫폼 환경 수준에서 일부 처리를 수행하여 동일한 코드가 더 많은 플랫폼 환경 등에 적응할 수 있도록하십시오.
예를 들어, React-Canvas는 React의 구문에 따라 코드를 작성하고 플랫폼 환경 수준에서 일부 처리를 수행합니다 (React 코드를 실행하고 캔버스로 렌더링). 그런 다음 특정 목표 (모바일 측면에서 성능 향상)를 달성합니다.
React Native에서는 코드가 iOS 및 Android에서 동시에 실행되는 것도 마찬가지입니다. React Native Team은 해당 플랫폼의 기본 앱에서 일부 처리를 수행하여 React 구문을 실행하는 코드를 구문 분석 할 수 있습니다.
동형 적용도 있습니다. 서버는 react + node.js를 사용하여 HTML을 생성하고 클라이언트는 React를 사용하여 클라이언트 관련 상호 작용 및 기능을 얻습니다. 마찬가지입니다.
이를 위해 React V0.14.X 버전은 두 개의 라이브러리 인 React and React-DOM으로 시작하여 실제로 브라우저 플랫폼의 특별 처리를 제거하여 React-DOM 라이브러리만으로 전환했습니다.
React Native의 특별한 점은 구성 요소의 가장 낮은 레벨 구현이 기본의 구현이므로 Span 및 Div와 같은 태그를 지원하지 않는다는 것입니다. 애니메이션 등은 인터페이스 렌더링을 위해 Native를 직접 호출합니다. 따라서 웹 측은 지원되지 않지만 대부분의 구성 요소는 웹 기술을 사용하여 시뮬레이션 및 구현할 수 있습니다. 애니메이션은 CSS3에서 사용될 수 있고, 기본 요소는 동일한 HTML 태그로 시뮬레이션 될 수 있으며 레이아웃 및 호환성 문제는 CSS에서 처리 될 수 있으므로 React Web은 웹 기술을 사용하여 React Native 구성 요소를 다시 구현해야 하며이 레이어의 도움으로 여러 플랫폼에서 코드를 구현할 수 있습니다.
매우 간단한 예를 들기 위해 텍스트 구성 요소 :
React Native의 구현은 React Native의 많은 기본 코드 구현을 호출합니다.
웹 쪽의 경우 <Span> 태그를 사용하여 텍스트 라인을 출력하여 React Web의 구현은 <Span> 태그를 직접 생성하며 일부 이벤트 또는 무언가를 바인딩해도 괜찮습니다.
UI Explorer 데모에서 실행할 수있는 React Native 구성 요소를 자신있게 사용할 수 있습니다.
WebPack은 포장 대상을 전환하는 데 도움이됩니다
웹 쪽과 호환되는 구성 요소를 만들면 요구 사항 ( 'react-web')으로 패키지 될 구성 요소의 필요한 모든 ( 'react-native')를 교체 할 필요가 없습니까? 그렇지 않으면 웹 구성 요소를 사용하여 패키지를 어떻게 만들 수 있습니까?
강력한 웹 팩에는이 문제를 해결하는 데 도움이되는 별명 구성 항목이 함께 제공됩니다.
해결 : {alias : { 'react-native': 'react-web', 'reactnativear': 'react-art',}, 확장 : [ '', '.js', '.jsx'],},},이런 식으로 포장 할 때 요구 ( 'reft-native')가 REACT-WEB 패키지로 대체되며 React-WEB의 모듈은 REACT-Native와 일치하므로 코드가 교체하지 않고 작동 할 수 있습니다.
또한 플러그인을 사용하여 다른 소개 방법을 구현할 수 있습니다. 아래를 참조하십시오.
서둘러 방법을 통해 구성 요소를 소개하여 성능을 향상시킵니다
CommonJS 사양을 지원하는 WebPack 및 기타 포장 도구는 파일의 모든 요구 사항을 함께 패키지합니다. React Native의 경우 코드의 크기는 관련이 없지만 모바일 웹의 경우 조금 더 중요합니다. 특히 프로젝트가 텍스트 구성 요소 만 필요하지만 요구 사항 ( 'react-web')이 모든 구성 요소를 포장하여 슬프다.
웹 팩 플러그인을 기반 으로이 문제를 해결하기 위해 구성 요소를 소개하는 또 다른 방법이 있습니다. 이 방법을 사용하려면 Webpack 플러그인을 습격 할 수 있습니다. 기본 웹 팩 구성이로드되었습니다. 다음과 같이 구성 요소에서 직접 사용할 수 있습니다.
var text = require ( 'reacttext');
이전의 대신 :
var {text} = 요구 ( 'reft-native');이런 식으로 WebPack이 패키지되면 전자는 해당 구성 요소의 내용 만 포장하여 크기를 줄이고 성능을 향상시킬 수 있습니다. 이것은 어떻게 달성됩니까?
플러그인의 웹 팩이로드되면 모든 구성 요소가 먼저 스캔되고 구성 요소 헤더의 @providesModule의 정보 (예 : 텍스트 구성 요소의 정보)가 다른 파일에서 구성 요소 이름이 필요한 경우 파일이 포장 용으로 자동 위치됩니다. 동시에 플랫폼을 구별 할 수도 있습니다. 이름이 같은 경우에도 해당 파일을 포장 할 때 플랫폼이 차별화됩니다 (파일은 index.xxx.js의 이름 지정 규칙에 따라 결정됩니다).