React Loading Screen Tutorial | React JS React-Loader-Spinner

React Loading Screen Tutorial | React JS React-Loader-Spinner

Web Development with Xtina

3 года назад

15,883 Просмотров

🗣 In this video we go over how to use a ternary operator and react-loader-spinner to create a loading screen within your React JS application.

~~~~~~~~~~~~~~~~~
| Companion Files |
~~~~~~~~~~~~~~~~~
📚 For a list of dependencies AKA What You Need (WYN_ LoadingScreen.pdf), and companion files, check out the project on GitHub at:
🤓https://github.com/xtina-park/react-loading

~~~~~~~~~~~~~~~~~
| Time Stamps |
~~~~~~~~~~~~~~~~~
00:00 Video intro
00:17 Previous application (Pomodoro app)
00:34 Why I needed a loading screen (example)
01:07 Terminal/Command Line + create-react-app
03:00 Coding
08:25 Demo of every loader type
08:54 More coding
12:24 Outro + next video

~~~~~~~~~~~~~~~~~~~~~~~~~
| Other Videos You Might Like |
~~~~~~~~~~~~~~~~~~~~~~~~~
🌟 React Navbar & Footer: https://www.youtube.com/watch?v=PAQiYxUTUNI&t=61s
🌟 React Loading Screen: https://www.youtube.com/watch?v=pnpisvpSTUg&t=240s
🌟 First React App: https://www.youtube.com/watch?v=7O1VZTQB-HQ

~~~~~~~~~~~~~~~~~
| Connect with me! |
~~~~~~~~~~~~~~~~~
💃 My website: https://xtinapark.com/
💬 Twitter: https://twitter.com/xtina_park

---------------------------------------------------------------------------------------------------------------------

Key Words: react, react js, loading, loading screen, loading spinner, ternary operator, ternary, react website, react tutorial, tutorial, components, create-react-app, react hooks, useState, useEffect, visual studio code, VS code, yarn, npm, es7, es7 package, google, web app, beginner React app, beginner React JS app, beginner web app, front-end, front end, front-end web development, front-end web dev, software engineering, software engineer, SWE, html, css, javascript libraries, javascript, js, technology, tech, programming, programming language, webdev, web dev, web development, web design, entrepreneurship, entrepreneur, business, crowdfunding, foreign language mobile app, xtina, xtinapark,

Тэги:

#react #react_js #loading #loading_screen #loading_spinner #ternary_operator #ternary #react_website #react_tutorial #create-react-app #react_hooks #useState #useEffect #visual_studio_code #VS_code #yarn #npm #es7 #es7_package #google #web_app #beginner_React_app #beginner_React_JS_app #beginner_web_app #front-end #front_end #SWE #html #css #javascript #js #technology #tech #programming #web_dev #web_design #xtina #xtinapark #react_loading_spinner #loading_spinner_in_reactjs #reactjs_tutorial
Ссылки и html тэги не поддерживаются


Комментарии:

@marker2916
@marker2916 - 19.12.2022 03:09

Yo, this is literally the best video I could find on the internet. thanks!

Ответить
@zoomescrow4037
@zoomescrow4037 - 16.08.2022 10:27

how u import more than 1 component above clock? on me its eror

Ответить
@SamuelGuedesDev
@SamuelGuedesDev - 02.08.2022 15:09

aonde vim parar kkkkk

Ответить
@egajelic
@egajelic - 26.07.2022 10:18

Kinda familiar with the drum sound, i wonder why

Ответить
@bedirhanerguven1088
@bedirhanerguven1088 - 20.07.2022 13:49

this video was really helpful for me, thank you for your effort .. make more tutorials :)

Ответить
@PashaRomanovich
@PashaRomanovich - 11.06.2022 01:10

Thanx for the video! Thanx for the loader! and hearts)))

Ответить
@BecodemyOfficial
@BecodemyOfficial - 13.05.2022 04:21

💝Great video carry on

Ответить
@wasifnadeem6209
@wasifnadeem6209 - 15.04.2022 14:37

Exactly what I was looking for, Thank you :)

Ответить
@sdvloger621
@sdvloger621 - 04.03.2022 11:04

you also deal with react -native or only with this ? {Reply==true? <Text>i'll subscribe your channel 😇</Text> : <Text> i'll watch your video</Text>}
BYW i was looking you in entire session ☺

Ответить
@EvaLasta
@EvaLasta - 17.02.2022 23:33

Make more tutorials pleaseeee 🥺

Ответить
@elmasx
@elmasx - 28.01.2022 17:10

Are you alive

Ответить
@manansharma5081
@manansharma5081 - 13.01.2022 12:40

But what is the use, the second component starts rendering only once preloader anim is finished displaying, Is there any way by which we can end the animation once the main content has rendered?

Ответить
@diego.carneiro
@diego.carneiro - 08.01.2022 07:20

Nice job!

