Becki• 30
@Beckibuzz93
Submitted
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.
