풀스택 React 및 Node.js - 클라이언트 만들기

React 웹 사이트 만들기

프로젝트를 위한 폴더를 어딘가에 만듭니다. 이것은 클라이언트 및 서버 코드를 보유합니다. 나는 내 것을 호출했습니다 : node-react-stack 그리고 그 폴더 이름을 전체적으로 사용할 것입니다.

node-react-stack 폴더 내에서 shell/CLI를 사용하여 다음 명령을 입력하여 React 앱을 생성합니다.

npx create-react-app react-client

완료되면 node-react-stack/react-client 폴더 내에서 npm install react-router에 대한 또 다른 명령을 실행합니다.

npm i -S react-router-dom

Make sure that npm install commands like this are run in the same folder where your package.json file is located.

다음으로 편집기에서 react-client 프로젝트를 엽니다.

src 폴더 안에 AddEditNote.js라는 새 파일을 만들고 다음 코드를 붙여넣습니다.

import React from 'react';

const AddEditNote = () => {
    return (
        <div>
            Add Edit Note
        </div>
    );
};

export default AddEditNote;

다음으로 App.js를 편집하고 코드를 다음과 같이 변경합니다.

import {
    Link,
    HashRouter as Router,
    Routes,
    Route,
} from 'react-router-dom';
import AddEditNote from "./AddEditNote";
import './App.css';

function App() {
    return (
        <div className="App">
            <Router>
                <Routes>
                    <Route exact path="/" element={
                        <ul>
                            <li>
                                <Link to="edit-note">Edit Note</Link>
                            </li>
                        </ul>
                    }/>
                    <Route path="/edit-note" element={<AddEditNote/>}/>
                </Routes>
            </Router>
        </div>
    );
}

export default App;

이를 테스트하려면 node-react-stack/react-client 폴더 내에서 다음을 실행하세요.

npm run start

Just as with npm install above,

npm run

commands must be executed from the same folder as your package.json file. The reason is that

npm run start

runs the start script defined in your package.json file.

React 앱 빌드가 완료되면 브라우저에 "메모 편집"링크가 표시되어야 합니다. 클릭하면 "편집 메모 추가"텍스트가 표시됩니다.

잘하셨습니다. 클라이언트 앱과 라우팅이 작동하고 있습니다!

다음:

코드 저장소: Github Repository