React, Vite + 리액트 프로젝트 시작하기

1. vite 로 react 프로젝트 만들기

npm create vite@latest . -- --template react

npm create vite@latest . -- --template react

 

2. 플러그인 + styled-components 설치

npm install && npm install styled-components

 

3. localhost 실행

npm run dev

 

4. main.jsx

import './index.css'

import App from './App.jsx'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>
)

 

5. App.jsx

import './App.css'

import MyComponent from './component/MyComponent'
function App() {
    return (
        <>
            <MyComponent />
        </>
    )
}

export default App

 

6. ./component/MyComponent.jsx

import styled from 'styled-components';
import { useState } from 'react'

const Component = styled.div`
    margin: 0 auto;
    border: solid 1px #000;
`;

export default function MyComponent() {
    const [count, setCount] = useState(0)
    return (
        <Component>
            <button onClick={() => setCount((count) => count + 1)}>
            count is {count}
            </button>
        </Component>
    )
}

 

+ node module 캐쉬 지우기

rm -rf node_modules

 

+

vite_simple.zip

https://firebasestorage.googleapis.com/v0/b/get-senna.appspot.com/o/users%2FosupuMcFCsZQfRNpukiiopqintA2%2Fb3293bd2-bcd3-4887-ad13-6d5f1b47d780__zip?alt=media&token=cbfb9227-9040-4bcf-9326-81a2affc5c17

 

vite.7z

https://firebasestorage.googleapis.com/v0/b/get-senna.appspot.com/o/users%2FosupuMcFCsZQfRNpukiiopqintA2%2Fb31f884a-9741-4b5d-abb0-f7d69d974af1__7z?alt=media&token=2e189163-c8ea-4623-be9a-058243c38c28