js-stack-from-scratch : 8 – React

React, ReactDOM 설치

yarn add react react-do

빌드툴이 아니고 클라이언트에서 필요한 패키지라서 "dependencies" 에 설치된다.

이제 src/client/app,js 를 src/client/app.jsx 로 변경하고react 와 JSX 코드를 넣는다.

import 'babel-polyfill';

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Dog from '../shared/dog';

const dogBark = new Dog('Browser Toby').bark();

const App = props => (
  <div>
    The dog says: {props.message}
  </div>
);

App.propTypes = {
  message: PropTypes.string.isRequired,
};

ReactDOM.render(<App message={dogBark} />, document.querySelector('.app'));

JSX

1. 자바스크립트 코드에서 XML, HTML 요소를 그대로 편하게 넣을 수 있다. (“”없이) 바벨에서 JSX로드를 사용해서 native javascript 로 변경해준다.

var a = (
    <div>
        Welcome to <b>React CodeLab</b>
    </div>
);

를

"use strict";

var a = React.createElement(
  "div",
  null,
  "Welcome to ",
  React.createElement(
    "b",
    null,
    "React.js CodeLab"
  )
);

이런 식으로.
2. 여러 element 를 렌더링할때 <div></div> 같은 container 로 감싸야 함
3. if Else 를 사용할 수 없다. 3항 연산자 써야함

Props

컴퍼넌트 내부의 Immutable Data