My First React Router app that has multiple screens
- git add .
- git commit -m "Update & Changes Made"
- git push
- npm create vite@latest
- Project Name : vite-porject
- Framework : React
- Variant : Javascript
- cd vite-project
- npm install
- npm run dev
- delete all the template data
- cd vite-project
- npm install react-router-dom
- Make sure all components are like this to start
const App = () => {
return (
<>
</>
);
};
export default App;
- Add import's to App.jsx
+ import { BrowserRouter, Route, Routes } from "react-router-dom";
+ import Navbar from "./components/NavBar";
+ import Landing from "./pages/Landing/Landing";
+ import About from "./pages/About/About";
+ import Skills from "./pages/Skills/Skills";
+ import Projects from "./pages/Projects/Projects";
+ import Contact from "./pages/Contact/Contact";
- Wrap Navigation & Routes, then Wrap Route in Routes
+ <BrowserRouter>
+ <Navbar />
+ <Routes>
+ <Route />
+ <Route />
+ <Route />
+ <Route />
+ <Route />
+ </Routes>
+ </BrowserRouter>
- Each Route has:
+ path='/page'
+ element={<component />}
- The landing Route has:
+ exact="true"
+ path='/'
+ element={<component />}
- Just did this to make the template file a little more detailed
starting to learn the animations for the react/vite app
- on the website there are examples to use for your own animations
- npm install AOS
- go to app.jsx add aos imports and init it
- remember to have imports in app.jsx
- npm install framer-motion
- import { motion } from "framer-motion"
- import { useAnimation } from "framer-motion"
When using the wrapper divs are motion component - <motion.div></motion.div> - divs go from blue to green - they all have props & the props are before the classname + give it an initial value ( initial={{ x: "-100rem" }} ) + give it an animation of ( animate={{ x: "0" }}) + give it a transition of ( transition={{ duration: 1 }} ) - initial and animate are like key frames - the way to add life to them is with the duration prop
- transition has many props
+ add them like how you do the duration
Use effect allows you to controll animations
- import { useEffect } from "react"
- also add the framer motion useEffect to framer motion import
- initialize it above the return statement of the react component
+ const controls = useAnimation();
- set the animated div/image to have an animate prop
- have the value be the controls const