기타교육자료

제목react hello2019-04-25
1. 먼저 nodejs를 설치한다
2. npm으로 create-react-app을 설치한다(모듈)
3. 설치한 create-react-app으로 react-hello를 만든다(프로젝트)
4. 일단 프로젝트를 아톰이나 visual studio 코드로 불러들인다
5. npm run start로 디버그 모드로 실행시킨다
6. 홈페이지가 나오면 일단 성공!
7. HelloWorld.jsx파일을 만든다

다음은 소스
import React, { Component } from 'react';

// const HelloWorld = (props) => (
//   <div>
//     <h2>Hello <em>{props.name}</em></h2>
//   </div>
// );

// function HelloWorld(props) {
//   return (
//     <div>
//       <h2>Hello <em>{props.name}</em></h2>
//     </div>
//   );
// }

class HelloWorld extends Component {
  render() {
    return (
      <div>
        <h2>Hello <em>{this.props.name}</em></h2>
      </div>
    );
  }
}

export default HelloWorld;

Appjs를 수정한다

import React from 'react';
import logo from './logo.svg';
import './App.css';

import HelloWorld from './HelloWorld'

function App() {
  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>
      <HelloWorld name="hyungku"/>
    </div>
  );
}

export default App;