간단한 데이터 바인딩 예제 반응

https://grokonez.com/frontend/react/react-bind-data-simple-data-binding-example

단순 데이터 바인딩 예제 반응

이전post에서 간단한React Hello World 애플리케이션을 만들었습니다. 이 튜토리얼은 React로 간단한 데이터 바인딩을 구현하는 방법을 보여줍니다.

I. 기술

반응 16

NodeJs 6.11.2

NPM 3.10.10

원사 1.5.1

바벨 6.24.1

II. 관행

1. 목표

변수에 값을 더하거나 빼는 클릭 이벤트를 수신한 다음 UI에서 변수를 즉시 업데이트할 수 있는 React 애플리케이션을 빌드합니다.

2. 프로젝트 구조

3. 단계별로

3.0 환경 설정

이 예제를 컴파일하고 실행하려면 NodeJs, Yarn 및 Babel이 필요합니다.
단계별로 보려면 Set up Environment을 방문하십시오.

3.1 프로젝트 폴더 설정

BindData 프로젝트용 폴더를 생성한 후 다음과 같이 하위 폴더와 하위 파일을 만듭니다.

3.2 종속성

package.json을 열고 프로젝트 정보 및 종속성에 대해 다음 줄을 작성합니다.

{
  "name": "bind-data",
  "version": "1.0.0",
  "main": "index.js",
  "author": "JavaSampleApproach",
  "license": "MIT",
  "dependencies": {
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1"
  }
}

3.3 index.html

이것은 애플리케이션을 호출할 때 브라우저에 나타나는 기본 HTML 파일입니다.
또한 이 HTML 파일을 사용하여 React 파일을 포함하고 javascript app.js를 참조합니다.

더 보기:

https://grokonez.com/frontend/react/react-bind-data-simple-data-binding-example

단순 데이터 바인딩 예제 반응