절대적인 초보자는 반응을 배운다

나는 React에 대해 아무것도 모르고, 단지 그것이 자바스크립트 프레임워크라는 것만 알 뿐이다. 나는 리액션 프로그래밍에 관심을 갖는다고 생각한다.나는 자바스크립트에 대해서도 아는 것이 매우 적다. 나는 과거에 인터넷 개발을 자주 했지만 2012년쯤에 그만두었다.하지만 저는 제 사이트를 재건하고 싶습니다. 현재 모든 사람들이 자바스크립트 프레임워크를 사용하고 있기 때문에 이것은 경험을 얻는 좋은 프로젝트라고 생각합니다.나는 걸으면서 나의 의식의 흐름을 기록할 것이다.이것은 유용한 자원이 되기를 바랍니다. 초보자들을 위해 같은 입장에서 저는 귀중한 자원이 될 것입니다. 더 많은 경험을 쌓은 사람들을 위해 - 당신은 어디에서 절대 초보자들이 싸우거나 오해하는 반응을 볼 수 있을 것입니다.

파스 시사회 호텔

내가 구글에서 반응 소개를 검색했을 때, 나는 약 2700만 건의 결과를 얻었다.앞의 몇 가지는 매우 관련이 있는 것 같다.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. (source)

그래, 이것은 매우 관련이 있는 것 같다.거기로 가자. 이 사이트는reactjs라고 한다.어쨌든...그들은 틀림없이 자신이 무엇을 하고 있는지 알고 있을 것이다.

네, 이것은 아주 좋고 깨끗한 강좌입니다.그것은 보기에 그리 길지 않고 형식도 매우 좋다.나는 내가 심심하지 않은 상황에서 이 문제를 해결할 수 있을 것이라고 생각한다.우리 시작합시다!

반응기.조직 강좌 첫인상

곧 나는 이'힌트'를 찾았다.

"...'하면서 배우기'가 더 좋아요?"몰라요.나의 일부 사람들은 내가'한 걸음 한 걸음'안내서로 뛰어넘어야 한다고 생각한다. 나는 URL에서'안녕하세요, 세계!'를 볼 수 있다.예.그러나 일부 사람들은 내가 그것을 견지해야 한다고 생각한다. 왜냐하면 나는 다른 것에 대해 싫증을 느낄 수 있기 때문이다.우리 잠깐 여기 있자.
몇 마디 후에 나는 시작한다...

"최종 결과를 보고 싶어요!"나는 허공을 향해 소리를 지르고 링크를 눌렀다.

아, 이것은 암호펜입니다.나는 이전에 다른 사람이 쓰는 것을 본 적이 있지만, 나는 지금까지 써 본 적이 없다.아마도 나는 내가 하고 있는 인터넷 개발을 더 많이 볼 수 있을 것이다.코드가 재미있을 것 같습니다.

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

HTML 태그의 함수를 반환합니까?프로그램을 통해 확정된 매개 변수와 내용은?이것은 절대로 내가 이전에 본 적이 없는 것이다.이것은 보기에 매우 재미있다.나는 지금 정말 이 건축물에 흥미가 있다.교과서 페이지로 돌아가서 어떻게 구축하는지 배워봅시다.

나는 내가 첫 단락의 내용에 대해 모두 능숙하다고 생각하지만, 두 번째 단락은 그다지 능숙하지 않다.분명히 const문장은 상량 변수를 가리키는 것이 맞습니까?나는 일반적인 과정이 무엇인지 알지만, 아마도 classes 다른 것일 것이다.화살표 함수는 lambdas 맞습니까?나는 이전에 자바에서 본 적이 있다.어쩌면 나는 ES6에 관한 어떤 책도 읽지 않아도 버틸 수 있을지도 몰라...
오, 심심해서 클릭했어요.나 지금 왔어.네, 다음은요?

나는 이미 작성된 코드 강좌를 만드는 것을 싫어한다. 그래서 나는 옵션 1을 강력히 반대한다.대신 #2:

네, 우선 이 설정 절차를 밟아야 합니다.시작하자.js가 설치되었습니다.이것은 Mac에서 매우 쉽다. 왜냐하면 the link in the tutorial는 나를 직접 다운로드 페이지로 데리고 갈 것이다. 거기에서 나는 *.pkg 파일을 다운로드해서 이 파일을 설치 프로그램으로 실행하기 때문이다.매우 빠르고 간단합니다.
다음 단계는 이 설치 설명에 따라 조작하는 것이라고 생각합니다.링크를 눌러야 합니까?아니면 그 명령을 직접 실행합니까?아직 잘 모르겠어요.링크를 클릭하면 다음과 같습니다.

같은 설명으로 보인다.따라서 이 링크의 다른 모든 내용은 무시하고 자습서의 명령 하나만 실행합니다.

$ npx create-react-app my-app

...이 명령은 실행되기까지 시간이 오래 걸릴 것 같다.아마도 이것은 내가 처음으로 npm/React를 사용해서 초기화된 일을 한 것일 것이다.

Creating a new React app in /Users/andrew/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

⸨       ░░░░░░░░░░░⸩ ⠹ extract:eslint-plugin-flowtype: sill extract ...

...네, 그렇습니다.술 한잔 하고 올게요.
다음은 내가 돌아왔을 때 본 것이다.

added 1980 packages from 735 contributors and audited 36246 packages in 163.458s
found 63 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Success! Created my-app at /Users/andrew/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

약점에 관한 그 말은 나로 하여금 좋지 않게 한다.특히the bad press npm has gotten lately.프레젠테이션 애플리케이션을 실행하려면 1980개의 소프트웨어 패키지를 설치해야 합니까?이거 미친 것 같지 않아요?
어쨌든 입문 메뉴가 괜찮아요.이 강좌의 다음 단계는 항목 src/ 디렉터리에 있는 모든 파일을 삭제하는 것입니다.그래서 나는 이렇게 한다.

$ ls my-app/src/
App.css           App.test.js       index.js          serviceWorker.js
App.js            index.css         logo.svg

$ rm my-app/src/*

계속 튜토리얼, 나는 이 부분을 클릭했다...

...네?그들은 여전히 나에게 스티커 코드를 복사하라고 한다.나는 그렇게 하고 싶지 않다. 이것이 바로 내가 내 기계에서 처음부터 이 프로젝트를 시작하는 이유이다.어쩌면 나는 정말'안녕하세요, 세계!'가 되고 싶을지도 모른다.프로그램이니까.
어쨌든 나는 지금 계속할 것이라고 생각한다.나는 4, 5, 6단계의 설명을 따랐다.나는 코드를 복사하고 붙이는 것을 싫어한다.나는 매우 더럽다고 생각한다.
프로젝트 폴더에서 npm start 실행하고...아무 일도 없었어.오랫동안터미널에서 구글 브라우저에 접근할 수 있는 권한을 요구할 때 내가 무엇을 잘못했는지 걱정하기 시작했다.프로그램이 열리고 있을 거야!
나는 또 매우 오랫동안 기다렸다.

정말!저기 있다.나의 첫 번째 React 응용 프로그램.
이것은 이 로그의 첫 부분과 ReactJSthe React tutorial의 첫 부분이다.조직다음에 다시 와서 나의 잡담과 불평을 읽어라!