개시하다

처음 뵙겠습니다.졸업생 입사 3년차 전단(?)나는 엔지니어다.
지금까지 당사의 개발Vue + vuex에서 사용되었지만, 산만한 동기의 저하와 Vue.js 이외의 흥미 때문에 먼저 터치React.js(出来ればTypeScriptも)를 하기로 했습니다.
이런 보도의 투고는 처음이기 때문에 먼저 필기 총결산을 한다.사정을 보아 주십시오.
아무튼Vue.js 그래도, 헬로월드를 내놓는 곳부터 심플토도 앱을 만드는 곳까지 목표로 공개하면 도입된 부분까지 리액트를 진행한다.js 공식Get Started을 보면서 합니다.

시험해 보다

가져오기

npx create-react-app my-app
cd my-app
npm start

npx 네가 쓸 물건이지.몰라요.npm start를 클릭하면 브라우저가 자동으로 localhost:3000의 URL을 열고 아래 화면을 표시합니다.
이 근처는 Vue.js랑 같은 느낌이죠.

안을 봐라

서류의 구성은 이런 느낌이다.

- node_modules
- public
  - favicon.ico
  - index.html
  - manifest.json
- src
  - App.css
  - App.js
  - App.test.js
  - index.css
  - index.js
  - logo.svg
  - serviceWorker.js
- .gitignore
- package.json
- README.md
- yarn.lock

src 안에 있는 거 다시 볼게요.

index.js

여기가 신청의 중점이다.ReactDOM.render()의 컴포넌트가 #root 어셈블리에 바인딩된 것 같습니다.App 안 써봤으니까 일단 놔둬.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js

seviceWorker에 귀속된 index.js 구성 요소의 정의가 적혀 있습니다.App의vue-loader쓰기Vue.js라벨과<component>라벨을 분리해서<script>라면react구성 요소를 정의합니다.class 반을 계승한 반을 제작하고 Component 함수에 많이 쓰면 된다.render()의 함수 내에서 라벨에 직접 각 기재법(JSX?)처음엔 역겨웠지만 기사를 쓸 때는 이미 눈에 익었다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

App.test.js

테스트 코드죠?어쨌든 스크립트 오류가 발생하지 않도록 시도해 봤을 뿐입니다.
이 근처에서 기본JavaScript 사용법을 알고 만져보세요.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

기타

다른 것은 react나 .css 등 눈에 익은 서류라서 생략했습니다.

끝맺다

어쨌든 나는 간단한 코드로 화면을 훑어보았다.
입구의 편의성은 package.json의 느낌과 마찬가지로 Vue.js 기법에 익숙해지면 위화감이 없다.
다음에는 공식 가이드HelloWorld부터 핸드링 이벤트즈까지 어물어물 해보세요.