This past week I've been making my first React web app which is a website that gives information (made from ai) about 4 specific animals. It really helped me get a grasp on how to react components work and what you can do with them, but I did have lots of challenges which is why it took me a week in the first place. I made this blog so you can know the tools I used, how I coded it, and the challenges I faced. Here's the link to the Animal-info-website!
Tools I used:
- VS Code: a code IDE I use all the time as a web developer
- Create-react-app: a react template I used to easily start building my react apps in VS code
- React Router: a React API I used to make my react web app multi-paged, without needing to make lots of HTML files
Making the home page
First, I make a single functional component called Nav, where I made my nav bar. Then I exported it to my App component which is my home page.
const linkStyle = {
textDecoration: 'none',
color: 'black'
}
export function NAV() {
return (
<nav>
<p><Link to="/home" style={linkStyle}>Home</Link></p>
<p><Link to="/about" style={linkStyle}>About</Link></p>
<a style={linkStyle} href="https://github.com/Lensco825/animal-info-website"><ion-icon name="logo-github"></ion-icon></a>
</nav>
)
Next, I made the rest of my home page by adding two headers and an animal container div which contains each animal selection. I stylized the animal container to display: flex so the animal selections can be horizontal, but I also gave it a media query, so it turns into a grid with two or one columns. I gave each animal selection a link to their content component, while keeping the animal selection at the bottom.
function App() {
return (
<div className="App">
<NAV/>
<main>
<Routes>
<Route path="/bear" element={bearContent()} />
<Route path="/cat" element={catContent()} />
<Route path="/owl" element={owlContent()} />
<Route path="/dol" element={dolphinContent()} />
<Route path="/home" exact element={App} />
<Route path="/about" element={About()} />
</Routes>
<div className="AnimalContainer">
<h1>Animal Info</h1>
<h2>Learn more about some of these animals!</h2>
<div className="AnimalSelection">
<div className="Owls">
<Link to="/owl">
<img src={images.owl} alt='owl' className="coverImage"></img>
</Link>
</div>
<div className="grizzlyBears">
<Link to="/bear">
<img src={images.bear} alt='bear' className="coverImage"></img>
</Link>
</div>
<div className="dolphins">
<Link to="/dol">
<img src={images.dolphin} alt='dolphin' className="coverImage"></img>
</Link>
</div>
<div className="cats">
<Link to="/cat">
<img src={images.cat} alt='cat' className="coverImage"></img>
</Link>
</div>
</div>
</div>
</main>
</div>
);
Animal Content
I made the information for each animal with Notion AI and placed all the text into paragraph and header elements. Since the layout of each animal content was the same, I made a CSS stylesheet that they all use, except for the h2 elements which are stylized sing the style attribute. I won't show every animal content but instead just one of them.
import React from "react";
import './content.css';
export function bearContent() {
return (
<div className="information">
<h2 style={{backgroundSize: 'cover', backgroundImage: 'url(https://images.unsplash.com/photo-1593946460607-d1570da6268f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80)', padding: '100px 0 100px 0', borderRadius: '10px', width: '60%', color: 'white'}}>Bears: A Fascinating Species</h2>
<p className="text">Bears are a group of mammals that have captured the hearts and imaginations of people all over the world. They are known for their impressive size, strength, and intelligence. In this research report, we will explore the different species of bears, their habitats, and some of the challenges they face in the wild.</p>
<h3>Species of Bears</h3>
<p className="text">There are eight different species of bears in the world. These include the American black bear, the brown bear, the polar bear, the Asiatic black bear, the sloth bear, the sun bear, the spectacled bear, and the giant panda. Each species has its unique characteristics, such as the polar bear's ability to swim long distances or the giant panda's diet of bamboo.</p>
<h3>Habitats</h3>
<p className="text">Bears can be found in a variety of habitats, from dense forests to Arctic ice caps. Many species of bears are native to North America, while others can be found in Asia, Europe, and South America. Some species, such as the polar bear, are adapted to living in harsh environments, while others, like the sun bear, thrive in tropical climates. However, some don't stay in one specific continent, the polar for example, mostly lives in the Artic but is also seen lower north in Canada, Russia, and Alaska. So as long as the climate and environment fits them they will be found there.</p>
<h3>Challenges</h3>
<p className="text">Bears face a variety of challenges in the wild. Habitat loss due to human activities, such as deforestation and urbanization, is a significant threat to many bear species. Climate change is also affecting bears, especially those that rely on sea ice, such as the polar bear. Additionally, bears are often hunted for their fur, meat, and body parts, which are used in traditional medicine.</p>
<h3>Conservation Efforts</h3>
<p className="text">To protect bears and their habitats, conservation efforts are underway around the world. These efforts include habitat restoration, captive breeding programs, and anti-poaching initiatives. Additionally, many organizations work to educate the public about the importance of bears and their role in the ecosystem.</p>
</div>
)
}
Challenges
- Building class components: since the code for each animal content was exactly the same except for their inner HTML at first I thought that I should make a class component that would be a template for each content instead of having to make multiple functional components. However, I realized that I would need to make LOTS of props for the inner HTML of each element, and that might slow down my render time.
- Using React Router: you see the way react router works is it doesn't make you go to a different JSX or html file, instead it adds content whenever wanted. Since I just learned how to use it, I don't know how to make it clear off the last components when implementing new content, which is why you can still see my animal selection at the bottom of each animal content.
- Styling with React Router: React Router doesn't just implement content, it also implements the stylesheets of that new content. Since i don't know how to remove the old content when react router adds new content, the stylesheet of the animal content and the stylesheet of the home page get together, giving the animal content css that it doesn't need to have. I fixed this by adding class to the animal content and it's paragraph elements.
Conclusion
Overall, I'm very happy from the outcome of this project, at first I didn't believe I had the skills to use React but now I'm confident! If you want to see the source code, contribute, or fix issues in this website go to its Github repo. If you have any questions or things to say comment them below! Have a great day/night👋!
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.