react habit 컴포넌트 만들기

1. component에 habit.jsx 파일 만들기

2. rcc를 누르고 tap 을 누르면 골격이 만들어짐

3. 클래스는 항상 대문자로 시작

habit.jsx

import React, { Component } from 'react';

class Habit extends Component {
	render() {
    	return (
       	<>
        <span className="habit-name">reading</span>
        <span className="habit-count">9</span>
        </>
        )
    }
 }
 
 export default Habit

 

export default 로 Habit 클래스 컴포넌트를 다른 컴포넌트에서도 사용 가능하도록 만들어준다. 

 

return 부분에 소스코드를 추가해서 만들어준다.

app.jsx

import React, { Component } from 'react';
import './app.css';
import Habit from './components/habit';
function App() {
	return <Habit/>;
}

export default App;

이렇게 app.jsx에서 import Habit을 한 후 <Habit/> 으로 HTML 태그처럼 불러와준다.

 

fontAwesome 사용방법

터미널에서

yarn add @fontawsome/fontawesome-free

다운 받고,

 

fontawesome을 import 한다.

import '@fontawesome/fontawesome-free/js/all.js';

<i className fontawsome에서 가져오기>