반응이란 무엇입니까? 반응의 기본 사용법 소개(예제 포함)
- 寻∝梦원래의
- 2018-09-11 10:47:141686검색
이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!