react-portfolio : pages 파일 만들기

일단 필요없는 파일들은 삭제해주었습니다.

src폴더 안에 뭔가 여러개 파일들이 많이있었는데 다 삭제해주었습니다. 대신 App.js, index.js파일 안에 있는 내용들도 맞게 수정해주어야합니다. 없는 파일들을 불러올경우, 에러가 나와서 화면이 제대로 나오지 않아요.

index.js

import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.querySelector('#root'));

root.render(<App/>)

처음 구조도에서 이야기했던 page폴더안에 파일들을 생성해줍니다.

Home.jsx

const Home = () => {
  return(
    <div>Home</div>
  )
}

export default Home;

위와같이 각 폴더에있는 jsx파일마다, 해당 파일에 맞게 넣어주었습니다.(Home, About, Contact .... 이런식으로 말입니다.)

App.js에서 pages폴더 안에 있는 화면들을 불러옵니다.
(App.js는 처음 실행되는 화면이예요.)

App.js

import About from './pages/about/About.jsx';
import Home from './pages/home/Home.jsx';
import Gallery from './pages/gallery/Gallery.jsx';
import Plans from './pages/plans/Plans.jsx';
import Trainers from './pages/trainers/Trainers.jsx';
import Contact from './pages/contact/Contact.jsx';
import NotFound from './pages/notFound/NotFound.jsx';

function App() {
  return (
    <div>
      <Home/>
      <About/>
      <Gallery/>
      <Plans/>
      <Trainers/>
      <Contact/>
      <NotFound/>
    </div>
  );
}

export default App;

이런식으로 각각 파일들을 가져오고있습니다.
이제 해당폴더에 링크를 걸어줄꺼예요.