Ope Afolabi
Ope Afolabi
  • Видео 33
  • Просмотров 276 588
Build A Live Streaming App in React | ZEGOCLOUD
What's up everyone! Today we're going to be building a live streaming app using react and zegocloud's live streaming sdk.
· Get 10000 free mins with ZEGOCLOUD: bit.ly/3yDzpCQ
· Build Apps in 30 mins with UIKits: bit.ly/4aGoZQp
· 100% customized live streaming SDK: bit.ly/3x2LpNP
· How to build a Live Streaming App: bit.ly/3RbHwgr
ZEGOCLOUD live streaming SDK allows you to easily build your live streaming apps within minutes.
#zegocloud #livestreamingsdk #streamingservice #webrtc
Просмотров: 110

Видео

React Props Tutorial for Beginners - Learn Props in 7 mins
Просмотров 1173 месяца назад
Hey everyone! In this video, we're going to dive into the world of props in React. Understanding props is essential because they are a fundamental concept in React development. Let's get started! 👨‍💻 Follow me on Github: github.com/gbopola 🖼️ Follow me on Instagram: ope.afolabi_
JavaScript Spread Operator Tutorial for Beginners
Просмотров 263 месяца назад
In this video, we're going to look at the spread operator in JavaScript. #javascript #javascripttutorial #programming
JavaScript Destructuring Tutorial For Beginners
Просмотров 593 месяца назад
Hey all, in this video, we're going to be learning about destructuring in JavaScript. My Github: github.com/gbopola Follow me on Instagram 👇 ope.afolabi_
How To Create A Website With Video Background | HTML & CSS
Просмотров 16811 месяцев назад
What's good everyone. Today, I'll be showing you how to create a website with a video background using HTML and CSS. New York Video Link: www.pexels.com/video/footage-of-people-and-surroundings-of-the-busy-time-square-street-3202634/ Codepen link: codepen.io/gbopola/pen/QWzodjX Github: github.com/gbopola Follow Me On Instagram👇🏿: ope.afolabi_ Music from #Uppbeat (free for Creator...
Build A Video Call App Using React and ZEGOCLOUD Video Call API
Просмотров 4,6 тыс.Год назад
Get ZEGOCLOUD UIKits (low code) for 10,000 free mins: bit.ly/3JKgh8W Learn more about ZEGOCLOUD video call API: bit.ly/44p9UA4 ZEGOCLOUD Voice & Video Call API: bit.ly/3O2muQj Hi all, in this video we are going to be building a video call app using React.js and ZEGOCLOUD. Instagram: ope.afolabi_ Music from Uppbeat (free for Creators!): uppbeat.io/t/kidcut/flamingo License code: 5...
Build A Modal in React JS | React JS Popup Using Hooks
Просмотров 1,1 тыс.Год назад
In this video, I'm going to show you how to build a modal in react. Code: github.com/gbopola/react-modal Follow me on Instagram 👇: ope.afolabi_ Timestamp: 00:00 Demo 00:31 Installing React 01:53 Including google fonts 05:15 Creating modal component 06:20 Styling Modal 16:37 Adding functionality Music from #Uppbeat (free for Creators!): uppbeat.io/t/avbe/night-in-kyoto License cod...
React Responsive Navbar Tutorial with Styled Components
Просмотров 4,6 тыс.Год назад
In this video, we will be creating a responsive navbar using React, React Router v6, and Styled Components. We will start by setting up a new React project and installing the necessary dependencies. Then, we will dive into creating the navbar component using Styled Components to style it. We will also make it responsive using media queries. Next, we will integrate React Router v6 into our navba...
Build A Weather App Using HTML, CSS and JavaScript
Просмотров 13 тыс.Год назад
Timestamp: 00:00 Intro 01:19 HTML 13:00 CSS 26:00 JavaScript and OpenWeather API In this video, we will learn how to build a weather app using HTML, CSS, and JavaScript. We'll learn how to use HTML to structure your app's layout, CSS to style it and make it responsive, and JavaScript to fetch data from OpenWeather API and dynamically update the user interface based on the user's location. By th...
React Todo List App Tutorial - React JS Project Tutorial for Beginners
Просмотров 236 тыс.Год назад
Hey guys, welcome to this tutorial! In this video, we'll be covering the basics of creating a functional and interactive to-do list using React. Whether you're new to React or just looking to improve your skills, this tutorial will provide you with the foundation you need to start building amazing applications. In this video, we'll be taking a step-by-step approach to building a Todo List App f...
Button Loading Animation | HTML, CSS & JavaScript
Просмотров 339Год назад
Today, we're going to be learning how to create a button loading animation with html, css and javascript. Timestamp: 00:00 Intro 00:11 HTML 00:33 CSS 06:40 JS Codepen: codepen.io/gbopola/pen/poZLrXj Follow me on Instagram 👇 ope.afolabi_ #css #html #javascript #javascriptforbeginners
React Search Filter in 5 Minutes
Просмотров 3,1 тыс.Год назад
In this video, we will be building a search filter using React. Instagram 👇 ope.afolabi_ Github Repo Starter: github.com/gbopola/react-search-filter/tree/starter Final: github.com/gbopola/react-search-filter Music from #Uppbeat (free for Creators!): uppbeat.io/t/prigida/holding-you License code: YWRZ8PUAY496YAFL #react #reactjs #reactjsforbeginners
How to Create An Animated Search Bar with HTML & CSS Only
Просмотров 645Год назад
Hey everyone, we're gonna be creating an animated search bar with html & css. Timestamp: 00:00 Intro 00:07 HTML 02:00 CSS Codepen: codepen.io/gbopola/pen/dyjZNQJ Follow me on social media: Instagram: @ope.afolabi_ Music from #Uppbeat (free for Creators!): uppbeat.io/t/prigida/holding-you License code: GXBROUVQYGNDN1V7 #cssforbeginners #cssanimation #css
Underline On Hover Effect | CSS Animation
Просмотров 3,6 тыс.Год назад
Underline On Hover Effect | CSS Animation
Build A Simple Countdown Timer with JavaScript | Coming Soon Page
Просмотров 325Год назад
Build A Simple Countdown Timer with JavaScript | Coming Soon Page
Battery Charging Animation | HTML, CSS & JavaScript
Просмотров 147Год назад
Battery Charging Animation | HTML, CSS & JavaScript
How To Show & Hide Password Using JavaScript
Просмотров 208Год назад
How To Show & Hide Password Using JavaScript
Custom Range Slider using HTML, CSS & JavaScript
Просмотров 827Год назад
Custom Range Slider using HTML, CSS & JavaScript
How to Create Button with Pressed Effect | 3D Button HTML and CSS
Просмотров 322Год назад
How to Create Button with Pressed Effect | 3D Button HTML and CSS
Responsive Navigation Bar using HTML, CSS & JavaScript
Просмотров 139Год назад
Responsive Navigation Bar using HTML, CSS & JavaScript
How To Create a Navigation Bar with Icons in HTML and CSS | Navbar with Icons
Просмотров 347Год назад
How To Create a Navigation Bar with Icons in HTML and CSS | Navbar with Icons
How To Build a Menu Icon using HTML and CSS
Просмотров 319Год назад
How To Build a Menu Icon using HTML and CSS
Build A Rock Paper Scissors Game Using JavaScript
Просмотров 482Год назад
Build A Rock Paper Scissors Game Using JavaScript
Advice Generator App with React | Frontendmentor Challenge
Просмотров 1,4 тыс.Год назад
Advice Generator App with React | Frontendmentor Challenge

