리액트 튜토리얼


React 튜토리얼

2-16100309252M91.JPG

React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리입니다.

React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 React가 MVC의 V(뷰)라고 생각합니다.

React는 Facebook의 내부 프로젝트에서 시작되었으며 Instagram의 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.

React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 주목하고 사용하기 시작했습니다.

React 기능

  • 1. 선언적 디자인 −React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.

  • 2. 효율적 −React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.

  • 3. 유연성 −React는 알려진 라이브러리나 프레임워크와 잘 작동합니다.

  • 4.JSX − JSX는 JavaScript 구문의 확장입니다. JSX는 React 개발에 필수는 아니지만 권장됩니다.

  • 5. 컴포넌트 − React를 통해 컴포넌트를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다.

  • 6. 단방향 응답 데이터 흐름 − React는 단방향 응답 데이터 흐름을 구현하여 중복 코드를 줄여 기존 데이터 바인딩보다 간단합니다.

이 튜토리얼을 읽기 전에 알아야 할 사항:

React를 배우기 전에 다음 기본 지식이 필요합니다.

  • HTML5

  • CSS

  • JavaScript

React First 예제

각 장에서는 온라인으로 예제를 편집하고 버튼을 클릭하여 결과를 볼 수 있습니다.

이 튜토리얼은 React 버전 0.14.7을 사용합니다. 공식 웹사이트 http://facebook.github.io/react/에서 최신 버전을 다운로드할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요