[리액트(React) Study Log] [Person App-003] JSX Creating a Functional Component

[리액트(React) Study Log] [Person App-003] JSX Creating a Functional Component

 

1. Person component 생성

 - functional components 로 생성함. (component name 첫 글자는 소문자)

 (class-based compoents 의 component name 첫 글자는 대문자)

//src-Person-Person.js

 

import React from 'react';

 

const person = () => {

    return <p>I'm a Person!</p>

}

 

export default person;

 

2. Person component 를 App.js 의 App component 에 연결

 - App.js 파일에서 Person component 를 import 해와서 JSX code 에서 rendering

 - component를 rendering 할 때는 <Person /> 또는 <Person> </Person>

// src-App.js

 

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

 

class App extends Component {

  render() {

    return (

      <div className="App">

        <h1>Hi, I'm React App</h1>

        <p>This is really working!</p>

        <Person />

      </div>

    );

  }

}

 

export default App;

 

 

 - npm start --> 브라우져 확인