Комментарии

  • @worlayramvasmark7918
    @worlayramvasmark7918 4 дня назад

    To be honest I had a hard time understanding your code but all round it was very good.

    • @opeafolabi
      @opeafolabi 4 дня назад

      Yh react can be difficult to understand. Or maybe it was me lol

  • @NeilSharma-u5n
    @NeilSharma-u5n 8 дней назад

    thanks bro

  • @jarretcannon1128
    @jarretcannon1128 15 дней назад

    Just had to do build this exact app in a technical interview.

  • @ARJANHURA
    @ARJANHURA 20 дней назад

    which app do u use for coding

  • @ethioanonymous1213
    @ethioanonymous1213 28 дней назад

    its nice tytor ....iam confused on how you set the id i get error...

  • @azaelrondon2150
    @azaelrondon2150 Месяц назад

    Excellent Tutorial!

  • @zawishnawaz2926
    @zawishnawaz2926 Месяц назад

    Really Appreciated Man, Keep it up 👏👏👏👏👏

  • @robkhold3730
    @robkhold3730 Месяц назад

    Thanks! I'd like links or code for the npm:s for the icons etc. I'd prefer you made the app without all this extra stuff. :) Of course this whole uuid is making things unnecessary complicated for beginners...Just causing trouble.

  • @herusarmstrong8930
    @herusarmstrong8930 Месяц назад

    What theme do you use?

  • @kunalpassan3381
    @kunalpassan3381 Месяц назад

    my addTodo function is not working, any suggestions?

    • @opeafolabi
      @opeafolabi Месяц назад

      does it give an error?

  • @JessePancho
    @JessePancho Месяц назад

    where did you copy the v4 as uuidv4 from?

    • @opeafolabi
      @opeafolabi Месяц назад

      @@JessePancho it's in the docs

  • @DanielBrown-b5g
    @DanielBrown-b5g Месяц назад

    It does not work for me

  • @isvzz
    @isvzz Месяц назад

    Raxmat aka

  • @jonathanbair7688
    @jonathanbair7688 Месяц назад

    im not getting a horizontal bar for some reason do you know why?

  • @FGA-47
    @FGA-47 2 месяца назад

    Thanks

  • @Rayquon-i5s
    @Rayquon-i5s 2 месяца назад

    thnx brah

  • @DaniyalMutahhar
    @DaniyalMutahhar 2 месяца назад

    You did explained it well but for newbies, they want to make the ui of their starting apps to be cool, so it would have been great if you had provided the css also :) Just an opinion

    • @opeafolabi
      @opeafolabi 2 месяца назад

      The code is the github repo but if you meant code it from scratch then you are right, it would have been better. Glad you liked the video🙏

  • @suleymanbey5152
    @suleymanbey5152 2 месяца назад

    very useful sharing thank you Ope 👋

  • @bluray9272
    @bluray9272 2 месяца назад

    Im a bit confused, at around 6:38 when the <ToDoForm /> tag is being put, in my vs code it is not auto importing the "import" statement. I have looked on stack and other videos on youtube, but nothing is seeming to make it auto import.

  • @z.sayari
    @z.sayari 2 месяца назад

    Thanx a lot bro , awesome , clear and simple explanation .

  • @_Pars__
    @_Pars__ 2 месяца назад

    great

  • @snowphoenix2550
    @snowphoenix2550 2 месяца назад

    ERROR in ./src/Components/Todo.js 5:0-66 Module not found: Error: Can't resolve '@fortawesome/free-solid-svg-icons' in 'C:\Users\BEST SOLUTION\Documents\FSWD\projects\Todo list\toddo\src\Components

    • @opeafolabi
      @opeafolabi 2 месяца назад

      Have you installed it. If you have it could be that it's not being imported correctly

  • @VugarBakhshalizade
    @VugarBakhshalizade 3 месяца назад

    You just don't explain any shit in this video😂 0 out of 10. Really.

  • @BrainBuster4
    @BrainBuster4 3 месяца назад

    Can you help my code isn't working

    • @opeafolabi
      @opeafolabi 3 месяца назад

      sure what's the problem?

  • @Tejaswini-mm1yc
    @Tejaswini-mm1yc 3 месяца назад

    Please do video on how to customise Material UI in Reactjs

  • @qwesicodes
    @qwesicodes 3 месяца назад

    Thanks man! 👍 👍

  • @edunjobiemmanuel4200
    @edunjobiemmanuel4200 3 месяца назад

    Nice one

  • @TheAniBueatiful
    @TheAniBueatiful 3 месяца назад

    Probably one of the best videos I've seen so far about React and using it to create a project. You did an amazing job explaining each segment of this project.

  • @aydynbai
    @aydynbai 3 месяца назад

    3:27 "rafc". "Code" -> "Preferences" -> "Configure User Snippets" -> "New Global Snippets File" - <any-name> : { "React Component with Filename": { "prefix": "rafc", "body": [ "import React from 'react';", "", "export const ${TM_FILENAME_BASE} = () => {", " return (", " <div>${TM_FILENAME_BASE}</div>", " );", "};" ], "description": "Creates a React component with the filename as the component name" } }

  • @anilsuyal
    @anilsuyal 3 месяца назад

    Thanks man! this was amazing.

    • @opeafolabi
      @opeafolabi 3 месяца назад

      Glad you liked it!

  • @raphaelwright4882
    @raphaelwright4882 3 месяца назад

    thanks man

  • @AyushKumar-ju9jj
    @AyushKumar-ju9jj 3 месяца назад

    Poor quality video. Should have explained also... just typing and speaking that at the same time doesn't do the work! (Rating: 4/10)

  • @jdhenckel2
    @jdhenckel2 4 месяца назад

    what version of NODE and NPM are you using?

  • @Shebajsahikh380
    @Shebajsahikh380 4 месяца назад

    for learning logices implement your video is very good thats i learned a lot frome this viedeo that how we can give style and some logice building in react

  • @RaphaelKanada
    @RaphaelKanada 4 месяца назад

    You're really a good tutor keep up the good work bro

    • @opeafolabi
      @opeafolabi 4 месяца назад

      Thanks I appreciate it! 🙏

  • @JohnnyOnTheMend
    @JohnnyOnTheMend 4 месяца назад

    I was struggling with this on my current project. Thanks so much for the thorough demo^^

  • @iyobosaomorowa9810
    @iyobosaomorowa9810 4 месяца назад

    Great project

  • @StephenGutu-g2v
    @StephenGutu-g2v 4 месяца назад

    i finally completed the project thankyou so much for the tutorial

  • @walterdiaz2003
    @walterdiaz2003 4 месяца назад

    Excellent walk through!. I made sure I watched the ads completely to support.

    • @opeafolabi
      @opeafolabi 4 месяца назад

      thank you for that, much appreciated, glad it helped :)

  • @Abdulbaasit_abdulmatin2008
    @Abdulbaasit_abdulmatin2008 4 месяца назад

    Your name is pronounced O - as in Orange , P as in 'K P'(morphed together) and E as in egg You are of yoruba descendant Pronounce your name well

  • @wisdombuiltestate
    @wisdombuiltestate 5 месяцев назад

    Thank you alot man

  • @tanpham8885
    @tanpham8885 5 месяцев назад

    @4:58 , where did you get the code to paste into App.css?

    • @opeafolabi
      @opeafolabi 5 месяцев назад

      from the github repo, link is in the description

  • @onanusiabdullateef
    @onanusiabdullateef 5 месяцев назад

    so very explanative

  • @Sammy102093
    @Sammy102093 5 месяцев назад

    Good tutorial, trying to get back into coding with React after spending so much time on Python and Ansible

    • @opeafolabi
      @opeafolabi 5 месяцев назад

      Nice. I've been working with python recently for a web scraping project.

  • @VijayKumar-nl7sp
    @VijayKumar-nl7sp 6 месяцев назад

    Thank you very mucb.

  • @shabeat
    @shabeat 6 месяцев назад

    thanks lot ❤❤

  • @karolinamaka8929
    @karolinamaka8929 6 месяцев назад

    Very nice!

  • @russellandrady
    @russellandrady 6 месяцев назад

    Alright. Thanks mate. I used typescript instead js. So I had to create interfaces in each component in order to call the functions. If you know typescript, can you say is that a good way to do? And actually I didn't want to use editTodo function which you created in TodoWrapper. And it works.

    • @opeafolabi
      @opeafolabi 6 месяцев назад

      Typescript is standard in the industry now, I chose not to include it for this tutorial because its aimed mostly at beginners.

  • @abiygirma1925
    @abiygirma1925 6 месяцев назад

    I'm following the tutorial and I'm At around 13:00 mark. When I click the 'add task' button to see if the state has been updated in the parent component, I get an empty array. Then when I add another task, I get the first task in the array, etc etc. Any idea what is going on?

    • @abiygirma1925
      @abiygirma1925 6 месяцев назад

      I tried putting the print statement in a useEffect because I thought the state update was happening asynchronously. Now the log is happening twice

    • @torkz1031
      @torkz1031 4 месяца назад

      @@abiygirma1925 having this same issue, no use effect logs an empty array, adding a use effect causes it to log the value twice before u actually add the task

    • @torkz1031
      @torkz1031 4 месяца назад

      @opeafolabi any help here?

    • @abiygirma1925
      @abiygirma1925 4 месяца назад

      @@torkz1031 "no use effect logs an empty array," what do you mean?

    • @torkz1031
      @torkz1031 4 месяца назад

      @@abiygirma1925 so if leave it as he's written it without the useEffect, in the console it will log an array with a length of zero. however i took a break for a while and came back and it's working now. i have no idea why or what i changed lol

  • @abiygirma1925
    @abiygirma1925 6 месяцев назад

    Can you break down the customizations and theme you use for vscode? i've been trying to get a good one for ages.

    • @opeafolabi
      @opeafolabi 6 месяцев назад

      the theme is ayu dark theme, if you don't have emmet also, you can download this extension: ES7+ React/Redux/React-Native