ReactJS의 Hello world에서 시작됨

이 기사에서는 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 중국어 웹사이트를 주목하세요!