Machen Sie eine App wie

Reagieren Sie mit der nativen Instagram-Klon-App | Reagieren Sie auf natives Skript für Instagram

React Native Instagram Clone erklärt. Verwenden Sie das Paket „react-native-webview“, um eine WebView in Ihre React Native-App einzubetten. Sie können es installieren...

Geschrieben von Niel Patel · 10 min gelesen >
Erstellen Sie eine Instagram-Klon-App mit React Native
Inhaltsverzeichnis verstecken

Erfinden Sie das Rad nicht neu. Sie müssen ein Unternehmen aufbauen, keine App. Konzentrieren Sie sich auf das, was Ihr Startup einzigartig und Ihr Produkt attraktiv macht, anstatt Standardcode von Grund auf neu zu schreiben.

Starten Sie eine Plattform zum Teilen von Fotos, Videos und sozialen Netzwerken wie Instagram, um Millionen von Menschen im Handumdrehen zu fesseln.

Hier habe ich das React Native Instagram Clone-Skript Nr. 1 mit modernstem Funktionsumfang aufgelistet. Nur zu Ihrer Bequemlichkeit habe ich die Screenshots der React-Native-Instagram-Klon-App aktualisiert.

Was ist React und warum ist React Native Instagram Clone?

Reagieren Sie auf einen nativen Instagram-Klon
React-native Instagram-Klon

Der Instagram-Klon mit nativer React-Technologie ist eine White-Label-Social-Media-Lösung, die schnell angepasst und gestartet werden kann. Es ist eine fantastische Wahl für Unternehmen, die in naher Zukunft in den Markt für Social-Networking-Apps einsteigen möchten. Ähnlich wie die Instagram-App ist unsere Lösung mit allen Features und Funktionen vorinstalliert.

Bei MakeANApp sind wir bestrebt, Unternehmen bei der schnellen Bereitstellung ihrer Social-Networking-App in ihrem Fachgebiet zu unterstützen. Ein weiterer wesentlicher Vorteil besteht darin, dass wir die Lösung zu angemessenen Kosten anbieten. Kontaktieren Sie uns, starten Sie die App schnell und unterstützen Sie Ihre Benutzer bei der problemlosen globalen Verbindung.

React ist ein Open-Source-Frontend-JavaScript-Framework, das zum Erstellen unglaublicher, wiederverwendbarer Benutzeroberflächen verwendet wird. Um mehr über React zu erfahren, können Sie hier vorbeischauen .

Monetarisierungsstrategien im nativen Instagram-Klon von React enthalten

Für eine Social-Networking-Plattform wie Instagram ist Werbung traditionell die Haupteinnahmequelle. Mit unserem React Native Instagram-Klon können Sie durch verschiedene Methoden viel Geld verdienen, beispielsweise durch gesponserte Beiträge und Karussell-Werbung. Schauen wir uns jeden einzelnen genauer an.

Ermöglichen Sie Einzelpersonen und Unternehmen, ihre Beiträge zu bewerben, um ein größeres Publikum zu erreichen, insbesondere diejenigen, die ihren Profilen nicht folgen. Es ermöglicht ihnen, ihr Profil zu schärfen, das Post-Engagement zu steigern und ihre Fangemeinde zu vergrößern. Diesen gesponserten Beiträgen werden ein gesponserter Tag und ein Call-to-Action-Button hinzugefügt. Es hat das Potenzial, Ihre Haupteinnahmequelle zu sein und es Ihnen zu ermöglichen, eine beträchtliche Menge Geld zu verdienen.

Karussellwerbung trägt ebenso wie gesponserte Beiträge zur Förderung von Beiträgen bei. Der einzige Unterschied besteht darin, dass viele Fotos in einem einzigen Beitrag beworben werden können. Das heißt, Unternehmen können mehrere Fotos verwenden, um eine Geschichte zu erzählen und so das Engagement der Benutzer zu erhöhen.

In-App Käufe

Ermöglichen Sie Benutzern die Zahlung einer Gebühr für den Zugriff auf benutzerdefinierte Filter und Effekte. Es gibt auch eine Reihe einzigartiger Funktionen in Instagram, wie z. B. die App, für die Sie Ihren Kunden Gebühren berechnen können. Es hilft Ihnen auch dabei, im Laufe der Zeit konstant Geld zu verdienen.

Hier ist eine allgemeine Anleitung, wie Sie Instagram-Funktionen mithilfe von WebView in React Native integrieren können:

Richten Sie eine WebView ein:

