Code Monkey home page Code Monkey logo

react-todolist's Introduction

TODO LIST 만들어보기 React with Typescript

React의 작업 단위 = Component

Component Tree => Dom Tree (Virtual DOM 사용)

기본적으로 JSX 문법 사용하지만, Typescript를 사용 할 것이기 때문에 TSX문법, 즉 확장자는 tsx가 될 것이다.

데이터가 변하면 다시 render를 호출해서 그려준다.

  • render가 호출되고, 재호출되는 지점을 파악
  • render를 JSX로 표현
  • 데이터와 JSX가 합쳐져 하나의 컴포넌트를 이룸.

시작

참조 영상 : https://www.youtube.com/watch?v=ODvirqIC09A

프로젝트 만들기

yarn create react-app [프로젝트 명] --typescript

or

npx create-react-app [프로젝트 명] --typescript

yarn start or npm start 를 하면 아래와 같은 기본 페이지를 볼 수 있다.

기본적인 페이지를 없애고 새로운 페이지를 만들어보자

rm App.css App.test.tsx index.css logo.svg serviceWorker.ts

하고,

App.tsx 파일을 아래 예시와 같이 바꿔주고,

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
import React from 'react';

function App() {
  return (
   <div>Hello World</div>
  );
}

export default App;

index.tsx 파일도 아래 예시와 같이 바꿔주자

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,

  document.getElementById('root')
);

react-todolist's People

Contributors

dependabot[bot] avatar withseungryu avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.