The Path to UI Development: A Roadmap to Success
Hi there, I'm Azad Malik Rohit, a UI developer with over 13 years of experience in front-end development. I'm passionate about creating beautiful and functional user interfaces that enhance the user experience. Over the years, I've honed my skills in various technologies such as React, JavaScript, and Next.js, among others.
Recently, I decided to share my knowledge and expertise with the world by creating a YouTube channel called "Learn Coding with Bhai @azadMalikRohit". On this channel, my team and I create videos related to UI development, including tutorials, tips and tricks, and best practices. Our goal is to make coding accessible and enjoyable for everyone, regardless of their skill level or background.
Whether you're a beginner looking to learn the basics of UI development or an experienced developer looking to enhance your skills, our channel has something for you. We believe that learning should be fun, engaging, and interactive, which is why we encourage our viewers to ask questions, provide feedback, and participate in our community.
So if you're interested in UI development, be sure to check out our channel and subscribe to stay updated on our latest content. We're excited to help you on your coding journey and look forward to hearing from you!
1. Learn the basics of HTML, CSS, and JavaScript:
HTML, CSS, and JavaScript are the foundational languages of the web. HTML is used to create the structure of a web page, CSS is used for styling and layout, and JavaScript is used for adding interactivity and dynamic behavior to a web page. There are plenty of resources available online to help you learn these languages, including free courses, tutorials, and documentation.
2.Get familiar with UI design tools:
UI designers use tools like Adobe Photoshop, Sketch, Figma, and Adobe XD to design user interfaces. As a UI developer, you will need to work closely with UI designers, so it's important to be familiar with these tools and understand how they work. You don't need to be an expert in design, but having a basic understanding of design principles and the design process can be helpful in collaborating with designers.
3. Learn a UI framework:
UI frameworks like React, Angular, and Vue.js are widely used in UI development. These frameworks provide a structured approach to building UIs and offer a range of pre-built components that can be customized. Learning a UI framework will make your development process faster and more efficient. Choose a framework that best suits your needs and become proficient in it.
4. Practice building UIs:
The best way to become a strong UI developer is to practice building UIs. Start with simple UIs and gradually move on to more complex ones. Take inspiration from existing UIs and try to replicate them. This will help you develop your skills and get a better understanding of how UIs work. Building your own projects and contributing to open-source projects can also be a great way to practice and gain experience.
5. Stay up-to-date with the latest trends and technologies:
UI development is a constantly evolving field, with new technologies and trends emerging all the time. To stay relevant and competitive, it's important to stay up-to-date with the latest developments. Follow industry blogs, attend webinars and conferences, and join online communities to stay informed.
6.Collaborate with other developers and designers:
Collaboration is key in UI development. Working with other developers and designers will help you learn new skills and approaches, and can lead to better solutions. Join online communities, participate in open-source projects, and attend meetups and conferences to connect with other professionals in the field.
7. Build a portfolio:
As you gain more experience, start building a portfolio of your work. This can include projects you've worked on, contributions to open-source projects, and any other relevant work. Your portfolio should showcase your skills and highlight your strengths as a UI developer. Having a strong portfolio can help you stand out when applying for jobs.
In conclusion, becoming a successful UI developer takes time, dedication, and hard work. Learning the basics of web technologies, getting familiar with UI design tools, learning a UI framework, practicing building UIs, staying up-to-date with the latest trends and technologies, collaborating with others, and building a portfolio of your work are all important steps in becoming a strong UI developer. By following these steps and staying committed to learning and growing, you can excel in this field and build a successful career as a UI developer.
You're welcome! We're glad you enjoyed the blog. Your support and engagement are important to us and help us create more great content for you.
Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts
Thursday, May 4, 2023
Monday, April 10, 2023
event capturing and event bubbling in javascript interview questions in hindi-event stoppropagation
event capturing and event bubbling in javascript interview questions in hindi-event stoppropagation
JavaScript is one of the most popular programming languages used to create dynamic and interactive web pages. It has various built-in functionalities and methods to help developers achieve a wide range of tasks. One of these functionalities is event handling, which allows developers to execute specific actions based on user actions or other events.
In JavaScript, events can be captured or bubbled depending on their propagation path. Understanding event capturing and event bubbling is essential for every web developer. In this blog, we'll explore what event capturing and event bubbling are, how they work, and how to stop them from propagating using the stopPropagation() method.
What is Event Capturing?
Event capturing, also known as the "capturing phase," is the first phase in the event propagation process. It occurs when an event is triggered on an element, and the event handler starts at the topmost element in the DOM tree and works its way down to the target element.
What is Event Bubbling?
Event bubbling, also known as the "bubbling phase," is the second phase in the event propagation process. It occurs when an event is triggered on an element, and the event handler starts at the target element and works its way up to the topmost element in the DOM tree.
How to Stop Event Propagation
Sometimes, we may want to stop event propagation from happening. For example, we may have nested elements with the same event listener, and we only want the event to be triggered on the child element without propagating to the parent element. In such cases, we can use the stopPropagation() method.
In this blog post, we've learned about event capturing and event bubbling in JavaScript. We've seen how event propagation works, and we've learned how to stop event propagation using the stopPropagation() method. Event capturing and event bubbling are essential concepts for every web developer to understand, as they canimpact the way events are handled in a web page, especially when multiple event listeners are attached to the same element. Knowing how to control event propagation can help us create more efficient and effective code that performs the desired actions and provides a better user experience. So, it's essential to understand the differences between event capturing and event bubbling and how they work in JavaScript.
Is video mein hum aapko Javascript mein event capturing aur event bubbling ke baare mein detail se batayenge jo web developers ke liye bahut important hoti hai. Hum is video mein dikhayenge ki event capturing aur event bubbling kaise kaam karte hain aur inmein kya antar hota hai.
Is video mein hum event stopPropagation ko kaise upyog kar sakte hain jo event capturing ya event bubbling ko rokne ke liye bahut useful hota hai. Iske alawa, hum un situations ko dekhenge jab event capturing ya event bubbling ko bypass karna avashyak hota hai.
Is video ke ant tak aap Javascript mein event capturing aur event bubbling ko gehrai se samajhenge aur apni web application mein in techniques ka upyog karke adhik flexibility aur niyantran prapt karenge.
इस वीडियो में हम जावास्क्रिप्ट में इवेंट कैप्चर और इवेंट बबलिंग की विस्तृत जानकारी देंगे जो वेब डेवलपर्स के लिए बहुत महत्वपूर्ण होती है। हम इस वीडियो में दिखाएंगे कि इवेंट कैप्चर और इवेंट बबलिंग कैसे काम करते हैं और इनमें क्या अंतर होता है।
इस वीडियो में हम इवेंट स्टॉपप्रोपेगेशन को कैसे उपयोग कर सकते हैं जो इवेंट कैप्चर या इवेंट बबलिंग को रोकने के लिए बहुत उपयोगी होता है। इसके अलावा, हम उन स्थितियों को देखेंगे जब इवेंट कैप्चर या इवेंट बबलिंग को बाइपास करना आवश्यक होता है।
इस वीडियो के अंत तक आप जावास्क्रिप्ट में इवेंट कैप्चर और इवेंट बबलिंग को गहराई से समझेंगे और अपनी वेब एप्लिकेशन में इन तकनीकों का उपयोग करके अधिक फ्लेक्सिबिलिटी और नियंत्रण प्राप्त करेंगे।
JavaScript is one of the most popular programming languages used to create dynamic and interactive web pages. It has various built-in functionalities and methods to help developers achieve a wide range of tasks. One of these functionalities is event handling, which allows developers to execute specific actions based on user actions or other events.
In JavaScript, events can be captured or bubbled depending on their propagation path. Understanding event capturing and event bubbling is essential for every web developer. In this blog, we'll explore what event capturing and event bubbling are, how they work, and how to stop them from propagating using the stopPropagation() method.
What is Event Capturing?
Event capturing, also known as the "capturing phase," is the first phase in the event propagation process. It occurs when an event is triggered on an element, and the event handler starts at the topmost element in the DOM tree and works its way down to the target element.
What is Event Bubbling?
Event bubbling, also known as the "bubbling phase," is the second phase in the event propagation process. It occurs when an event is triggered on an element, and the event handler starts at the target element and works its way up to the topmost element in the DOM tree.
How to Stop Event Propagation
Sometimes, we may want to stop event propagation from happening. For example, we may have nested elements with the same event listener, and we only want the event to be triggered on the child element without propagating to the parent element. In such cases, we can use the stopPropagation() method.
In this blog post, we've learned about event capturing and event bubbling in JavaScript. We've seen how event propagation works, and we've learned how to stop event propagation using the stopPropagation() method. Event capturing and event bubbling are essential concepts for every web developer to understand, as they canimpact the way events are handled in a web page, especially when multiple event listeners are attached to the same element. Knowing how to control event propagation can help us create more efficient and effective code that performs the desired actions and provides a better user experience. So, it's essential to understand the differences between event capturing and event bubbling and how they work in JavaScript.
Is video mein hum aapko Javascript mein event capturing aur event bubbling ke baare mein detail se batayenge jo web developers ke liye bahut important hoti hai. Hum is video mein dikhayenge ki event capturing aur event bubbling kaise kaam karte hain aur inmein kya antar hota hai.
Is video mein hum event stopPropagation ko kaise upyog kar sakte hain jo event capturing ya event bubbling ko rokne ke liye bahut useful hota hai. Iske alawa, hum un situations ko dekhenge jab event capturing ya event bubbling ko bypass karna avashyak hota hai.
Is video ke ant tak aap Javascript mein event capturing aur event bubbling ko gehrai se samajhenge aur apni web application mein in techniques ka upyog karke adhik flexibility aur niyantran prapt karenge.
इस वीडियो में हम जावास्क्रिप्ट में इवेंट कैप्चर और इवेंट बबलिंग की विस्तृत जानकारी देंगे जो वेब डेवलपर्स के लिए बहुत महत्वपूर्ण होती है। हम इस वीडियो में दिखाएंगे कि इवेंट कैप्चर और इवेंट बबलिंग कैसे काम करते हैं और इनमें क्या अंतर होता है।
इस वीडियो में हम इवेंट स्टॉपप्रोपेगेशन को कैसे उपयोग कर सकते हैं जो इवेंट कैप्चर या इवेंट बबलिंग को रोकने के लिए बहुत उपयोगी होता है। इसके अलावा, हम उन स्थितियों को देखेंगे जब इवेंट कैप्चर या इवेंट बबलिंग को बाइपास करना आवश्यक होता है।
इस वीडियो के अंत तक आप जावास्क्रिप्ट में इवेंट कैप्चर और इवेंट बबलिंग को गहराई से समझेंगे और अपनी वेब एप्लिकेशन में इन तकनीकों का उपयोग करके अधिक फ्लेक्सिबिलिटी और नियंत्रण प्राप्त करेंगे।
Tuesday, February 7, 2023
next js tutorial in hindi || Introduction to Next.js || NextJs Tutorial for Beginners #1 - YouTube
next js tutorial in hindi || Introduction to Next.js || NextJs Tutorial for Beginners #1 - YouTube
Next.js is a free and open-source JavaScript framework for building server-side rendered and statically generated web applications. It's built on top of React, allowing developers to create fast and scalable applications with ease. Next.js also provides automatic code splitting, optimized performance, and developers can use a simple file-system based routing approach to create dynamic pages. Additionally, Next.js has built-in support for SEO and the ability to implement server-side rendering with ease.
Next.js is a popular framework for building web applications with React. It provides a suite of features and tools to help developers create fast and reliable applications that are easy to maintain and scale. Some of the key features of Next.js include:
Server-side rendering (SSR): Next.js allows developers to render pages on the server-side, which can improve performance and SEO.
Static site generation: Next.js can generate static HTML files from your React components, which can be served from a CDN for even faster performance.
Automatic code splitting: Next.js automatically splits your code into smaller chunks, so that only the necessary JavaScript is loaded for each page, reducing the size of the initial load and improving performance.
Easy Routing: Routing in Next.js is based on the file system, making it simple for developers to create dynamic pages.
Built-in optimization: Next.js includes several performance optimizations, such as lazy loading and image optimization, out of the box.
Community & ecosystem: Next.js has a strong and growing community of developers, and a thriving ecosystem of plugins and tools.
In summary, Next.js is a powerful and flexible framework that makes it easy for developers to create fast, scalable, and SEO-friendly web applications with React.
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
Visit Next.js Tutorials for Beginners to Advanced level 2023 in Hindi Playlist :- https://youtube.com/playlist?list=PLCag8k3PYB41A0gxgMJ-5Jk_1ofDAtekk
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Next.js is a free and open-source JavaScript framework for building server-side rendered and statically generated web applications. It's built on top of React, allowing developers to create fast and scalable applications with ease. Next.js also provides automatic code splitting, optimized performance, and developers can use a simple file-system based routing approach to create dynamic pages. Additionally, Next.js has built-in support for SEO and the ability to implement server-side rendering with ease.
Next.js is a popular framework for building web applications with React. It provides a suite of features and tools to help developers create fast and reliable applications that are easy to maintain and scale. Some of the key features of Next.js include:
Server-side rendering (SSR): Next.js allows developers to render pages on the server-side, which can improve performance and SEO.
Static site generation: Next.js can generate static HTML files from your React components, which can be served from a CDN for even faster performance.
Automatic code splitting: Next.js automatically splits your code into smaller chunks, so that only the necessary JavaScript is loaded for each page, reducing the size of the initial load and improving performance.
Easy Routing: Routing in Next.js is based on the file system, making it simple for developers to create dynamic pages.
Built-in optimization: Next.js includes several performance optimizations, such as lazy loading and image optimization, out of the box.
Community & ecosystem: Next.js has a strong and growing community of developers, and a thriving ecosystem of plugins and tools.
In summary, Next.js is a powerful and flexible framework that makes it easy for developers to create fast, scalable, and SEO-friendly web applications with React.
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
Visit Next.js Tutorials for Beginners to Advanced level 2023 in Hindi Playlist :- https://youtube.com/playlist?list=PLCag8k3PYB41A0gxgMJ-5Jk_1ofDAtekk
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Monday, January 30, 2023
redux in react js projects in hindi || building a multi-language react app with redux and json
redux in react js projects in hindi || personal portfolio react js using react js || redux tutorial
redux in react js projects in hindi || building a multi-language react app with redux and json
Creating a Multi-Language Page with Redux and ReactJS using JSON
Building a Multi-Language React App with Redux and JSON
In this tutorial, we will walk through the process of building a multi-language React app using Redux and JSON. We will learn how to store translations in a JSON file, load it into the Redux store, and use the translations in our React components. The tutorial will cover the basics of internationalization and provide a step-by-step guide for implementing it in a React application. By the end of this tutorial, you will have a solid understanding of how to create a multi-language app with Redux and ReactJS.
Redux,
ReactJS,
Multi-Language,
Internationalization,
React Application,
Beginner-friendly,
Multi-language,
JSON,
Translation,
React application,
Internationalization in React,
Building multi-language app,
Beginner-friendly tutorial,
redux in react js projects in hindi,
personal portfolio react js using redux,
redux tutorial in hindi,
personal website react js,
react portfolio website tutorial,
rext js portfolio website,
portfolio react,portfolio website react js hindi,
react js redux tutorial in hindi,
react redux in hindi,
redux interview questions,
react interview questions in hindi,
redux react js hindi,
redux in react js in hindi,
redux react-redux npm,
react-redux project,
redux
Git Hub Source Code link :- https://github.com/rohitazad/rohit-azad-malik
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
redux in react js projects in hindi || building a multi-language react app with redux and json
Creating a Multi-Language Page with Redux and ReactJS using JSON
In this tutorial, we will walk through the process of building a multi-language React app using Redux and JSON. We will learn how to store translations in a JSON file, load it into the Redux store, and use the translations in our React components. The tutorial will cover the basics of internationalization and provide a step-by-step guide for implementing it in a React application. By the end of this tutorial, you will have a solid understanding of how to create a multi-language app with Redux and ReactJS.
Redux,
ReactJS,
Multi-Language,
Internationalization,
React Application,
Beginner-friendly,
Multi-language,
JSON,
Translation,
React application,
Internationalization in React,
Building multi-language app,
Beginner-friendly tutorial,
redux in react js projects in hindi,
personal portfolio react js using redux,
redux tutorial in hindi,
personal website react js,
react portfolio website tutorial,
rext js portfolio website,
portfolio react,portfolio website react js hindi,
react js redux tutorial in hindi,
react redux in hindi,
redux interview questions,
react interview questions in hindi,
redux react js hindi,
redux in react js in hindi,
redux react-redux npm,
react-redux project,
redux
Git Hub Source Code link :- https://github.com/rohitazad/rohit-azad-malik
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
code splitting in react js hindi || reactjs advanced tutorial in hindi code splitting - #18
code splitting in react js || creating dynamic imports with react lazy and suspense - #18
code splitting in react js hindi || reactjs advanced tutorial in Hindi code splitting
React, { Suspense, lazy } यह रीऐक्ट (React) लाइब्रेरी के द्वारा प्रदान किए गए सुविधाओं को बताता है। सस्पेंस (Suspense) एक सुविधा है जो किसी नए कंपोनेंट को लोड करते समय कोई अंतरिक्ष प्रदर्शित करती है। लेजी लोडिंग (lazy loading) सुविधा का प्रयोग करके आप कंपोनेंट को केवल उसकी जरूरत पड़ते समय लोड कर सकते हैं, जिससे आपकी एप्लिकेशन की प्रदर्शन को बेहतर बनाया जा सकता है।
Code splitting in React is a technique that allows you to divide your code into smaller chunks, called "bundles," that can be loaded on demand. This can improve the performance of your application by reducing the amount of code that needs to be loaded initially, and allowing you to load only the code that is needed for a specific page or feature. This can be accomplished using dynamic imports or libraries such as React Loadable or React Router.
"Creating Dynamic Imports with React Lazy and Suspense"
"Optimizing React Performance with Code Splitting and Suspense"
"React Lazy Loading in Action: A Practical Guide"
"Efficiently Loading Components in React with Suspense and Lazy"
"Maximizing React Performance with Lazy Loading and Suspense"
"Leveraging React Suspense and Lazy for Better User Experience"
"Mastering Code Splitting in React with Suspense and Lazy"
"Boosting React App Performance with Lazy Loading and Suspense"
"Real World Applications of React Suspense and Lazy Loading"
"Streamlining React Components with Lazy Loading and Suspense"
React
Suspense
Lazy loading
Code splitting
Dynamic imports
Performance optimization
User experience
Web development
JavaScript
React hooks
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
code splitting in react js hindi || reactjs advanced tutorial in Hindi code splitting
React, { Suspense, lazy } यह रीऐक्ट (React) लाइब्रेरी के द्वारा प्रदान किए गए सुविधाओं को बताता है। सस्पेंस (Suspense) एक सुविधा है जो किसी नए कंपोनेंट को लोड करते समय कोई अंतरिक्ष प्रदर्शित करती है। लेजी लोडिंग (lazy loading) सुविधा का प्रयोग करके आप कंपोनेंट को केवल उसकी जरूरत पड़ते समय लोड कर सकते हैं, जिससे आपकी एप्लिकेशन की प्रदर्शन को बेहतर बनाया जा सकता है।
Code splitting in React is a technique that allows you to divide your code into smaller chunks, called "bundles," that can be loaded on demand. This can improve the performance of your application by reducing the amount of code that needs to be loaded initially, and allowing you to load only the code that is needed for a specific page or feature. This can be accomplished using dynamic imports or libraries such as React Loadable or React Router.
"Creating Dynamic Imports with React Lazy and Suspense"
"Optimizing React Performance with Code Splitting and Suspense"
"React Lazy Loading in Action: A Practical Guide"
"Efficiently Loading Components in React with Suspense and Lazy"
"Maximizing React Performance with Lazy Loading and Suspense"
"Leveraging React Suspense and Lazy for Better User Experience"
"Mastering Code Splitting in React with Suspense and Lazy"
"Boosting React App Performance with Lazy Loading and Suspense"
"Real World Applications of React Suspense and Lazy Loading"
"Streamlining React Components with Lazy Loading and Suspense"
React
Suspense
Lazy loading
Code splitting
Dynamic imports
Performance optimization
User experience
Web development
JavaScript
React hooks
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Thursday, January 19, 2023
mastering the usecontext hook in react js in hindi || react context api project
mastering the usecontext hook in react js in hindi || react context api project || #17
In this video, we will be diving into the useContext Hook in React, a powerful tool for managing state and props throughout your application. We will explore how to create and use a context, as well as how to consume it in your components. By the end of this tutorial, you will have a strong understanding of how to use the useContext Hook in your own projects. Whether you are a beginner or an experienced React developer, this video is a great resource for mastering this important Hook.
useContext, React, context, state management, Hooks.
useContext, createContext, useState, and useEffect in React - A Comprehensive Tutorial
"Advanced use of useContext, createContext, useState, and useEffect in React"
"React Hooks Mastery: useContext, createContext, useState, and useEffect"
"useContext, createContext, useState and useEffect in React - A Beginner's Guide"
"React State Management with useContext, createContext, useState, and useEffect"
"useContext, createContext, useState, and useEffect: A Deep Dive into React Hooks"
"Efficient State Management in React with useContext, createContext, useState, and useEffect"
"Mastering React Hooks: useContext, createContext, useState, and useEffect"
"useContext, createContext, useState, and useEffect: Tips and Tricks for React Developers"
"useContext, createContext, useState, and useEffect: Best Practices for React Development"
"Simplifying State Management in React with useContext, createContext, useState, and useEffect"
"useContext, createContext, useState, and useEffect - A Practical Guide for React Developers"
"useContext, createContext, useState, and useEffect: A Hands-On Tutorial for React Developers"
"useContext, createContext, useState, and useEffect: A Step-by-Step Guide for React Developers"
"useContext, createContext, useState, and useEffect in React - An In-Depth Look"
"useContext, createContext, useState, and useEffect: A Comprehensive Tutorial for React Developers"
"useContext, createContext, useState, and useEffect: Unlocking the Power of React Hooks"
"useContext, createContext, useState, and useEffect in React: A Complete Guide"
"useContext, createContext, useState, and useEffect - A Deep Dive into React State Management"
"useContext, createContext, useState, and useEffect: Tips and Tricks for React State Management"
"useContext, createContext, useState, and useEffect: A Masterclass for React Developers"
Git Hub Source Code link :- https://github.com/rohitazad/context-api-reactjs-login-logout-functionality
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
In this video, we will be diving into the useContext Hook in React, a powerful tool for managing state and props throughout your application. We will explore how to create and use a context, as well as how to consume it in your components. By the end of this tutorial, you will have a strong understanding of how to use the useContext Hook in your own projects. Whether you are a beginner or an experienced React developer, this video is a great resource for mastering this important Hook.
useContext, React, context, state management, Hooks.
useContext, createContext, useState, and useEffect in React - A Comprehensive Tutorial
"Advanced use of useContext, createContext, useState, and useEffect in React"
"React Hooks Mastery: useContext, createContext, useState, and useEffect"
"useContext, createContext, useState and useEffect in React - A Beginner's Guide"
"React State Management with useContext, createContext, useState, and useEffect"
"useContext, createContext, useState, and useEffect: A Deep Dive into React Hooks"
"Efficient State Management in React with useContext, createContext, useState, and useEffect"
"Mastering React Hooks: useContext, createContext, useState, and useEffect"
"useContext, createContext, useState, and useEffect: Tips and Tricks for React Developers"
"useContext, createContext, useState, and useEffect: Best Practices for React Development"
"Simplifying State Management in React with useContext, createContext, useState, and useEffect"
"useContext, createContext, useState, and useEffect - A Practical Guide for React Developers"
"useContext, createContext, useState, and useEffect: A Hands-On Tutorial for React Developers"
"useContext, createContext, useState, and useEffect: A Step-by-Step Guide for React Developers"
"useContext, createContext, useState, and useEffect in React - An In-Depth Look"
"useContext, createContext, useState, and useEffect: A Comprehensive Tutorial for React Developers"
"useContext, createContext, useState, and useEffect: Unlocking the Power of React Hooks"
"useContext, createContext, useState, and useEffect in React: A Complete Guide"
"useContext, createContext, useState, and useEffect - A Deep Dive into React State Management"
"useContext, createContext, useState, and useEffect: Tips and Tricks for React State Management"
"useContext, createContext, useState, and useEffect: A Masterclass for React Developers"
Git Hub Source Code link :- https://github.com/rohitazad/context-api-reactjs-login-logout-functionality
Visit The Complete ReactJs Course - Basics to Advanced playlist :- https://youtube.com/playlist?list=PLCag8k3PYB40oJ9DnfJMKSrhOUYNaLr-i
You're welcome! We're glad you enjoyed the video. Your support and engagement are important to us and help us create more great content for you. Remember to like, subscribe, share, and support our channel to stay updated on new and exciting content.
Thank you for the support! We appreciate your engagement and it helps us continue to create valuable content for you. Please follow us on social media for updates and new content.
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Saturday, January 14, 2023
JavaScript: The Language That Powers the Web
JavaScript: The Language That Powers the Web
JavaScript is one of the most popular programming languages in the world, and for good reason. It's the language that powers the web, enabling developers to create interactive, dynamic websites and applications. Whether you're a beginner or an experienced developer, understanding JavaScript is essential for creating modern web experiences.
JavaScript is a versatile and powerful language that can be used for a wide range of tasks. It can be used to create interactive front-end web experiences, such as responsive navigation menus and image sliders, as well as more complex back-end web applications, such as e-commerce sites and social media platforms.
One of the most important features of JavaScript is its ability to manipulate the Document Object Model (DOM). The DOM is the way that JavaScript interacts with web pages, allowing developers to change the content, structure, and appearance of a web page based on user input or other events. This makes JavaScript an essential tool for creating dynamic, interactive web experiences.
Another key feature of JavaScript is its ability to interact with web servers and external APIs. This enables developers to create web applications that can retrieve and display data from other sources, such as social media platforms or weather services. This makes JavaScript a great choice for creating web applications that can access a wide range of data and services.
JavaScript also has a large and active community of developers, which makes it easy to find support and resources when you need them. There are countless libraries, frameworks, and tools that have been built to make it easier to work with JavaScript. Some examples of popular libraries and frameworks include React, Angular, and Vue.js. These tools provide developers with pre-built functionality and abstractions that can be used to speed up development and make it easier to build complex applications.
In conclusion, JavaScript is an essential tool for any developer looking to create modern web experiences. It's a versatile and powerful language that can be used for a wide range of tasks, and it has a large and active community of developers that make it easy to find support and resources when you need them. Whether you're a beginner or an experienced developer, understanding JavaScript is essential for creating interactive, dynamic websites and applications.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
JavaScript is one of the most popular programming languages in the world, and for good reason. It's the language that powers the web, enabling developers to create interactive, dynamic websites and applications. Whether you're a beginner or an experienced developer, understanding JavaScript is essential for creating modern web experiences.
JavaScript is a versatile and powerful language that can be used for a wide range of tasks. It can be used to create interactive front-end web experiences, such as responsive navigation menus and image sliders, as well as more complex back-end web applications, such as e-commerce sites and social media platforms.
One of the most important features of JavaScript is its ability to manipulate the Document Object Model (DOM). The DOM is the way that JavaScript interacts with web pages, allowing developers to change the content, structure, and appearance of a web page based on user input or other events. This makes JavaScript an essential tool for creating dynamic, interactive web experiences.
Another key feature of JavaScript is its ability to interact with web servers and external APIs. This enables developers to create web applications that can retrieve and display data from other sources, such as social media platforms or weather services. This makes JavaScript a great choice for creating web applications that can access a wide range of data and services.
JavaScript also has a large and active community of developers, which makes it easy to find support and resources when you need them. There are countless libraries, frameworks, and tools that have been built to make it easier to work with JavaScript. Some examples of popular libraries and frameworks include React, Angular, and Vue.js. These tools provide developers with pre-built functionality and abstractions that can be used to speed up development and make it easier to build complex applications.
In conclusion, JavaScript is an essential tool for any developer looking to create modern web experiences. It's a versatile and powerful language that can be used for a wide range of tasks, and it has a large and active community of developers that make it easy to find support and resources when you need them. Whether you're a beginner or an experienced developer, understanding JavaScript is essential for creating interactive, dynamic websites and applications.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Wednesday, January 11, 2023
what is a higher order function in javascript || higher order functions javascript questions ?
what is a higher order function in javascript || higher order functions javascript questions ?
explain in Hindi.
higher order functions algorithm javascript interview questions in hindi
Higher Order Functions in JavaScript with Examples in hindi.
One such technique is using higher order functions. Higher order functions are functions that take one or more functions as arguments, or return a function as their result.
A higher order function is a function that takes a function as an argument, or returns a function.
There are several different types of higher order functions like map and reduce.
higher order functions quiz
higher-order functions javascript
higher-order functions examples
higher order functions javascript practice
higher order functions in react js :-https://youtu.be/rfQ706YJc40
map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi :- https://youtu.be/IxhTgSrCHOc
difference between arrow function and normal function javascript | JavaScript Interview Question :- https://youtu.be/2edRS475DVQ
remove duplicates from array in javascript | algorithm interview question In हिंदी :- https://youtu.be/pqNrl-w2lT4
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
explain in Hindi.
higher order functions algorithm javascript interview questions in hindi
Higher Order Functions in JavaScript with Examples in hindi.
One such technique is using higher order functions. Higher order functions are functions that take one or more functions as arguments, or return a function as their result.
A higher order function is a function that takes a function as an argument, or returns a function.
There are several different types of higher order functions like map and reduce.
higher order functions quiz
higher-order functions examples
higher order functions javascript practice
higher order functions in react js :-https://youtu.be/rfQ706YJc40
map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi :- https://youtu.be/IxhTgSrCHOc
difference between arrow function and normal function javascript | JavaScript Interview Question :- https://youtu.be/2edRS475DVQ
remove duplicates from array in javascript | algorithm interview question In हिंदी :- https://youtu.be/pqNrl-w2lT4
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Tuesday, November 29, 2022
react js components tutorial Importing and Exporting Components | Complete React Course in Hindi #4
react js components tutorial Importing and Exporting Components | Complete React Course in Hindi #4
Complete react course: In this react course, we will see how to used React js components import and export.
Export your function component from that file (using either default or named exports).
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Complete react course: In this react course, we will see how to used React js components import and export.
Export your function component from that file (using either default or named exports).
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Monday, November 28, 2022
create react app with create-react-app | NPX | Complete React Course in Hindi #3
create react app with create-react-app | NPX | Complete React Course in Hindi #3
Complete react course: In this react course, we will see how to used NPX create-react-app using projects. we will look into creating a new react app using create-react-app.
Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
You will be learn how to setup npx create-react-app in start.
You will be learn about folder structure.
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Complete react course: In this react course, we will see how to used NPX create-react-app using projects. we will look into creating a new react app using create-react-app.
Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
You will be learn how to setup npx create-react-app in start.
You will be learn about folder structure.
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
react setup in visual studio code | how to install react js | Complete React Course in Hindi #2
react setup in visual studio code| how to install react js | Complete React Course in Hindi #2
in this video you will be learn some basic concepts How to create react app boiler by Rohit Azad Malik (R.A.M)
Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
You will be learn how to setup react js in start.
You will be package json file .
You will be learn about folder structure.
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
in this video you will be learn some basic concepts How to create react app boiler by Rohit Azad Malik (R.A.M)
Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
You will be learn how to setup react js in start.
You will be package json file .
You will be learn about folder structure.
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Introduction to React Js | Complete React Course in Hindi # 1
Introduction to React Js | Complete React Course in Hindi # 1
in this video you will be learn some basic concepts of react js in theory module by Rohit Azad Malik (R.A.M)
Complete react course: In this react course, we will see how to use react js. React is an amazing library for creating user interfaces.
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
You can Learn Once, Write Anywhere.
You will be learn about Virtual DOM.
You will be learn about JSX .
You will be learn about React Hooks.
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
in this video you will be learn some basic concepts of react js in theory module by Rohit Azad Malik (R.A.M)
React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components
You can Learn Once, Write Anywhere.
You will be learn about Virtual DOM.
You will be learn about JSX .
You will be learn about React Hooks.
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
YouTube Channel :- https://www.youtube.com/@azadMalikRohit
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Friday, November 11, 2022
callback in javascript in hindi | callback function in javascript synchronous vs asynchronous
callback in javascript in hindi | callback function in javascript synchronous vs asynchronous.
In this video you will be learn callback function in javascript .
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
You can watch on video of Callback in javascript
now lets code to this
Now we create two function one is printName and seconod in useCallbackFun in this code we get the name in as argument in printName function and show to alert with text hi "name";
now in another way if we take time to get name then we used to this way to callback function
Now let create another function with get odd and even number
as below is example :-
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Checkut t my chaanel in youtube :- https://www.youtube.com/c/AzadMalikRohit
In this video you will be learn callback function in javascript .
You can watch on video of Callback in javascript
now lets code to this
function printName(name) {
alert(`hi, ${name}`);
}
function useCallbackFun(callback) {
let name = prompt("Please enter your name.");
callback(name);
}
useCallbackFun(printName)
Now we create two function one is printName and seconod in useCallbackFun in this code we get the name in as argument in printName function and show to alert with text hi "name";
now in another way if we take time to get name then we used to this way to callback function
function printName(name) {
alert(`hi, ${name}`);
}
function useCallbackFun(callback) {
let name = '';
setTimeout(function(){
name = prompt("Please enter your name.");
callback(name);
},100)
}
useCallbackFun(printName)
Now let create another function with get odd and even number
as below is example :-
function isOdd(number) {
return number % 2 != 0;
}
function isEven(number) {
return number % 2 == 0;
}
function filter(numbers, fn) {
let results = [];
for (const number of numbers) {
if (fn(number)) {
results.push(number);
}
}
return results;
}
let numbers = [1, 2, 4, 7, 3, 5, 6];
console.log(filter(numbers, isOdd));
console.log(filter(numbers, isEven));
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Checkut t my chaanel in youtube :- https://www.youtube.com/c/AzadMalikRohit
Thursday, November 10, 2022
Movies and TV Series Searching App in React JS | Movies App | React App | ReactJs Project
Movies and TV Series Searching App in React JS | Movies App | React App | ReactJs Project
In this tutorial we'll be creating a movie application using React, Routing, Axios, React Bootstrap Css, React Pagination, React Alice Carousel implementing React Hooks, and fetching data from an external API (The Movie Database).
In this video we creating a home page with call a api using useEffect lifecycle hook and do a pagination in bottom.
Let's Create a Movies and TV Series App in React JS and React Bootstrap with full responsive functionality. We will use MovieDB API for backend.
We create multiple pages :-
1. Top Trending
2. Top Trending Movies with Filter By Categories
3. Top Trending TV Series with Filter By Categories
4. Search Movies / TV Series
5. CONNECT WITH US
6. About Page
1. App setup
2. React Routing
3. Dynamic Routing
4. AXIOS setup and used
5. React Bootstrap install and setup
6. Bootstrap Icons
7. React Pagination
8. React Alice Carousel
9. themoviedb API used and setup
Movie API Document Page Url
:- https://www.themoviedb.org/documentation/api
(Create an account and request an API key) Movie API Home Page Url
:- https://www.themoviedb.org/
GitHub source code url :- https://github.com/rohitazad/my-entertainment-react
app live url :- https://my-entertainment-react.vercel.app/
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Checkut t my chaanel in youtube :- https://www.youtube.com/c/AzadMalikRohit
In this video we creating a home page with call a api using useEffect lifecycle hook and do a pagination in bottom.
Let's Create a Movies and TV Series App in React JS and React Bootstrap with full responsive functionality. We will use MovieDB API for backend.
We create multiple pages :-
1. Top Trending
2. Top Trending Movies with Filter By Categories
3. Top Trending TV Series with Filter By Categories
4. Search Movies / TV Series
5. CONNECT WITH US
6. About Page
1. App setup
2. React Routing
3. Dynamic Routing
4. AXIOS setup and used
5. React Bootstrap install and setup
6. Bootstrap Icons
7. React Pagination
8. React Alice Carousel
9. themoviedb API used and setup
Movie API Document Page Url
:- https://www.themoviedb.org/documentation/api
(Create an account and request an API key) Movie API Home Page Url
:- https://www.themoviedb.org/
GitHub source code url :- https://github.com/rohitazad/my-entertainment-react
app live url :- https://my-entertainment-react.vercel.app/
So, Like , subscribe, share, and support to keep us motivating.
Don't Forget to Follow me on all Social Network,
Twitter: https://twitter.com/rohitazad
Facebook: https://www.facebook.com/rohitazadmalik/
Stackoverflow: https://stackoverflow.com/users/1365428/rohit-azad-malik
LinkedIn: https://www.linkedin.com/in/rohitazad/
Github: https://github.com/rohitazad
Checkut t my chaanel in youtube :- https://www.youtube.com/c/AzadMalikRohit
map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi
map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi
map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi .
Map, filter & reduce Array functions are the most popular Higher-Order Functions in JavaScript In this article you will learn everything about map filter reduce sort and forEach Between Regular Functions and Arrow Functions basic + advanced javascript in hindi.
In this article I cover everything you need to know about the higher order function in Regular Functions and Arrow Functions .
Concepts Covered:
1. forEach
2. Filter
3. map
4. sort
5. reduce
now let's create two variable and used to both variable in HOF (higher order function)
1.forEach (let's used to forEach method in peopleData variable)
used to first normal loop
now in this code we do the normal loop with peopleData length and console log print to every item with index no.
now let's write to this in ES5 Regular function with forEach
in this above code you can see to we pass to call back function in forEach HOF and log to object with index no.
now let's write to this in ES6 with fat arrow
now you can write to this in a single line code
2. filter in javascript means you can filter something in array of collection.
now let's check the code and how to used filter method in javascript and if we have no filer then used to normal for loop .
in this above code we used to normal loop in javascript and filter to data base on category.
let's we used to filter method and check to result.
now here we can used to ES5 Regular function and result is coming same.
Now if we used to ES6 fat arrow function then let's check .
now you can see to same result print in console and we used to here fat arrow function with in single line for filter method.
3. map method used to javascript map method you can manipulate the data base on the requirements.
like this if we required a node extra with dicountPrice in total price of 10% then we used to map method and we also used to normal loop.
let's check with normal loop / ES5 function and ES6 fat arrow function in below code
do with in ES5 Regular function.
do with in ES6 fat arrow function.
now you can see above code we get same result of if we used normal loop / ES5 Regular function and ES6 fat arrow function.
4. sort method is used to sorting data base on two element .
now let's check the code of sort method .
we used to first Descending order the data in base on age we apply to age sorting in ES5 Regular function.
and in second method we used to ES6 function and sorting the data base on price in Ascending order in single line code.
5. Reduce method now check this method in javascript . now check first we used to normal loop in javascript.
map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi .
Map, filter & reduce Array functions are the most popular Higher-Order Functions in JavaScript In this article you will learn everything about map filter reduce sort and forEach Between Regular Functions and Arrow Functions basic + advanced javascript in hindi.
In this article I cover everything you need to know about the higher order function in Regular Functions and Arrow Functions .
Concepts Covered:
1. forEach
2. Filter
3. map
4. sort
5. reduce
now let's create two variable and used to both variable in HOF (higher order function)
const peopleData = [
{name:'Mobile', category:'Gadget', age:5, price:25000},
{name:'TV', category:'Appliances', age:10, price:35000},
{name:'Washing Machine', category:'Appliances', age:15, price:42000},
{name:'HeadFone', category:'Gadget', age:3, price:12000},
{name:'Microwaves', category:'Appliances', age:5, price:13500},
{name:'Mixer', category:'Appliances', age:10, price:9000}
]
const ageData = [12,7,11,23,18,22,17,9,22,32,45,28,6,4,13]
1.forEach (let's used to forEach method in peopleData variable)
used to first normal loop
for(let i =0; i< peopleData.length; i++){
console.log(i,'__', peopleData[i])
}
now in this code we do the normal loop with peopleData length and console log print to every item with index no.
now let's write to this in ES5 Regular function with forEach
peopleData.forEach(function(item, index){
return console.log(index, '_', item)
})
in this above code you can see to we pass to call back function in forEach HOF and log to object with index no.
now let's write to this in ES6 with fat arrow
peopleData.forEach((item, index)=>{
return console.log(index, '_', item)
})
now you can write to this in a single line code
peopleData.forEach(item=>{console.log(item)})
2. filter in javascript means you can filter something in array of collection.
now let's check the code and how to used filter method in javascript and if we have no filer then used to normal for loop .
const filterData = []
for(let i=0; i< peopleData.length; i++){
if(peopleData[i].category === 'Gadget'){
filterData.push(peopleData[i])
}
}
console.log(filterData);
in this above code we used to normal loop in javascript and filter to data base on category.
let's we used to filter method and check to result.
const filterData = peopleData.filter(function(item){
return item.category === 'Gadget'
})
console.log('filterData', filterData);
now here we can used to ES5 Regular function and result is coming same.
Now if we used to ES6 fat arrow function then let's check .
const filterDataArrowFun = peopleData.filter(item=>item.category === 'Gadget')
console.log('filterDataArrowFun', filterDataArrowFun)
now you can see to same result print in console and we used to here fat arrow function with in single line for filter method.
3. map method used to javascript map method you can manipulate the data base on the requirements.
like this if we required a node extra with dicountPrice in total price of 10% then we used to map method and we also used to normal loop.
let's check with normal loop / ES5 function and ES6 fat arrow function in below code
const updatedData = []
for(let i=0; i < peopleData.length; i++){
peopleData[i].discountPrice = peopleData[i].price / 100 *10;
updatedData.push(peopleData[i]);
}
console.log('updatedData', updatedData);
do with in ES5 Regular function.
const updatedData = peopleData.map(function(item){
item.dicountPrice = item.price / 100 * 10
return item
})
do with in ES6 fat arrow function.
const updatedData = peopleData.map((item)=>{
item.dicountPrice = item.price / 100 * 10
return item
})
console.log('updatedData es6 function ', updatedData)
now you can see above code we get same result of if we used normal loop / ES5 Regular function and ES6 fat arrow function.
4. sort method is used to sorting data base on two element .
now let's check the code of sort method .
const sortItem = peopleData.sort(function(a,b){
return b.age - a.age
})
console.log('sortItem', sortItem)
const sortItem_2 = peopleData.sort((a,b)=> a.price - b.price)
console.log('sortItem_2', sortItem_2)
we used to first Descending order the data in base on age we apply to age sorting in ES5 Regular function.
and in second method we used to ES6 function and sorting the data base on price in Ascending order in single line code.
5. Reduce method now check this method in javascript . now check first we used to normal loop in javascript.
let ageDataTotal =0if you get more internist thing learn in javascript then go to my youtube channel and check to some more interesting video:- https://www.youtube.com/c/AzadMalikRohit
for(let i= 0; i < ageData.length; i++){
ageDataTotal = ageDataTotal + ageData[i]
}
console.log('ageDataTotal', ageDataTotal); // ageDataTotal 269
now check with Reduce method in ES6 fat arrow function and get the total sum of age in the below code.
const ageTotalSum = ageData.reduce((totalSumofAge, current)=>totalSumofAge + current, 0)
console.log('ageTotalSum', ageTotalSum); // ageTotalSum 269
now check with Reduce method in ES6 fat arrow function and get the total sum of productData price in the below code.
const prodctTotalValue = peopleData.reduce((totalSum, current)=>totalSum + current.price, 0)
console.log('prodctTotalValue', prodctTotalValue) // productTotalValue 136500
Friday, January 22, 2016
Get current URL in Jquery and JavaScript.
Get current URL in Jquery and JavaScript?
My url is http://www.rohitazad.com:4545/index.php#tab5?foo=890
My url is http://www.rohitazad.com:4545/index.php#tab5?foo=890
In Jquery
Property Result
______________________________________________
host www.rohitazad.com:4545
hostname www.rohitazad.com
port 4545
protocol http:
pathname index.php
href http://www.rohitazad.com:4545/index.php#tab5
hash #tab5
search ?foo=890
var locationWindow = $(location).attr('property');
In JavaScript
window.location.host www.rohitazad.com:4545
window.location.hostname www.rohitazad.com
window.location.port 4545
window.location.protocol http:
window.location.pathname index.php
window.location.href http://www.rohitazad.com:4545/index.php#tab5
window.location.hash #tab5
window.location.search ?foo=890
Friday, January 8, 2016
How to create a element in jquery ?
Hi it's very simple download to jquery plugin and write some code Define a variable assign to value as like this
Jquery Code here
$(document).ready(function(){
// Create a HTML Tag Code here start
var newDiv = document.createElement('div');
$(newDiv).addClass('wraper');
$(newDiv).attr('data-role','wraperDivAttribute');
$(newDiv).html('This is wraper section');
$(newDiv).appendTo($("body")) ;// wraper div append to body
// Create a HTML Tag Code here end
});
Monday, July 6, 2015
How to create Accordion in simple jQuery code .
How to create Accordion in simple jQuery code .
It's very simple now create simple html code and apply this simple jquery code as like this
HTML Code here
<div id="accordion">
<h2><a href="#">Accordian Tab 1</a></h2>
<div>
<p>Accordian Tab 1 Data</p>
</div>
<h2><a href="#">Accordian Tab 2</a></h2>
<div>
<p>Accordian Tab 2 Data</p><br />
</div>
<h2><a href="#">Accordian Tab 3</a></h2>
<div>
<p>Accordian Tab 3 Data</p>
</div>
<h2><a href="#">Accordian Tab 4</a></h2>
<div>
<p>Accordian Tab 4 Data</p>
</div>
</div>
Css Code here
body {
font-family: arial;
font-size: 12px;
}
#accordion h2 {
padding: 10px;
margin: 0;
border: 1px solid #4679bd;
background-color: #4072b4;
font-size: 14px;
border-top: 3px solid #ccc;
}
#accordion h2 a {
text-decoration: none;
color: #ffffff;
}
#accordion div {
padding: 0 10px;
margin: 0;
border: 1px solid #4679bd;
color: #000;
}
Jquery Code here
$(document).ready(function() {Demo Jsfiddle
$("#accordion div").hide();
$("#accordion h2").click(function() {
$(this).next("#accordion div").slideToggle("slow").siblings("#accordion div").slideUp("slow");
});
});
Friday, March 21, 2014
Section have a fixed position when it hits the top of the screen
How to do this it's very simple here example see below .
Demo Jsfiddle
Jquery Code
var oritop = -100;
$(window).scroll(function() {
var scrollt = $(this).scrollTop();
var elm = $(".scrollTopWindow");
if(oritop < 0) {
oritop= elm.offset().top;
}
if(scrollt >= oritop) {
elm.css({"position": "fixed", "top": 0, "left": 0});
}
else {
elm.css("position", "static");
}
});
Css here code as Sample
body{height:2000px}
.scrollTopWindow {
background-color: red;
width: 150px;
height: 100px;
color: white;
padding:20px;
}
HTML Code here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
<div class = "scrollTopWindow"> Scroll top window and fix me ! </div>
Demo Jsfiddle
Wednesday, March 5, 2014
How to create a tooltips with jQuery
simple idea to create a tooltips
HTML
<input type="text" title="Here put your toottips text " />
CSS
.autoSugest{background:#fffdef;border:1px solid #cac6ad;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;color:#7f7943;
display:none;
font-size:12px;
padding:7px 15px;
position:absolute;
min-width:100px;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
.autoSugest:after{
content:url("../../images/tootl-tip-arrow. png"); height:8px;
width:11px;
position:absolute;
top:-13px;
left:38px}
Jquery
$.fn.autoSuggest = function(){ return this.each(function(index, elm){
if(!$(elm).is('[data-title]')){
$(elm).attr('data-title', $(elm).attr('title')).attr('title', '');
};
$(elm).on('focus', function(){
var element = $(this),
posTop = element.offset().top + element.outerHeight() + 10,
posLeft = element.offset().left,
toolTipWidth = element.outerWidth() > 90 ? element.outerWidth() : 250,
titleText = element.attr('data-title');
if(titleText && titleText != ''){
$('<div />', {class: 'autoSugest', text : titleText, css : {left: posLeft, top: posTop, maxWidth: toolTipWidth}}).appendTo('body').fadeIn();
}else{
return false;
}
});
$(elm).on('blur', function(){
$('.autoSugest').fadeOut(function(){
$(this).remove();
});
});
}); };
$(document).ready(function(){
$('input[title]').autoSuggest(); });
Subscribe to:
Posts (Atom)
