prop-tutorial/src/components/AnimalCard/AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard() {
  return <h2>Animal</h2>
}
prop-tutorial/src/components/App/App.js

import React from 'react';
import data from './data';
import AnimalCard from '../AnimalCard/AnimalCard';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard key={animal.name}/>
      ))}
    </div>
  )
}

export default App;
First, make a directory in src/components called AnimalCard then touch a file called src/components/AnimalCard/AnimalCard.js and a CSS file called src/components/AnimalCard/AnimalCard.css.

mkdir src/components/AnimalCard
touch src/components/AnimalCard/AnimalCard.js
touch src/components/AnimalCard/AnimalCard.css
Next, add some styling to line up the items. Open App.css:

nano src/components/App/App.css
prop-tutorial/src/components/App/App.css

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.wrapper h1 {
    text-align: center;
    width: 100%;
}
Open AnimalCard.js in your text editor:

nano src/components/AnimalCard/AnimalCard.js
First, you need some sample data. Create a file in the src/App directory called data.

touch src/components/App/data.js

Recommend

How To Customize React Components with Props Step 2 — Building Dynamic Components with Props Creating Components

How To Customize React Components with Props Step 2 — Building Dynamic Components with Props Adding Data

How To Customize React Components with Props Step 1 — Creating an Empty Project

How To Write Your First Ruby Program Step 3 — Prompting for Input

How To Write Your First Ruby Program Step 2 — Running a Ruby Program

How To Write Your First Ruby Program Step 1 — Writing the Basic “Hello, World!” Program

How To Write Your First Ruby Program Introduction

Установка и обеспечение безопасности phpMyAdmin в Ubuntu 20.04 Шаг 3 — Обеспечение безопасности phpMyAdmin

Установка и обеспечение безопасности phpMyAdmin в Ubuntu 20.04 Шаг 2 — Настройка аутентификации и прав пользователя Настройка доступа по паролю для выделенного пользователя MySQL

Установка и обеспечение безопасности phpMyAdmin в Ubuntu 20.04 Шаг 2 — Настройка аутентификации и прав пользователя Настройка доступа по паролю для учетной записи root в MySQL

Установка и обеспечение безопасности phpMyAdmin в Ubuntu 20.04 Шаг 1 — Установка phpMyAdmin

So verwenden Sie Node.js-Module mit npm und package.json Schritt 3 — Verwalten von Modulen Module prüfen

So verwenden Sie Node.js-Module mit npm und package.json Schritt 3 — Verwalten von Modulen Module deinstallieren

So verwenden Sie Node.js-Module mit npm und package.json Schritt 3 — Verwalten von Modulen Module aktualisieren

So verwenden Sie Node.js-Module mit npm und package.json Schritt 3 — Verwalten von Modulen Module auflisten

So verwenden Sie Node.js-Module mit npm und package.json Schritt 2 – Installieren von Modulen Globale Installationen

So verwenden Sie Node.js-Module mit npm und package.json Schritt 2 – Installieren von Modulen Installieren aus package.json

So verwenden Sie Node.js-Module mit npm und package.json Schritt 2 – Installieren von Modulen Automatisch generierte Dateien: node_modules und package-lock.json

So verwenden Sie Node.js-Module mit npm und package.json Schritt 2 – Installieren von Modulen Entwicklungsabhängigkeiten

So verwenden Sie Node.js-Module mit npm und package.json Schritt 2 – Installieren von Modulen

So verwenden Sie Node.js-Module mit npm und package.json Schritt 1 – Erstellen einer package.json-Datei Verwenden des Befehls init

Verwenden von Rsync zum Synchronisieren von lokalen und entfernten Verzeichnissen Nützliche Optionen für Rsync