Ответить
@mtas5560
@mtas5560 - 16.12.2021 04:21

More videos please empower us!!!

Ответить
@ruchikasuryawanshi1840
@ruchikasuryawanshi1840 - 13.12.2021 01:44

I am getting this error: Module not found: Can't resolve 'react-loader-spinner'

Ответить
@Fatima-ie5kj
@Fatima-ie5kj - 05.12.2021 01:15

awesome video tysm for providing quality content i have one request can u make a video (progress bar appear on top when routes change)how to do this?

Ответить
@rustamthakur9359
@rustamthakur9359 - 03.12.2021 13:45

I want to add a spinner in the video player, not on the webpage please tell me how to do it.

Ответить
@vinhhuynh8146
@vinhhuynh8146 - 02.12.2021 06:32

Thank you so much, your video helped my problem

Ответить
@animationdiary3513
@animationdiary3513 - 29.11.2021 21:26

Enjoyed watching and learning the needs, Thank you.

Ответить
@user-ox5wo2uh5j
@user-ox5wo2uh5j - 28.11.2021 12:24

This video is very very helpful!

Ответить
@sebastianronquillo219
@sebastianronquillo219 - 18.11.2021 03:46

Tienes una voz muy uwu y estoy re empezando a programar mejor canal de la historia

Ответить
@yavuzkuru4864
@yavuzkuru4864 - 25.09.2021 19:06

thanks you. ı use your code my project. :)

Ответить
@user-hk7wh9jm7l
@user-hk7wh9jm7l - 23.09.2021 18:19

but this is based on a time. what if I want to display a loading screen while the website is loading. I don't need to set a time

Ответить
@hoquang1386
@hoquang1386 - 11.09.2021 07:25

omg, you're so pretty

Ответить
@Eduardo-fx9ih
@Eduardo-fx9ih - 08.09.2021 01:13

great video! i'm suscribed now

Ответить
@mayurbahuguna8438
@mayurbahuguna8438 - 04.09.2021 08:15

Somebody tell me how can I marry her!

Ответить
@mohammedazfersheikh6647
@mohammedazfersheikh6647 - 01.09.2021 15:54

Thanks a lot. Great video

Ответить
@doniyorotamurodov5624
@doniyorotamurodov5624 - 28.08.2021 15:04

You are Wonderfull!

Ответить
@sito8943
@sito8943 - 28.08.2021 05:06

Ty, good video and helpful :)

Ответить
@RijwanKhan
@RijwanKhan - 22.08.2021 13:35

You are so beautiful 😘☺️

Ответить
@GGxEpsilon
@GGxEpsilon - 16.08.2021 04:13

If you decide on making future videos, great video.

Ответить
@tijanisylla1348
@tijanisylla1348 - 03.08.2021 09:15

Nice!

Ответить
@abdullahclementabdulshekur6736
@abdullahclementabdulshekur6736 - 02.08.2021 16:27

wow beautiful face with smart brains, I'm in love with you already lol

Ответить
@gradientO
@gradientO - 29.07.2021 16:25

Kool video

Ответить
@laxmigold1225
@laxmigold1225 - 27.07.2021 11:00

👍🏻👍🏻🎉🔥🤙🏻

Ответить
@sunnykosle8865
@sunnykosle8865 - 26.07.2021 19:36

Nice video

Ответить
@mohammedaslam2912
@mohammedaslam2912 - 19.07.2021 18:51

can you do sveltekit videos too?

Ответить
@inglesrentable7072
@inglesrentable7072 - 12.07.2021 06:03

Type="Hearts"

Ответить
@abdullaalnoman2962
@abdullaalnoman2962 - 01.07.2021 08:18

Awesome

Ответить
@rojanyepes7655
@rojanyepes7655 - 29.05.2021 03:24

short and sweet tutorial thankyouu </3

Ответить
@oguz4158
@oguz4158 - 13.05.2021 14:22

I wanna ask a question.. you develope only on react? Do use any laravel framework with react?

Ответить
@magdasokolovic
@magdasokolovic - 27.04.2021 08:37

super useful, thanks!

Ответить
@lavdev
@lavdev - 14.04.2021 10:35

love you

Ответить
@agoslaurini5137
@agoslaurini5137 - 13.04.2021 21:26

new fan here!

Ответить
@darkmift
@darkmift - 12.04.2021 02:39

Avoid using style attributes like align=center.
Instead use style or a class.

Cross browser wise there may be some use cases where it will not work

Ответить
@m3a4
@m3a4 - 10.04.2021 23:18

Thank you so much !!

Ответить
@martinfake3
@martinfake3 - 02.04.2021 07:41

Gracias! Saludos desde Argentina. Sos hermosa!!

Ответить
@siamqtr
@siamqtr - 21.03.2021 22:53

Thanks, very helpful. How would i do the same if i have an api being called in my useeffect?

Ответить