1. RECTJ 소개
React는 최근 매우 인기있는 프론트 엔드 개발 프레임 워크입니다. React는 Facebook의 내부 프로젝트에서 시작되었습니다. 회사는 시장의 모든 JavaScript MVC 프레임 워크에 만족하지 않았기 때문에 Instagram 웹 사이트를 설정하기 위해 자체 세트를 작성하기로 결정했습니다. 내가 그것을 만든 후, 나는이 것들이 매우 유용하고 2013 년 5 월에 문을 열었다는 것을 알았습니다. React의 디자인 아이디어는 매우 독특하기 때문에 혁신적이고 혁신적이며 뛰어난 성능이 있지만 코드 논리는 매우 간단합니다. 따라서 점점 더 많은 사람들이주의를 기울이고 사용하기 시작하여 미래의 웹 개발을위한 주류 도구 일 수 있다고 믿고 있습니다.
Reactjs 공식 웹 사이트 주소 : http://facebook.github.io/react/
github 주소 : https://github.com/facebook/react
Reactjs 중국 주소 : http://reactjs.cn/react/docs/getting-started.html
React 란 무엇입니까?
React는 사용자 상호 작용 인터페이스를 개발하기 위해 Facebook에서 작업하는 뛰어난 프로그래머가 개발 한 JS 라이브러리입니다. 소스 코드는 Facebook과 커뮤니티의 우수한 프로그래머에 의해 유지되므로 기술 지원을 제공하기 위해 매우 강력한 기술 팀이 있습니다. React는 구성 요소화, JSX, Virtual DOM 등과 같은 많은 새로운 것을 가져옵니다. 가상 DOM은 렌더링 구성 요소를 매우 빠르게 만들어 DOM을 자주 작동하는 무거운 작업에서 우리를 자유롭게합니다. REACT를 아는 사람은 MVC의 V 층에 더 집중한다는 것을 알고 있습니다. 플럭스와 같은 다른 것들과 결합하여 강력한 응용 프로그램을 쉽게 구축 할 수 있습니다.
2. Reactjs 기능
1. 가상 Dom
DOM Diff 알고리즘을 통해 차별화 된 부품 만 전체 페이지를 렌더링하지 않고도 업데이트되어 효율성이 향상됩니다.
2. 구성 요소
페이지를 논리적 구조 및 스타일을 포함한 여러 구성 요소로 나눕니다.
구성 요소에는 자체 논리 만 포함되어 있으며, 구성 요소를 업데이트 할 때 예측할 수 있으며 유지 보수에 도움이됩니다.
이 페이지는 여러 구성 요소를 분할하고 재사용 할 수 있습니다
3. 단방향 데이터 흐름
데이터는 최상위 구성 요소에서 하위 구성 요소로 전달됩니다
데이터 제어 가능
3. React를 시작합니다. 안녕하세요, 세계. 먼저, JSX가 무엇인지 이해합시다.
React의 핵심 메커니즘 중 하나는 메모리에서 생성 될 수있는 가상 DOM : 가상 DOM 요소입니다. React는 가상 DOM을 사용하여 실제 DOM에서의 작업을 줄이고 성능을 향상시킵니다. Real Native DOM과 유사하게 가상 DOM은 JavaScript를 통해 만들 수도 있습니다.
var child1 = React.createElement ( 'li', null, 'First Text Content'); var child2 = react.createElement ( 'li', null, 'second text content'); var root2 = react.createElement ( 'ul', {className : 'my-list'}, child1, child2); React.render (<div> {root2} </div>, document.getElementById ( 'container5'));이 메커니즘을 사용하여 JavaScript를 사용하여 JavaScript를 사용하여 실제 DOM을 생성 할 수있는 것처럼 완전한 인터페이스 DOM 트리를 구축 할 수 있습니다. 그러나 이러한 코드는 잘 읽을 수 없으므로 React Invented JSX를 발명하고 친숙한 HTML 구문을 사용하여 가상 DOM을 만듭니다.
var root = (<ul classname = "my-list"> <li> 첫 번째 텍스트 내용 </li> <li> 두 번째 텍스트 내용 </li> </ul>); React.render (<div> {root} </div>, document.getElementById ( 'container6'));4. 반응에서 Hello를 시작하는 5 가지 방법
방법 1
<div id = "example1"> </div> <script type = "text/jsx"> react.render (// direct html <h1 classname = "classn1"> 1 Hellow Direct Html World </h1>, document.getElementById ( 'exames1')); </script>
방법 2
<div id = "example2"> </div> <script type = "text/jsx"> react.render (// 요소 생성 요소 생성 직접 react.createElement ( 'h1', {classname : 'classn2'}, '2 Hello, 직접 요소 생성!방법 3
<div id = "example3"> </div> <script type = "text/jsx"> var createel = react.createclass ({render : render () {// return <h1> hlelly 구성 요소 생성 html world </h1> // 괄호가 없는지 (<h1 classname = 'classn3'> 3 Hellow Component Creational html World </h1>);}}); React.render (// 요소 만들기 <createel/>, // 또는 더블 브래킷 <createel> </createel> document.getElementById ( 'example3')); </script>방법 4
<div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass ({// jsx 모드에서 렌더 생성 직접 렌더링 : function () {return (returt.createElement ( 'h1', {classname : "4 hello, jsx mode!")); // 구성 요소 메소드에서 요소 작성 react.createElement (jsxcreateel, null), document.getElementById ( 'example4')); </script>방법 5
<div id = "example5"> </div> <script type = "text/jsx"> var hello = react.createClass ({// 템플릿 hello render : function () {return (<span> {this.props.data} </span>)}}}); var world = react.createclass (<// 템플릿 렌더 () {emplate () {emplate () 스티칭 </span>)}}); react.render (// 2 템플릿 구성 요소에서 요소 생성 <h1 classname = "classn5"> <hello data = '5 hello'/<world/> </h1>, document.getElementByid ( 'example5'); </script>5. 위의 결과 그림
첨부 된 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 제목이 붙은 문서 </title> <meta name = "viewport"content = "초기 스케일 = 1.0, 사용자-스케일 가능 = no, maxum-scale = 1, width = device-width"/> <body> <style>*{Margin : 0; 패딩 : 0;} 바디 {배경 :#333;}#box {배경 : url (loveimg/qioa-fxehfqi8208393.jpg) 무리 센터 상단; 너비 : 550px; 테두리 : 8px 솔리드 #ffff; -webkit- 박스 크기 : 국경 박스; 여백 : 50px auto;}#example1,#example2,#example3,#example4,#example5 {margin : 20px auto; 너비 : 100%; 배경 : RGBA (255,255,255, .3); 패딩 : 5px 10px; 글꼴 크기 : 13px; 색상 :#f1f1f1; -webkit-box-sizing : Border-Box; . type = "text/jsx"> react.render (// 요소를 직접 생성하는 요소 React.createElement ( 'h1', {classname : 'classname :'classnam : '2 Hello, 직접 요소 세계 생성! createel = react.createClass ({render : function () {// return <h1> Hellow 구성 요소는 html world </h1> // 괄호가 있거나없는 반환 (<h1 className = 'classn3'> 3 Hellow Component가 HTML World </h1>); <createel> </createel> document.getElementById ( 'example3')); </script> <div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass ({// jsx 직접 렌더링 () {return (returt.createelment (h1 ', {classname : "classn4"}, "4 Hello, JSX에서 직접 생성!"))})); React.Render (// 구성 요소의 요소 생성 요소 React.CreateElement (jsxcreateel, null), document.getElementById ( 'example4')); hello = react.createClass ({// 템플릿 hello render : function () {return (<plat> {the.props.data}}}}); var world = react.createClass ({// template world render : function (<span> 및 World Template Stitching </span)}; 구성 요소 <h1 classname = "classn5"> <hello data = '5 hello'/> <world/> </h1>, document.getElementByid ( 'example5')); </script> </div> <script src = "build/react.min.js"> </script> <script src = "build/jsxtransformer.js"> </script> </body> </html>다음은 여러분을위한 몇 가지 추가 지식입니다.
용어를 반응합니다
반응 요소
HTML 요소를 나타내는 JavaScript 객체. 이 JavaScript 객체는 최종적으로 해당 HTML 요소로 컴파일됩니다.
구성 요소
하나 이상의 반응 요소를 포함하여 반응 요소를 캡슐화합니다. 구성 요소는 페이징, 사이드 바 탐색 등과 같은 재사용 가능한 UI 모듈을 만드는 데 사용됩니다.
JSX
JSX는 XML과 유사하게 React에 의해 정의 된 JavaScript 구문 확장자입니다. JSX는 선택 사항이며 JavaScript를 사용하여 React Applications를 작성할 수 있지만 JSX는 React 응용 프로그램을 작성하는 간단한 방법을 제공합니다.
가상 돔
Virtual Dom은 DOM 트리를 시뮬레이션하는 JavaScript 객체입니다. React는 가상 DOM을 사용하여 UI를 렌더링하고 가상 DOM의 데이터 변경을 듣고 이러한 변경 사항을 UI로 자동 마이그레이션합니다.