react.학습일기-설치&helloworld

4/18 화요일 비→날씨 덥다
큰일났다,react 공부 시작했어!
나도 모르는 게 많아,react.js를 공유하는 과정,
react.js에 관심이 있는 친구와 함께 자란 마음.
일본인이 아니기 때문에 일본어 사용법에 문제가 있다는 점을 사양하지 마세요.
잘 부탁드립니다.
Php,java,.인터넷을 이용해 10여 년 동안 서버 분야의 프로그램을 제작해 왔지만 헬프데스크 분야의 세계로 한 걸음 더 나아갔다.
angular과react 중 어느 것이 좀 망설여서,react의 맞춤법이 비교적 짧으면 정합니다.
오늘의 미션은?
1. 프로젝트 제작
2.당연히 Hello World!내보내기
가자!

퀘스트 1: 프로젝트 제작

문서로 이동
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
보기에는 매우 간단해 보이는데,npm는 무엇입니까?
구글 선생님한테 물어봤는데 자바스크립트 포장을 관리하는 거죠
포장과 의존하는 포장을 모두 관리할 수 있으니 정말 대단하다.
php면composier,java면maven,비슷하네요
졸렬하게 설명하고 싶지 않으니 참고하시오
npm
자신의 환경에 npm 명령이 있는지 확인하세요$ npm -v없으면 node.js를 다운로드하고 설치하기만 하면 됩니다.
nodejs 여기 설치
네, 준비됐습니다.설치하세요!
STEP1: 설치 개발 환경
npm install -g create-react-app
-g: 전 세계적으로 패키지를 설치한다는 뜻이다.
하면, 만약, 만약...
npm
저는 밑에 설치했어요.
$ npm -g install create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
/usr/local/lib
└─┬ [email protected]
・・・省略・・・
보시면 아시겠지만,create-react-app 지령은 사실node-modules/create-react-app/index.js를 실행합니다.
이것은 노드입니다.제이스 지식이 필요하죠.상세하지 않기 때문에 서버로 실행되는 자바스크립트를 이제 알면 되죠.
그럼, 자신의 첫 react.js 프로젝트를 만들어 보도록 하겠습니다.
STEP2: 설치 개발 환경
create-react-app my-app
my-app는 프로젝트 경로를 지정할 수 있습니다.
내 말은 다음과 같다.$ create-react-app ~/dev/myworkspace/reactjs/myapp만드는 데 시간이 좀 걸려요.
제작된 아이템을 확인해 보도록 하겠습니다.myapp
├─┬ README.md
│ ├ node_modules
│ ├ package.json
│ ├ public
│ ├ src
README.프로젝트 설명서죠.
node_modules: 프로젝트에 필요한 포장
package.프로젝트 설정 파일입니다.프로젝트 정보와 의존 관계 관리 등
밖에서 볼 수 있는 내용이죠.
실제 논리적 처리를 해야 하는 곳이죠.
보시면 MVC 냄새가 나겠죠.
도대체 무엇인지 지금 나도 잘 모르겠다.
잘 모르겠지만 동작을 확인해 보자
STEP3: 동작 확인
cd my-app
npm start
my-app는react 프로젝트의 경로입니다
정말 npm start 웹 서버만 시작하면 apche,nginx가 없어도 동작을 확인할 수 있습니다.좋다.
localhost:3000
아래 화면을 봤는데처음 react 환영합니다.

미션2: Hello world!출력

README.MD를 읽어 보세요.

public/index.html` is the page template;

src/index.js` is the JavaScript entry point.

index.>은 템플릿, src/index입니다.제이스는 자바스크립트의 신청점이라고 합니다.
어쨌든 프로그램의 입구는 src/index다.저는 js입니다.
src/index.js

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

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

ReactDOM.렌더가 구글에 어떻게 정의를 발견했는지 물어봤어요.
ReactDOM.render(
element,
container,
[callback]
)
앱을 id='루트'컨테이너에 넣는 거겠지.
애플은 src/app입니다.js로 정의
src/app.js

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

JSX 문법이죠, 나중에 공부하세요.
return () 에 적힌 코드가 화면에 표시됩니다.
네, Hello world!그래.

<div className="APP">〜</div>

이 내용으로 다시 쓰면...
<h1>Hello world!</h1>
Hello world!나온다!

4 임무를 완성한다
이제 어디서부터 공부를 하면 좋을까요?
어쨌든 개발용 IDE부터 결정합시다!