어셈블리 생성

React.어쨌든 js의 특징은

구성 요소

가상 DOM

네.
React.js는 화면의 구성 요소를 구성 요소로 실현한다.
div 라벨 등으로 각양각색의 구성 요소를 둘러싸고 머리, 몸, 꼬리 등
각각의 구성 요소를 제작하여 최종적으로 하나의 구성 요소로 총결하다.

구성 요소로 만들기 위해 제작된 구성 요소는
같은 규격의 기능을 요구하는 페이지에서 다시 사용할 수 있다.
가상 DOM에 대해 개발자는 의식이 많지 않다(가상 DOM을 실현하기 위해 직접 DOM과 같은 약속을 가지고 놀면 안 된다는 것을 의식할 필요가 있다).
따라서 가상 DOM에 대한 설명을 다른 사람에게 넘겨주고 바로 구성 요소를 만들어 브라우저에 표시합니다.

index.>의 제작

우선, 작업 폴더/client에 구성 요소의 index를 표시합니다.제작 버전)을 참조하십시오.
이 차원의 출처는 임의적이지만, 이후에는
작업 폴더
신분증 ← 화면 측면의 출처
일종의 신분 감별죄 ← 보존 js
　┃　┗ index.html
　┣ node_module ← npm에 설치된 프로그램 라이브러리에 저장
　┣ package.json
봉화 9495;서버 ← 서버 측 소스 파일
이런 전제에서 대화를 진행하다.
index.>의 내용은 다음과 같습니다.
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>tutorial</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="./build/app.js"></script>
  </body>
</html>

생성된 구성 요소는 다음과 같습니다.<div id="content"></div>를 참고하십시오.<script src="./build/app.js"></script>이따가 설명할게요.

구성 요소 jsx의 생성

구성 요소 정의는 react의 고유한 xml 규약에 따라 진행됩니다.
index.구성 요소의 정의를 위해 js 파일을 만듭니다.
index.js (ver0.13 이전 상황)

var React = require('react');//React.jsのライブラリをimport

//コンポーネントを定義
var Index = React.createClass({
  render:function(){
    return (
        <p>hoge</p>
    );
  }
});

//id='content'の要素にコンポーネント「Index」を挿入してレンダリング
React.render(
  <Index />,
  document.getElementById('content')
);

[2016/05/18 보충]
위의 소스는 React0으로 작성됩니다.13을 기초로 한 것이기 때문에 0.14 이후에
이제 리액션 시작해.js〜React ver0.14〜
에 기재된 대로 반드시 실현해야 한다.
index.js(ver0.14 이후)

var React = require('react');//React.jsのライブラリをimport
var ReactDOM = require('react-dom');

//コンポーネントを定義
var Index = React.createClass({
  render:function(){
    return (
        <p>hoge</p>
    );
  }
});

//id='content'の要素にコンポーネント「Index」を挿入してレンダリング
ReactDOM.render(
  <Index />,
  document.getElementById('content')
);

<p>hoge</p>라<Index />라벨처럼 보이는 부분은 jsx에 해당한다.
React.createClass를 실행하여 구성 요소를 만듭니다.
"Render"라는 function에서 구성 요소의 내용 (규정 사항) 을 되돌려줍니다.
만약 jsx의 부분을 그대로 유지한다면 브라우저에 표시할 수 없습니다.
브라우저가 설명할 수 있도록 자바스크립트로 컴파일해야 합니다.

jsx 컴파일

reactify라는 프로그램 라이브러리를 사용하여 컴파일합니다.
프로그램 라이브러리 등을 포함해서 최종적으로 js로 귀결시키려면browserify도 사용합니다.
이 두 가지 처리를 함께 할 수 있도록 glop이라는 미션 주자를 사용한다.
※ reactify,browserify,glop에 대해 자세히 알고 싶은 사람은 구글을 방문하세요.
따라서 컴파일에 필요한 프로그램 라이브러리를 설치합니다.npm install gulp browserify reactify vinyl-source-stream --saveglop을 단독으로 실행할 수 있도록 터미널 자체도 설치해야 합니다.npm install gulp -g빈 작업을 설명합니다.작업 폴더 바로 아래에 다음과 같은 내용이 있습니다:glopfile.제작
gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var reactify = require('reactify');

gulp.task('browserify', function(){
  var b = browserify({
    entries: ['./client/scripts/index.js'],
    transform: [reactify]
  });
  return b.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./client/build'));
});

생성 후 glop 명령을 실행합니다.gulp browserify만약 순조롭게 진행된다면, {작업 폴더]/client/build에 적용됩니다.제이스를 만들었을 거예요.
index입니다.<script src="./build/app.js"></script>부분.
컴파일링이 끝난 후 index.브라우저에 > 을 표시하십시오.
어셈블리 정의의 컨텐트를 표시하면 OK입니다.

샘플 출처

다음 →이제 리액션 시작해.js~구성 요소 요약

Reference

이 문제에 관하여(이제 리액션 시작해.js~ 첫 번째 구성 요소~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kuniken/items/963cb977dffd3e662e40

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)