이 기사에서는 Facebook 엔지니어가 사용자 인터페이스 구축을 위해 개발한 Javascript 라이브러리인 React.js의 코드 예제와 고급 개념을 제공합니다. 귀하는 ReactJS 전문가이시며 이러한 코드를 개선해야 한다고 생각하시면 제안 사항을 보내주시면 적시에 적절하게 이 기사/코드를 업데이트하겠습니다.
몇 가지 코드를 계속 게시하기 전에. 예를 들어, 특별히 언급해야 할 점은 최근에 AngularJS에서 코드를 작성하고 있기 때문에 초보자가 ReactJS를 배우는 것이 조금 어려울 것이라는 점입니다. UI 작업을 수행합니다. 두 가지의 주요 차이점을 비교하는 또 다른 블로그 게시물을 작성하겠습니다.
그러나 높은 수준에서 ""Steep" 학습 경로를 약간 사용한 이유는 다음과 같습니다.
구성 요소 지향: ReactJS는 구성 요소 지향입니다. 즉, UI 요소를 구성 요소로 처리해야 합니다. 흥미롭게도 구성 요소는 구성 가능합니다. 이는 구성 요소가 하나 이상의 내부 구성 요소를 가질 수 있음을 의미합니다. 다음 코드는
JSX 구문을 보여줍니다. 흥미로운 JSX(XML 유사) 구문을 사용하여 코드를 작성합니다. JSX 변환기(사전 컴파일러)는 이 구문 구조를 명시적인 JavaScript로 변환하는 데 사용됩니다
이벤트 프록시 모델: 이벤트 위임 모델을 따라 이벤트를 캡처합니다
다음은 다음과 같습니다. 코드:
구성 요소
이벤트 위임
JSX 구문
다음은 구성 요소가 구현한 내용에 대한 간략한 설명입니다
- 사용자가 사용자 이름을 입력할 수 있는 입력 상자 요소입니다. 다음 기사에서 설명하겠지만 이 입력 상자는 실제로 "Hello, userName"을 표시하는 데 사용되는 "UserName" 구성 요소
- div 레이어 요소입니다. 다음 글에서 언급하겠지만 이 div 레이어는 실제로 "HelloText" 컴포넌트입니다.
다음은 디자인 방법입니다. 또한 아래 개념을 나타내는 코드를 찾으십시오.
SayHello: 구성 가능한 구성 요소
SayHello는 두 개의 구성 요소를 포함하는 상위 구성 요소입니다. 이 상위 구성 요소는 두 개의 내부 구성 요소로 구성됩니다. 그 중 하나는 사용자에게 이름을 입력하는 기능을 제공하는 UserName이고, 다른 하나는 Hello, world와 같은 텍스트를 표시하는 HelloText입니다. 이 상위 구성 요소는 다음 세 가지 API를 정의합니다:
getInitialState
handlerNameSubmit
render(이것은 필수 인터페이스이며, 구성 요소는 React가 응답하도록 지시하기 위해 render를 정의해야 합니다. 구성 요소 렌더링)
/ // This is the parent component comprising of two inner components // One of the component is UserName which is used to allow user to enter their name // Other component is HelloText which displays the text such as Hello, World // var SayHello = React.createClass({ // This is used to set the state, "data" which is // accessed later in HelloText component to display the updated state // getInitialState: function() { return {data: 'World'} }, // It is recommended to capture events happening with any children // at the parent level and set the new state that updates the children appropriately handleNameSubmit: function(name) { this.setState({data: name}); }, // Render method which is comprised of two components such as UserName and HelloText // render: function() { return( <div> <UserName onNameSubmit={this.handleNameSubmit}/> <HelloText data={this.state.data}/> </div> ); } });
UserName 구성 요소
UserName 구성 요소에는 다음 두 가지 메서드가 있습니다.
handlerChange: 사용되는 onChange 이벤트 캡처
render: 구성 요소를 렌더링하는 데 사용됩니다.
var UserName = React.createClass({ handleChange: function() { var username = this.refs.username.getDOMNode().value.trim(); this.props.onNameSubmit({username: username }); this.refs.username.getDOMNode().value = ''; return false; }, render: function() { return( <form role="form" onChange={this.handleChange}> <div className="input-group input-group-lg"> <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/> </div> </form> ); } });
HelloText 구성 요소
HelloText 구성 요소에는 컴포넌트 렌더링에 사용되는 one method
render:包含了展示HelloText组件内容的代码 var HelloText = React.createClass({ render: function() { return ( <div> <h3>Hello, {this.props.data}</h3> </div> ); } });
전체 코드를 얻으려면 github hello-reactjs 페이지에 코드를 게시했습니다. 자유롭게 의견을 말하거나 제안해 주세요.
ReactJS의 Hello world 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!