Verwenden Sie das react-native-webview Paket zum Einbetten einer WebView in Ihre React Native-App. Sie können es mit npm oder Yarn installieren:

npm install react-native-webview
# or
yarn add react-native-webview

Importieren und verwenden Sie die WebView-Komponente in Ihrem React Native-Code.

import React from 'react';
import { WebView } from 'react-native-webview';

const InstagramWebView = () => {
  return (
    <WebView
      source={{ uri: 'https://www.instagram.com/' }}
      style={{ flex: 1 }}
    />
  );
};

export default InstagramWebView;

Handle-Authentifizierung:

  1. Wenn Ihre App eine Benutzerauthentifizierung erfordert, müssen Sie diese möglicherweise manuell durchführen. Wenn sich Benutzer über WebView anmelden, können Sie die erforderlichen Informationen aus den Navigationsereignissen von WebView extrahieren.
  2. Daten analysieren: Verwenden Sie das onMessage Requisite des WebView zur Kommunikation zwischen Ihrer React Native-App und dem WebView. Sie können Daten vom WebView an Ihre React Native-App übergeben und umgekehrt.
const InstagramWebView = () => { const handleMessage = (event) => { const data = JSON.parse(event.nativeEvent.data); // Vom WebView empfangene Daten verarbeiten }; zurückkehren ( ); };

Bildschirm für React Native Instagram Clone

React Native Instagram Clone-Bildschirm 1
React Native Instagram Clone-Bildschirm 2
React Native Instagram Clone-App-Bildschirm 3
React Native Instagram Clone-App-Bildschirm 4

5 Schritte zum Starten der nativen Instagram-Klon-App-Entwicklung von React

  • Anforderungsstudie
  • Frontend-Design
  • Back-End-Entwicklung
  • Qualitätsprüfungen
  • App-Bereitstellung

Erstellen Sie Ihren eigenen reagierenden nativen Instagram-Klon

Um in wenigen Minuten Ihre eigene Foto-Sharing-App für soziale Netzwerke zu entwickeln, laden Sie die Premium-Instagram-Clone-App in React Native herunter, die vollständig mit dem Firebase-Backend verknüpft ist. Da React Native plattformübergreifend kompatibel ist, können Sie Ihre Social-Media-App sowohl auf iOS als auch auf Android veröffentlichen.

Was sind die Vorteile der React Native Instagram Clone App?

6 Monate Entwicklung können eingespart werden. Sie können gleich beginnen. Vermeiden Sie alle Phasen der Produktentwicklung, wie Wireframing, Prototyping, Design, Codierung, Tests, Fehlerbehebung, Optimierung und Leistungsverbesserung.

  • Mehr als 15,000 $ an Einsparungen
  • Sparen Sie Zeit und Geld, indem Sie die Einstellung und Entlassung von Designern, Entwicklern und Testern vermeiden.
  • Design und Codierung auf höchstem Niveau. Unsere Entwickler haben für namhafte Unternehmen wie Facebook, Instagram und Twitter gearbeitet.

Unverzichtbare Funktionen in der Instagram React Native Clone-App, die über das ursprüngliche Instagram hinausgeht

  • Futter
    • BLOG-POSTS
    • Bildkarussells
    • Chronologische Zeitleisten
    • Echtzeit-Feedlisten
    • Echtzeit-Likes zählen
    • Kommentare in Echtzeit zählen
    • Integration von Kamera/Fotobibliothek
    • Erstelle einen neuen Beitrag
    • Ihre Nachricht
    • Liste der Kommentare
    • Videounterstützung
    • Check-ins / Interaktive Standortauswahl
    • Beitrag extern teilen
    • Hashtags
    • Erwähnungen/Tags
  • Geschichten
    • Fügen Sie eine neue Geschichte hinzu
    • Geschichten-Feed für Freunde
    • Interaktiver Story-Medien-Viewer
    • Verschwindende Geschichten
    • Integration von Kamera/Fotobibliothek
    • Videounterstützung
  • Instagram-Fotofilter
    • 27 wunderschöne Fotofilter
    • Auswahl mehrerer Fotos
    • Kamera-, Bibliotheks- und Videointegration
    • Interaktiver IG-Komponist
    • Unterstützung für benutzerdefinierte Filter
  • Entdecken Sie den Feed
    • Instagram Explore Grid-Layout
    • Echtzeit-Stream von Beiträgen
  • Folgen Sie den Listen
    • Folgen / Nicht mehr folgen
    • Follower-Liste
    • Folgende Listen
    • Die Follow-Listen anderer Benutzer
    • Feed- und Story-Updates in Echtzeit
    • Benutzer suchen
  • Direct Messages
    • Private Gespräche in Echtzeit
    • Gruppengespräche in Echtzeit
    • Textnachrichten
    • Fotonachrichten
    • Videobotschaften
    • Audio-Nachrichten
    • Online-Statusanzeigen
    • In-Reply-Funktionalität
    • Gesehener Status (Facepile)
    • ungelesene Nachrichten
    • Vollbild-Medienbetrachter
    • Anklickbare URLs
    • Gruppe erstellen
    • Gruppeneinstellungen
  • Push-Benachrichtigungen und Abzeichen
  • Dunkler Modus
  • Lokalisierung (mehrsprachig) und RTL-Unterstützung
  • Profil
    • Rasterlayout des Instagram-Profils
    • Post-Updates in Echtzeit
    • Sehen Sie sich die Funktionalität anderer Profile an
    • Follower und Follower zählen in Echtzeit
  • Melden und Blockieren (gemäß den Richtlinien von Apple)
  • Kundenbetreuung
    • Telefonauthentifizierung mit SMS-Bestätigung
    • Apple-Authentifizierung (iOS)
    • Mit Facebook einloggen
    • Melden Sie sich mit E-Mail und Passwort an
    • Registrierung
    • Funktion „Passwort speichern“.
    • Passwort zurücksetzen
    • Ablauf der Komplettlösung
    • Kontodetails bearbeiten
    • Einstellungen
    • Kontakt
    • Abmelden
  • Backend-Integration
    • Authentifizierung mit Firebase Auth
    • Datenbankintegration mit Firebase Firestore
    • Foto- und Videospeicherung mit Firebase Storage
    • Push-Benachrichtigungen mit Firebase Cloud Messaging
  • Optimierte Leistung
    • Sofortige Synchronisierung aller Feeds
    • Bild-Caching
    • Leer- und Ladestatus
    • Anmutige Fehlerbehandlung
    • Haptisches Feedback
    • Optimiert für Benutzerwachstum und -bindung
    • Foto- und Videokomprimierung
    • Denormalisierung für schnelle Feeds

Erstellen von UI-Komponenten in der React Native Instagram Clone App

Da wir nun bereit sind, mit der Erstellung von Reaktionsanwendungen zu beginnen, werden wir die Komponenten entwerfen, die wir benötigen.

Was sind in ReactNative die Komponenten von Instagram Clone?

Sie fragen sich vielleicht, was Komponenten sind, wenn Sie React noch nicht kennen. Seien Sie nicht länger ratlos. Mit Komponenten in React können Sie Ihre Benutzeroberfläche in kleinere Teile aufteilen. Anstatt die gesamte Schnittstelle in einer Datei zu erstellen, teilen Sie sie in separate und wiederverwendbare Komponenten auf, die Sie zu Ihrem fertigen Programm kombinieren.

Erstellen eines Mini-Instagram-Klons mit React Native

Mit JavaScript und React Native können wir mobile Anwendungen für eine Vielzahl von Plattformen und für jede Kategorie oder jede Klon-App wie Instagram oder WhatsApp erstellen. Die von uns erstellten Schnittstellen werden auch in native Ansichten übersetzt. Wir können einen Großteil des von uns erstellten Codes zwischen iOS- und Android-Geräten teilen und React Native macht es einfach, bei Bedarf plattformspezifischen Code zu erstellen. Wir können Apps für beide Plattformen mit nur einer Sprache (JavaScript), einem Framework (React), einer Style-Engine und einer Toolchain erstellen. Sobald Sie es gelernt haben, können Sie es überall schreiben.

Heute erstellen wir eine Instagram-ähnliche App mit den gängigsten React Native-Komponenten. Die Komponenten „Ansicht“, „Text“, „Bild“ und „FlatList“ werden zum Erstellen des primären Bild-Feeds verwendet. Wir verwenden auch TextInput und ScrollView, um einen Kommentarbildschirm zu erstellen.

Wenn Sie mit der Messe nicht vertraut sind, können Sie hier erfahren, wie Sie eine native React-App erstellen.
Wir müssen die Benutzeroberfläche unserer App in Komponenten zerlegen, die wir dann entwickeln und miteinander verknüpfen. Beginnen wir mit der Analyse der Bild-Feed-Seite. siehe hier.

Wenn wir fertig sind, müssen wir vier Komponenten erstellen:

  • Avatar – Das Profilfoto oder die Initialen des Bildautors
  • AuthorRow – Die horizontale Zeile mit Informationen über den Autor: seinen Avatar und seinen Namen
  • Karte – Das Element im Bild-Feed, das das Bild und Informationen über seinen Autor enthält
  • CardList – Die Liste der Karten im Feed
Avatar

Für einfache Apps ist es am einfachsten, alle unsere Komponenten in einem Komponentenverzeichnis zusammenzuhalten. Aber in einer komplizierten App wie dem nativen Instagram-Klon React und Javascript. Erstellen wir ein neues Verzeichnis mit dem Namen „components“ und darin eine neue Datei mit dem Namen „components“. js
Die Komponenten „Ansicht“ und „Text“ werden mithilfe unserer Avatar-Komponente gerendert. Das Stylesheet wird verwendet und PropTypes werden verwendet, um Zeichenfolgen, Ganzzahlen und Farb-Requisiten zu validieren. Fügen Sie in Avatar den folgenden Code ein. js

import { ColorPropType, StyleSheet, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

export default function Avatar({ size, backgroundColor, initials }) {
  const style = {
    width: size,
    height: size,
    borderRadius: size / 2,
    backgroundColor,
  };

  return (
    <View style={[styles.container, style]}>
      <Text style={styles.text}>{initials}</Text>
    </View>
  );
}

Avatar.propTypes = {
  initials: PropTypes.string.isRequired,
  size: PropTypes.number.isRequired,
  backgroundColor: ColorPropType.isRequired,
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
  },
});
AuthorRow.js

Erstellen Sie eine weitere Datei, AuthorRow.js, im selben Ordner „Components“. Dies ist eine horizontale Zeilenkomponente, die unseren Avatar und den gesamten Namen des Autors enthält. Wir werden größtenteils Dinge importieren, die wir bereits in dieser Datei gesehen haben: StyleSheet, View, Text, PropTypes und React. Wir werden außerdem eine TouchableOpacity hinzufügen, um das Tippen auf den „Kommentar“-Text zu verarbeiten, der uns zum Kommentarbildschirm weiterleitet. Darüber hinaus müssen wir die gerade erstellte Avatar-Komponente und einige der Dienstprogrammfunktionen importieren, die wir zu Beginn des Kapitels in dieses Projekt geklont haben. Fügen Sie zu AuthorRow.js den folgenden Codeblock hinzu.

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';


import Avatar from './Avatar';
import getAvatarColor from '../utils/getAvatarColor';
import getInitials from '../utils/getInitials';


export default function AutoRow ({ fullname, linkText, onPressLinkText }) {
    return (
        <View style = {styles.container}>
            <Avatar
                size={35}
                initials={getInitials(fullname)}
                backgroundColor =  {getAvatarColor(fullname)} 
                />
                <Text style = {styles.text} numberofLines={1}>
                    {fullname}
                </Text>
                {!!linkText && (
                    <TouchableOpacity onPress={onPressLinkText} >
                        <Text numberOfLines={1}>{linkText}</Text>
                    </TouchableOpacity>
)}
        </View>
    )
}

const styles =StyleSheet.create({
    container: {
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    text: {
        flex: 1,
        marginHorizontal: 6,
    },
});
Karte

Als Nächstes erstellen wir die Karte mit AuthorRow und der Image-Komponente und laden Bilder von einem URI herunter. Erstellen Sie eine neue Datei Card.js im Komponentenverzeichnis. Fügen Sie dieser Datei Folgendes hinzu:

import { ActivityIndicator, Image, StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import AuthorRow from './AuthorRow';

export default class Card extends React.Component {
  static propTypes = {
    fullname: PropTypes.string.isRequired,
    image: Image.propTypes.source.isRequired,
    linkText: PropTypes.string.isRequired,
    onPressLinkText: PropTypes.func.isRequired,
  };

  state = {
    loading: true,
  };

  handleLoad = () => {
    this.setState({ loading: false });
  };

  render() {
    const { fullname, image, linkText, onPressLinkText } = this.props;
    const { loading } = this.state;

    return (
      <View>
        <AuthorRow
          fullname={fullname}
          linkText={linkText}
          onPressLinkText={onPressLinkText}
        />
        <View style={styles.image}>
          {loading && (
            <ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
          )}
          <Image
            style={StyleSheet.absoluteFill}
            source={image}
            onLoad={this.handleLoad}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    backgroundColor: 'rgba(0,0,0,0.02)',
  },
});

Einführung in die Erstellung eines Instagram-Klons mit React JS und next js

Hallo, Sie erfahren, wie Sie mit React JS und next js einen Instagram-Klon erstellen. Wir verwenden Bootstrap 5, um unsere Instagram-Klonvorlage zu erstellen. Ich freue mich wirklich, euch alles zu zeigen, denn es ist eine der coolsten Apps, die wir gemeinsam machen werden.

Heute erhalten Sie viel Wissen.

  • Eine davon wird das Abrufen von Objekten von der API, das Erstellen eines Fotostreams oder das Erstellen eines Benutzerprofils sein.
  • Dieser Artikel dient als Roadmap für unsere Bewerbung und beschreibt Schritt für Schritt alles, was wir wissen müssen.
  • Sie können die App entweder selbst erstellen und den Code schreiben, der Ihrer Meinung nach gut funktionieren würde, oder Sie können sie Schritt für Schritt erstellen.

So erstellen Sie eine Next.JS-Anwendung für die React Native Instagram Clone App

Um jede Menge Zeit zu sparen und mich nur auf das Codieren zu konzentrieren, habe ich einen Projektstarter erstellt, den Sie hier finden:

https://github.com/Duomly/nextjs-photo-app-duomly/tree/start-here

Sie müssen das GitHub-Repository klonen und mit dem Codieren in diesem Zweig beginnen.

So erstellen Sie einen Header in Next.js, um Instagram in React Js zu klonen

Der Header ist ein wesentlicher Bestandteil praktisch jedes Programms; wir werden es auch brauchen.

In dieser Situation müssen wir eine einzelne Komponente namens Header erstellen.

Fügen Sie js die erforderliche Vorlage hinzu.
Wie erstellt man in Next.JS eine Fußzeile für React Instagram Clone?

Wir benötigen außerdem das Fußzeilenelement, das der Kopfzeile ähnelt.

  • Eine Fußzeile ist erforderlich.
  • Die Fußzeile ist eine JSX-Datei und -Komponente.
  • Danach müssen wir eine Fußzeilenvorlage mit allen relevanten Schaltflächen erstellen. In meinem Fall gibt es eine Schaltfläche, die Sie zur Website führt, und eine andere, die Sie zum Profil des Benutzers führt.
  • Fügen Sie in der App eine Kopf- und eine Fußzeile hinzu.

Jsx
Unsere Kopf- und Fußzeilen sind vollständig, was fantastisch ist!

Jetzt müssen wir sie in unsere Anwendung integrieren.

Öffnen Sie dazu die App. JSX-Datei und ziehen Sie diese Teile per Drag & Drop in unsere Rendervorlage.

Wie erhält man in React Native oder Next.JS Daten von einer API?
Was ist das Wichtigste bei Bildbewerbungen?

Bilder!

Um Fotos zu erhalten, müssen wir eine fiktive API verwenden, die eine JSON-Datei mit simulierten Daten zurückgibt.

Rufen Sie mit app.jsx Daten aus /mocks/items.json ab.

Sie können den ersten Feueraufruf in den „useEffect“-Hook einbinden.

Wie stellt man eine Kartenkomponente her? Next.js

Die Karte, die Fotos, Hashtags und mit dem Bild verknüpfte Daten enthält, ist der zweite Schlüsselaspekt, den wir in fotobezogenen Anwendungen sehen können.

Um diese Logik in unsere App einzubinden, müssen wir eine „Karte“-Komponente in der Karteikarte erstellen.

Jsx.

Diese Komponente befindet sich im Ordner „components/home“.

Erstellen Sie eine Komponentenvorlage für Karten
Als Nächstes entwickeln wir eine HTML-Vorlage, die innerhalb der Kartenkomponente wie Instagram aussieht.

Ich habe das Bootstrap 5-Kartenelement mit ein paar Änderungen verwendet und empfehle Ihnen, dasselbe zu tun.

Bootstrap 5 ist ein fantastisches CSS-Framework, das die Art und Weise, wie Anwendungen erstellt werden, verändert hat. Es ähnelt Tailwind CSS.

Ich denke, dass sich auch das Elementdesign verbessert hat.

Fügen Sie eine Kartenkomponente auf der Startseite ein.
Die Karte war eine der am schwierigsten zu erstellenden HTML-Vorlagen, und Sie haben sie bereits fertiggestellt. gut gemacht!

Jetzt ist es an der Zeit, diese Karten von unserer Software rendern zu lassen.

Gehen Sie dazu auf die Startseite, in diesem Fall seitens/index. js.

Als Nächstes entwickeln wir eine Kartenfunktion und wenden sie auf unsere Daten an, rendern Kartenkomponenten und senden die Fotodaten an jede von ihnen.

Als Nächstes erfahren Sie, wie Sie eine Route erstellen.

js \sWeiter.

Wir müssen in js kein unterschiedliches Routing erstellen.

Es ist sehr praktisch, wenn wir schnell eine App erstellen müssen.

Um das Routing einzurichten, müssen wir lediglich in das Verzeichnis „pages“ gehen und ein Verzeichnis/eine Datei erstellen, die dem Pfad entspricht, den wir später besuchen möchten.

Wenn wir beispielsweise die Route „/user/1“ haben möchten, wobei „1“ eine ID ist, sollten wir das Verzeichnis „user“ und die Datei „[id].jsx“ darin erstellen.

Lassen Sie uns dies sofort tun, damit wir in den nächsten Schritten die Benutzerprofile besuchen können.

Wie erstellt man in Next.JS eine Detailansicht?
Nachdem wir unser Routing abgeschlossen haben, sollten wir zu [id].jsx gehen und dort etwas Logik schreiben.

Beginnen wir mit der Erstellung einer Standardfunktionskomponente namens „UserPage“.

Diese Komponente sollte Requisiten akzeptieren.

Wie erhalte ich in Next.JS die Routing-ID?
Wir werden uns nicht mit großen Dingen wie Redux oder Zustandsverwaltung an anderer Stelle befassen, da es sich um ein einfaches Projekt handelt, das eine gefälschte API verwendet.

  • Wir haben in diesem Szenario einfach alle Daten genommen und müssen sie nun filtern.
  • Erstellen wir eine Logik, die die Benutzer-ID aus der Route extrahieren kann.
  • Anschließend müssen wir eine Funktion erstellen, die alle Fotos filtert und nur diejenigen auswählt, die für unsere Benutzer relevant sind.

Nehmen wir an, der besuchte Benutzer verfügt über keine Daten. In diesem Fall sollte der Router uns zum Pfad „/“ weiterleiten.

Als letzten Schritt sollten wir den State-Hook erstellen und seinen Getter „bookmarked“ und Setter „setBookmarked“ nennen, mit „false“ als Standardwert.

Erstellen Sie Ihre eigene Benutzerseitenvorlage.
Dies ist der letzte Schritt, in dem wir Vorlagen entwerfen müssen.

Ich habe Bootstrap 5 verwendet, um die Vorlage zu erstellen, genau wie ich es beim Schritt der Kartenerstellung getan habe.

Sie können sich den Film auf YouTube ansehen, um zu sehen, wie ich es geschafft habe, oder Sie können Ihren eigenen Code schreiben und ihn anschließend vergleichen, um zu sehen, ob Sie es ähnlich gemacht haben.

Der Versuch, die Aufgabe selbst durchzuführen, ist eine viel effektivere Lernmethode. Es ist immer noch besser, wenn man viele Fehler macht.

Wie kann ich in Next.js Stile hinzufügen?

  • Der Stil ist die letzte Phase der Bewerbung.
  • Bei der Arbeit an einem Frontend-Projekt ist das Styling immer wichtig.
  • Auch wenn Sie vorgefertigte Frameworks wie Bootstrap oder Tailwind verwenden, wird es einige Änderungen geben.
  • Ich musste in meiner Situation einige Polsterungen aufpolieren oder Leerräume als „Pausenräume“ einrichten.
  • Als nächstes musste ich die Bootstrap-Farbeinstellung auf reines Schwarz umstellen.

Das Erstellen eines Instagram-Klons mit React JS und Next JS ist jetzt abgeschlossen.

Herzlichen Glückwunsch zum Abschluss Ihrer Instagram-Klonanwendung!

In der heutigen Folge haben Sie gelernt, wie Sie mit React.JS und Next.JS erstaunliche Anwendungen erstellen.

Ich freue mich wirklich darauf, Ihnen all diese erstaunlichen Themen beizubringen und zu beobachten, wie unsere Schüler diese hervorragenden Talente entwickeln.

Hinterlassen Sie uns einen Kommentar

Nach oben Weiter: Gutschrift wie App-Entwicklungskosten Wie viel kostet es, eine App wie Cred zu erstellen?
Translate »