@Beckibuzz93Submitted about 1 year ago
Any constructive feedback is welcome :)
Technologies used
- ReactJS, Vite, React Router Dom, Jest(https://www.npmjs.com/package/jest)
- Custom CSS
- Google fonts
What I learned
Using props for CSS
- To avoid rewriting code, I learned to use props for CSS, for example:
<div className={props.anyClassNameHere}> </div>
Scaling SVGs
- During this I have learned to scale SVGs with the transform property, by taking the width and height of the SVG and adapting that.
- For example, if the SVG was 'width: 450' the css property would be:
.svg-image { transform: scale(0.45); }
- You can then use this and adapt it for different screen sizes, for example I added 10 for tablets and small screens and an extra 30 for desktops.
Nested routes in react router dom
-
In react router dom, they have nested routes so that you can have multiple navigations on one page.
-
For example in the main App/Routes component you can have:
<Route path='/mercury' element={<Components.MercuryNav/>}> <Route index element={<Pages.MercuryOverview/>}/> <Route path='structure' element={<Pages.MercuryStructure/>} /> <Route path='surface' element={<Pages.MercurySurface/>} /> </Route>
- Then in the component you would Links or NavLinks like:
<NavLink to='/mercury' end><span>01</span> Overview </NavLink> <NavLink to='/mercury/structure'><span>02</span> Structure </NavLink> <NavLink to='/mercury/surface'><span>03</span> Surface </NavLink>
- Note: NavLink comes with an isActive/.active class to easily style the links, whilst Link does not.
Useful resources
-
React Router Dom - Nestest Routes - This article helped to understand nested routes in react router dom, I'd recommend it to anyone still learning this concept.
-
React Router Docs - This is the react router documentation - Read it, documentation is good!
-
Scaling SVGS - CSS-Tricks helps with any CSS needs, this article explains SVGS in detail.
