반응 js의 캘린더

2113 단어 webdevhtmlreactjavascript
이 게시물에서는 react js에서 간단한 캘린더를 만들 것입니다.

터미널에서 다음 명령을 실행합니다.

npx create-react-app react-calender
cd react-calender
npm i react-calender

src/app.js로 이동하여 내용을 지우고,
가져 오기 react, react-calender

import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';


다음으로 함수 앱을 만들고 내보내기

export default function App() {
  // main content goes here...
}


react useState를 사용하여 값과 onchange를 설정합니다.

export default function App() {
  const [value, onChange] = React.useState(new Date());
}


그리고

export default function App() {
  const [value, onChange] = React.useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}


다음으로 src/index.js로 이동하여 다음 코드를 붙여넣습니다.

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);


app.js 전체 소스 코드:

import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function App() {
  const [value, onChange] = React.useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}


라이브 데모: https://reactcalenderbyrishi.stackblitz.io/

감사합니다
JS의 나머지 매개변수
기본 용어 및 JavaScript 구문

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage