https://github.com/wonism/react-study

https://github.com/wonism/react-study

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/wonism/react-study
• Owner: wonism
• Created: 2016-04-06T03:01:31.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-06-01T03:03:42.000Z (over 9 years ago)
• Last Synced: 2025-01-12T16:11:24.872Z (about 1 year ago)
• Language: JavaScript
• Size: 166 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-tutorial

__LINK__

- [About React JS](https://github.com/wonism/react-study/blob/master/study/about-react.md)

- [JSX](https://github.com/wonism/react-study/blob/master/study/jsx.md)

- [State & Props](https://github.com/wonism/react-study/blob/master/study/state-and-props.md)

__Example Code__

```html

  

    

    React Tutorial

    

    

    

  

  

    


    

      class HelloWorld extends React.Component {

        propTypes: {

          name: React.PropTypes.string

        }


        render() {

          return <h1>Hello, { this.props.name }!</h1>

        }

      };

      HelloWorld.defaultProps = {

        name: "Jaewonism"

      };

      ReactDOM.render(

        <HelloWorld name="World"/>, document.getElementById('example')

      );

    

  

```

- React 를 사용하기 위해서는 react.js와 react-dom.js를 불러와야 한다.

- babel 은 ECMAScript 2015 를 사용 가능하게 해주는 라이브러리이다.

- HelloWorld 클래스를 만들고, propTypes를 통해 속성의 타입을 지정해준다.

  (name은 String 속성이다.)

- defaultProps 를 통해 name의 default 값을 "Jaewonism"으로 지정한다.

  (name이 초기화되지 않을 경우 Jaewonism)이 출력된다.

- ReactDOM.render 를 통해 컴퍼넌트를 렌더링한다.