Skip to main content

React Components, Building a Pet Adoption App

Introduction​

Welcome to the exciting world of React! In this section, we'll dive into creating components, the building blocks of React applications. We'll start by organizing our code and creating a basic structure for our Pet Adoption App.

Separating Concerns​

To follow best practices, let's move our code from the DOM script tag to its own script file. In your src directory, create a new file called App.js and paste your existing code there.

Modify your code to look like this:

src/App.js
const Pet = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.animal),
    React.createElement("h2", {}, props.breed),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Adopt Me!"),    
    React.createElement(Pet, {
      name: "Pepper",
      animal: "Bird",
      breed: "Cockatiel",
    }),
  ]);
};
http://127.0.0.1:5500/index.html

Adopt Me!

Pepper

Bird

Cockatiel

Remember to replace the script tag in your index.html with a reference to your new file.

<script src="./App.js"></script>

Understanding the "Key" Prop​

You might encounter a console warning about the absence of a unique "key" prop. This helps React optimize component re-rendering. To fix this, provide a unique key for each item in your list.

Creating Reusable Components​

Now that we've structured our app, let's enhance our Pet component to make it more flexible and reusable.

src/App.js
const Pet = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.animal),
    React.createElement("h2", {}, props.breed),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Adopt Me!"),
    React.createElement(Pet, {
      name: "Luna",
      animal: "Dog",
      breed: "Havanese",
    }),
    React.createElement(Pet, {
      name: "Pepper",
      animal: "Bird",
      breed: "Cockatiel",
    }),
    React.createElement(Pet, { name: "Doink", animal: "Cat", breed: "Mix" }),
  ]);
};
http://127.0.0.1:5500/index.html

Adopt Me!

Luna

Dog

Havanese

Pepper

Bird

Cockatiel

Doink

Cat

Mix

Now, our Pet component accepts props from its parent, making it more versatile. You can customize each instance with different pet details.

Conclusion​

Congratulations! You've just embarked on your journey into React components. Remember, the power of React lies in creating reusable, flexible components that you can combine to build amazing applications. Stay tuned for more exciting React concepts on your learning journey! 🚀