GaramX

Facebook에서 공개한 Open Source.

공식튜토리얼은 여기에서 확인하세요.

• JSX - React에서 문법으로 사용
• postman server request확인하기위해서 ==== React 배우기 ==== - React시작하기 - Tic Tac Toe 게임 - React data grid component제작시(with ES6, TypeScript) - Webpack ==== Hello World! ==== 사전준비사항 * Node.js * 최신버전확인 * <code bash>npm -v</code> * <code bash>node -v</code> * npm upgrade * sudo npm install -g npm * Project 생성방법 - Node.js최신버전확인 * npm -v * sudo npm install -g npm - create-react-app * <code bash>npm install -g create-react-app</code> - create PROJECT - <code bash>create-react-app boeun</code> - <code bash>create-react-app boeun –scripts-version=react-scripts-ts</code> - 확인 - <code bash>npm start</code> - http://localhost:3000에서 확인하세요. - npm run build - npm test - npm run eject ==== ES6( ECMAScript6, ES2015 ) ==== ==== React란 무엇인가요? ==== React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리입니다. React는 여러 종류의 컴포넌트들을 가지고 있지만 우리는 React.Component의 서브클래스를 사용하여 시작할 것입니다. <code js> class ShoppingList extends React.Component{ render(){ return(

        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }

  }

  Example usage:<ShoppingList name=“Mark”/> </code> XML과 비슷한 재밌는 태그들을 사용할 것입니다. 작성한 컴포넌트는 React에게 무엇을 랜더링하고 싶은지 알려줍니다. 그러면 React는 데이터가 변경될 때 올바른 컴포넌트들을 업데이트하고 랜더링합니다. 여기에서 ShoppingList는 React컴포넌트 클래스 혹은 React컴포넌트 타입입니다. 하나의 컴포넌트는 props라 불리는 파라미터를 사용하고, render메서드를 통해 표시할 뷰 계층 구조를 반환합니다. render메서드는 랜더링하길 원하는 내용을 반환하면 React는 그 내용을 가져와 스크린에 랜더링합니다. 특히 render는 랜더링할 간단한 내용인 React엘리먼트를 반환합니다. 대부분의 React개발자들은 이 구조를 더 쉽게 작성할 수 있게 해주는 JSX라는 특별한 문법을 사용합니다. <div/>라 쓰면 빌드시 React.createElement('div')로 변환됩니다. 위의 코드는 아래의 코드와 동일합니다. <code javascript> return React.createElement('div',{className:'shopping-list'}, React.createElement('h1', /* … h1 children … */), React.createElement('ul', /* … ul children … */)); </code> 코드를 정리하면 <code html>

  <h1>
    Shopping List for {props.name}
  </h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>

  ; </code> <code javascript> React.createElement( “div”, { className: “shopping-list” }, React.createElement( “h1”, null, “Shopping List for ”, props.name ), React.createElement( “ul”, null, React.createElement( “li”, null, “Instagram” ), React.createElement( “li”, null, “WhatsApp” ), React.createElement( “li”, null, “Oculus” ) ) ); </code> createElement()에 대해 더 많은 내용이 궁금하다면 API reference에 자세한 설명이 있습니다. 튜토리얼에서는 createElement()를 직접적으로 사용하지 않습니다. 대신 JSX를 사용할 것입니다. JSX에서는 중괄호 안에 JavaScript문법을 사용할 수 있습니다. 각 React엘리먼트는 변수에 저장하거나 프로그램에 여기저기에 전달할 수 있는 실제 JavaScript객체입니다. ShoppingList컴포넌트는 내장된 DOM컴포넌트만 랜더링하지만<ShoppingList/>코드를 작성하여 커스텀React컴포넌트를 쉽게 구성할 수 있습니다. 각 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있습니다. 이때문에 간단한 컴포넌트들로 복잡한 UI를 구현할 수 있습니다.