React 기초 01

Overview

1. JavaScript를 이용한 React 기초를 알아봅니다.
2. TypeScript를 이용한 React 기초를 알아봅니다.

Index

1. Common Stage
2. JavaScript Stage
3. TypeScript Stage

Content

1. Common Stage

   1. Init

      1. Install Create-React-App
         1. npm

            npm install -g create-react-app
            

         2. yarn

            yarn global add create-react-app
            

      2. cd $WorkSpace

         cd $Your_Work_Space
         

      3. Install styled-components
         1. npm

            npm install styled-components
            

         2. yarn

            yarn add styled-components
            

2. JavaScript Stage

   1. CRA

      1. Create-React-App

         create-react-app dkant-react-javascript
         

      2. dkant-react-javascript TreeView

         ├── README.md
         ├── node_modules
         │   └── ...
         ├── package.json
         ├── public
         │   ├── favicon.ico
         │   ├── index.html
         │   └── manifest.json
         ├── src
         │   ├── App.css
         │   ├── App.js
         │   ├── App.test.js
         │   ├── index.css
         │   ├── index.js
         │   ├── logo.svg
         │   └── serviceWorker.js
         └── yarn.lock
         

      3. Start BoilerPlate

         1. npm

            npm start
            

         2. yarn

            yarn start
            

   2. Layout

      1. StyledComponent

         import React, { Component } from 'react';
         import styled from 'styled-components';
         const Header = styled.div`
           height: 100px;
           width: 100%;
           grid-area: header;
           background-color: red;
         `;
         
         const SideBar = styled.div`
           width: 200px;
           height: 100%;
           display: inline-block;
           grid-area: siderbar;
           background-color: green;
         `;
         
         const Content = styled.div`
           width: calc(100% - 200px);
           height: 100%;
           display: inline-block;
           grid-area: content;
           background-color: blue;
         `;
         
         const StyledMain = styled.div`
           width: 100%;
           height: calc(100% - 200px);
           grid-area: main;
           grid-template-areas: 'siderbar content';
         `;
         
         const Footer = styled.div`
           width: 100%;
           height: 100px;
           grid-area: footer;
           background-color: black;
         `;
         
         const StyledLayout = styled.div`
           width: 100vw;
           height: 100vh;
           grid-template-areas:
             'header'
             'main'
             'footer';
         `;
         
         class Main extends Component {
           render() {
             return (
               <StyledMain>
                 <SideBar />
                 <Content />
               </StyledMain>
             );
           }
         }
         
         class Layout extends Component {
           render() {
             return (
               <StyledLayout>
                 <Header />
                 <Main />
                 <Footer />
               </StyledLayout>
             );
           }
         }
         
         class App extends Component {
           render() {
             return (
               <div className="App">
                 <Layout />
               </div>
             );
           }
         }
         
         export default App;
         

         Result

3. TypeScript Stage

   1. CRA

      1. Create-React-App

         create-react-app dkant-react-typescript --scripts-version=react-scripts-ts
         

      2. dkant-react-typescript TreeView

         ├── README.md
         ├── node_modules
         │   └── ...
         ├── images.d.ts
         ├── package.json
         ├── public
         │   ├── favicon.ico
         │   ├── index.html
         │   └── manifest.json
         ├── src
         │   ├── App.css
         │   ├── App.test.tsx
         │   ├── App.tsx
         │   ├── index.css
         │   ├── index.tsx
         │   ├── logo.svg
         │   └── registerServiceWorker.ts
         ├── tsconfig.json
         ├── tsconfig.prod.json
         ├── tsconfig.test.json
         ├── tslint.json
         └── yarn.lock
         

      3. Start BoilerPlate
         1. npm

            npm start
            

         2. yarn

            yarn start
            

      4. TypeConfig
         1. Edit tsconfig.json