code with APPGREGATOR
  • 🚲Basic
    • HTML + CSS
      • HTML
      • CSS
    • Javascript
      • Basic
        • JS Basic
        • Operator
        • Control Flow
          • if else
          • loop
          • switch - case
        • Objects
        • Arrays
        • Functions
      • Intermediate
        • Object Oriented Programming
        • Objects
        • Prototype
        • Prototypical inheritance
      • Advanced
        • ES6
          • ES6 Classes
          • ES6 Tooling
        • Typescript
    • Git
      • github
      • installation
  • 💻Front End
    • front end vs backend
    • React JS
      • Basic
        • Installation
        • Chakra library
        • Folder naming
        • Your first page
        • Your first Component
        • Reactrouter
        • AppLayouts
        • Pages
        • AppComponents
          • Forms
          • Toast
        • AppBars
      • Authentication
        • authentication with context
        • auth provider
        • Login
        • Role Admin
        • Signup
      • Intermediate
        • Life Cycle
        • React Router Param
        • RERTful API
          • axios
          • async await function
          • try catch
          • then catch
          • refactoring
        • Hooks
          • UseState
            • onChange
          • useEffect
          • useContext
        • Utils
          • Breadcrumb
          • Ethererum Helper
        • Components
          • Modal
      • Advance
        • Form
        • Authentication
        • Firestore
          • Installation
          • Create
          • Read
          • Update
          • Delete
        • Redux
          • Page 2
        • Appgregator
        • Firebase Hosting
      • Templates
        • Payment Xendit and Midtrans
        • AppCarousel
        • AppCard
        • AppBarSide
        • AppBarHeader
        • AppBarTable
        • AppFeature
      • Used Case
        • Image Upload With Dropdown
        • Bluetooth
      • NPM
        • Stripe Payment Firebase
        • axios
        • Firebase Authentication
        • formik
        • storybook
        • reactrouter
        • Chakra
        • moment
        • Webpack
        • Ethers
          • Installation
          • Getting started
          • Connecting with metamask
          • Connecting to Ethereum: RPC
          • Read Contract
          • Write Contract
          • Refactoring
        • dotenv
        • Typesense
    • React Native
      • Basic
        • Installation
        • Nativebase
        • React Navigation
        • React Stack
      • Intermediate
        • Authentication
          • Sign Up
          • Login
        • FlatList
        • AsyncStorage
        • Context
        • firebase
          • Installation
        • Expo Notification
      • Advance
        • Templates
          • Academy / courses
        • react-native-firebase
          • ios
          • android
        • expo
          • expo build ios
          • Setup expo notification with FCM
        • Google Analytics IOS
        • firebase
          • installation
      • NPM
      • Templates
        • Installation Native-Base
        • Installation Expo Vector Icons
        • Navigation
        • Utils
        • Use Context Loading & Notif
        • Login Screen
        • Signup Screen
        • Logic for Loggedin
        • Academy
        • Settings
        • Feeds
    • next JS
      • Installation
        • Installation next js
        • Installation chakra
      • Routing
  • 💾Databases
    • SQL vs noSQL
    • MySQL
      • What is MySQL
        • Video Course
        • Installation
      • CREATE
      • READ
        • group by date
      • UPDATE
      • DELETE
        • Delete duplicate rows
    • mongoDB
      • Installation
      • query
      • Create
    • firestore
  • 🏭BACK END
    • How backend works
    • ExpressJS
      • Basic
        • Installation
        • Router
        • CORS
        • EJS / PUG
        • connect to your DB
          • MongoDB
            • Installation
            • create MongoDB connection
      • Intermediate
        • Working with files
          • Images (jpeg, png, bmp, tiff, gif)
          • .txt
      • Advance
        • hashing data
        • firebase
          • Real time firebase
            • Installation
            • Read Data
            • Create Data
        • crypto | hashing
      • NPM
        • typeORM
          • Installation
          • Create
          • Read
      • Overview
        • select
      • Function
        • Update
      • Trigger
        • Delete
          • Rules Example
      • Handling Request
        • Files type image
    • Cloud Functions
      • Basic
      • Environment Variables
        • CORS
    • Solidity
      • Basic
        • Hello World
        • Value Type
        • Function
        • State Variables
        • Local Variables
        • Global Variables
        • View & Pure Functions
        • Counter
        • Default Value
        • Constants
        • if else
        • For and While Loops
        • Error Handling
        • Function Modifier
        • Constructor
        • Ownable
      • Intermediate
        • Function output & destructuring
        • Arrays
        • Mapping
        • Structs
        • Enum
        • Data Locations
        • Simple Storage
        • To Do List
        • Iterable mapping
        • Array shifts
        • Array Replace Last
        • Events
        • Inheritance - Override
        • Multiple Inheritance
        • Calling Parent Constructors
        • Calling Parent Functions
        • Visibility
        • Immutable
        • Payable
        • Fallback
        • Send Ether
        • Ether wallet
      • Advanced
        • Calling other contract
        • Interface
        • Call
        • Delegatecall
        • New
        • Library
        • hash
        • Verifying Signature
        • Access Control
        • Deleting Contracts
        • Piggy Bank
        • How does call encode which function to call?
      • ERC20
        • Multi Sig Wallet
        • Re entrancy
        • Seven Eth
        • King of Eth
        • Wallet Hijack
        • Misaligned Storage
        • Bypass Contract Size
        • Multi Token Bank
        • ETH flash loan
        • ERC20 Flash Loan
      • ERC721
        • Withdraw
        • mint Free & paid
        • Dutch Auction
        • English Auction
        • Get Address Token Owned
        • Override functions
      • Deploy
        • Basic Contract
        • ERC721 contract with openzeppelin
      • Contracts samples
  • 🧑‍🔧Tech Stack
    • 📰Apify
      • installation
      • functions
    • ☁️CloudFlare
      • Video
    • ⚙️Appgregator
    • 🔥Firebase
      • Installation
      • Authentication
        • Installation
        • Sign Up Users
        • Login
        • Get User credentials
        • Update User Credentials
        • Sends Email Verification
        • Reset Password
        • Forgot password via email
        • Custom Auth
      • Realtime Database
        • Sign Out User
      • FireStore Database
        • Create
          • addDoc, Collection
          • setDoc, Doc
          • updateDoc, doc
          • Server timestamp
          • Update nested objects
          • Update elements in array
          • increment
          • Batch
        • Read
          • getDoc
          • getDocs
          • getDocFromCache
          • query,where
          • onSnapshot (real-time update)
        • Update
        • Delete
        • Rules
          • Test Mode
          • auth requried
          • locked mode
          • Example
        • Study Case
          • Using Pagination With Firestore
          • Search Query With Firestore
        • Query
      • Hosting
      • Storage
        • Installation
        • Upload
      • Functions
        • Basic
          • Setup Firebase Function
        • Study Case
          • Tutorial: Serverless Backend With Firebase Function + Express + Sequelize + Cloud SQL
      • Cloud Messaging
        • Frontend
          • Installation
          • Get user's token
          • public
          • Testing
          • Topic
        • Backend
          • Installation
          • utils
          • subscribe / unsubscribe Topic
      • App Check
    • 🏢Servers
      • in-app messaging
      • Digital Ocean
      • Google Cloud Platform
        • firebase
        • Cloud Function
        • Cloud Storage
          • Combine 2 image and upload
        • App Engine
          • Logging
          • app.yaml / env
          • gcloud app deploy
        • Cloud Scheduler
        • Cloud Run
        • mySQL
          • Connect DB to local
          • Connection
          • Config
          • Common errors
        • Compute Engine
      • Heroku
      • Amazon
      • Github Hosting
    • 🧰Tools
      • ngrok.io
      • Upvoty
      • rss2json.com
      • cronitor.io
  • 🛣️Strategies
    • Management
      • SCRUM methodology
    • Development
      • firebase Stack
      • Tech Stack
      • Serverless
    • Coding
      • Design Patterns
    • Servers
      • Location Speed
    • Databases
      • One Call Feed
      • Handling Real Time Database
  • 🏗️Projects
    • docial.com
      • Technologies
      • Infrastructure
Powered by GitBook
On this page
  • Page
  • CONGRATULATIONS 🍾🎊 you just made your first page in react

Was this helpful?

  1. Front End
  2. React JS
  3. Basic

Your first page

PreviousFolder namingNextYour first Component

Last updated 2 years ago

Was this helpful?

Page

Create your first page by adding a new file in Pages folder src/Pages/About.jsx

type in your terminal in your About.jsx to create function About.jsx

rfce

CONGRATULATIONS 🍾🎊 you just made your first page in react

💻