반응이란 무엇입니까? 반응의 기본 사용법 소개(예제 포함)

寻∝梦

풀어 주다： 2018-09-11 10:47:14

원래의

1725명이 탐색했습니다.

이 글에서는 주로 react에 대한 몇 가지 기본 지식을 다루므로 모든 사람이 React의 기본 사항에 대해 더 많이 배울 수 있습니다. 지금 이 글을 함께 읽어보시죠

React 시리즈 1 소개(React 첫 소개)

1. React 소개

React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다. React는 주로 UI를 만드는 데 사용되는데, 많은 사람들이 React가 MVC의 V(view)라고 생각합니다. React는 Facebook의 내부 프로젝트로 시작되었습니다. React는 성능이 뛰어나고 코드 로직이 매우 간단합니다.

2. React의 특징

선언적 디자인 −React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.
Efficient −React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.
유연성 −React는 알려진 라이브러리 또는 프레임워크와 잘 작동합니다.
JSX − JSX는 JavaScript 구문의 확장입니다. React 개발에서는 반드시 JSX를 사용하는 것은 아니지만 권장됩니다.
Components − React를 통해 구성 요소를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다.
단방향 응답 데이터 흐름 − React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄여 기존 데이터 바인딩보다 간단합니다.

3. 기본 사용법 소개

基本模板<!DOCTYPE html>
   <html>
     <head>
       <script src="../build/react.js"></script>
       <script src="../build/react-dom.js"></script>
       <script src="../build/browser.min.js"></script>
     </head>
     <body>
       <p id="example"></p>
       <script type="text/babel">

       </script>
     </body>
   </html>
   模板中代码一共用了三个库： react.js 、react-dom.js 和 Browser.js
   需要注意的是，它们必须首先加载。
   1）react.js是React的核心库。
   2）react-dom.js是提供与DOM相关的功能。
   3）Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线时，应将它放到服务器完成。
   $ babel src --out-dir build
   这个命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。

로그인 후 복사

참고: 마지막 스크립트 태그의 유형 속성은 text/babel입니다. 이는 React의 고유한 JSX 구문이 JavaScript와 호환되지 않기 때문입니다. JSX를 사용하는 경우에는 type="text/babel"을 추가해야 합니다. JSX를 사용해야 한다면 script 태그의 type 속성을 text/babel로 설정해야 합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 참조 매뉴얼 칼럼을 참조하세요.)

补充一点：
   使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，其语法风
格类似于HTML语法风格.不过，使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对
React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行，Babel内嵌了对JSX的支持。
   在运行时引用babel.js虽然容易使用而且还很方便，不过并不是一种好的方案，因为需要转换，所以更加耗时，
这一缺点在产品阶段显得更加明显。Babel是React团队选择的在使用React过程中转换ES*和JSX为ES5语句的工具。实际
   Babel主要用途是一个JavaScript转换器，它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说，Babel主
要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。babel.js与browser.js的关系 babel的
浏览器版本为browser.js（未精简）和browser.min.js（已精简）。所以最后一个文件也可以引入babel.min.js。

로그인 후 복사

4. npm을 통해 React 사용(create-react-app을 사용하여 React 개발 환경을 빠르게 구축하세요)

create-react-app Facebook에서 가져온 명령입니다. 구성 없이 React 개발 환경을 빠르게 구축할 수 있습니다. create-react-app에 의해 자동 생성된 프로젝트는 Webpack + ES6를 기반으로 합니다.

执行以下命令创建项目(支持node.js和npm)：
$ npm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start

로그인 후 복사

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트react 사용자 매뉴얼 칼럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 반응이란 무엇입니까? 반응의 기본 사용법 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

반응이란 무엇입니까? 반응의 기본 사용법 소개(예제 포함)

React 시리즈 1 소개(React 첫 소개)

1. React 소개

2. React의 특징

3. 기본 사용법 소개

4. npm을 통해 React 사용(create-react-app을 사용하여 React 개발 환경을 빠르게 구축하세요)