- 24
- 35 190
Exacode
India
เข้าร่วมเมื่อ 8 ม.ค. 2021
Hello and Welcome to Exacode!
In this channel you will find videos about web dev technologies like HTML, CSS, React, JavaScript, Node.Js etc. I am a relative beginner in web development and I love to share what I learn with you on this channel.
So, subscribe to our channel, hit the notification bell 🔔, and join the conversation in the comments!
Thanks for watching, and we look forward to becoming a better developer!
In this channel you will find videos about web dev technologies like HTML, CSS, React, JavaScript, Node.Js etc. I am a relative beginner in web development and I love to share what I learn with you on this channel.
So, subscribe to our channel, hit the notification bell 🔔, and join the conversation in the comments!
Thanks for watching, and we look forward to becoming a better developer!
React Todo App | React Todo List | Add, Edit, Delete Todo | Beginners React Project
In this video, we will build a Todo App using React and JS. User can add todo, delete todo and edit todo as well.
The todos will be stored in localStorage and hence the todo will be persist on page refresh or closing the browser tab.
📦 Source code: codesandbox.io/p/sandbox/react-todo-38txl4
-----------------------------------------------------------------------------
🌟Contents of this video 🌟
0:00 - Application demo
1:06 - Creating basic structure
1:43 - Add Todo
6:05 - Rendering todos in screen
7:12 - Refactor code
9:04 - Delete Todo
14:33 - Add todos in localStorage
16:13 - setState is async
18:59 - Loading todos from localStorage
20:29 - delete todos from localstorage
22:49 - Refactor code
24:41 - Prevent adding empty todos
25:25 - Edit todos
41:53 - Outro
-----------------------------------------------------------------------------
👇 Subscribe + Notification 🔔 for MORE 👇
@exacode
📌 Don't forget to like this video to see more such content, Thanks for watching!
The todos will be stored in localStorage and hence the todo will be persist on page refresh or closing the browser tab.
📦 Source code: codesandbox.io/p/sandbox/react-todo-38txl4
-----------------------------------------------------------------------------
🌟Contents of this video 🌟
0:00 - Application demo
1:06 - Creating basic structure
1:43 - Add Todo
6:05 - Rendering todos in screen
7:12 - Refactor code
9:04 - Delete Todo
14:33 - Add todos in localStorage
16:13 - setState is async
18:59 - Loading todos from localStorage
20:29 - delete todos from localstorage
22:49 - Refactor code
24:41 - Prevent adding empty todos
25:25 - Edit todos
41:53 - Outro
-----------------------------------------------------------------------------
👇 Subscribe + Notification 🔔 for MORE 👇
@exacode
📌 Don't forget to like this video to see more such content, Thanks for watching!
มุมมอง: 1 537
วีดีโอ
Simple and Easy React Accordion | Machine Coding | Accordion React.js | React Accordion Component
มุมมอง 130ปีที่แล้ว
In this video, we will build a simple accordion using React and JS. 🌟Contents of this video 🌟 0:00 - Introduction and Application demo 0:50 - Creating basic structure 3:03 - Implement accordion collapse 6:01 - Overview of code 7:27 - Adding expansion, collapse icons 10:30 - Outro 👇 Subscribe Notification 🔔 for MORE 👇 @exacode 📌 Don't forget to like this video to see more such content, Thanks fo...
Simple New Year Countdown using JS and React | React Mini Project | Countdown App
มุมมอง 33ปีที่แล้ว
In this video, we will build a simple count down application for New Year using JS and React. We will use useEffect() and setInterval() here. 🌟Contents of this video 🌟 0:00 - Introduction and Application demo 0:22 - Create layout 3:30 - Implement countdown 06:51 - Outro 👇 Subscribe Notification 🔔 for MORE 👇 @exacode 📌 Don't forget to like this video to see more such content, Thanks for watching!
Click outside to close modal in React | Close dialog on clicking outside
มุมมอง 1.1Kปีที่แล้ว
In this video, we will build a modal which gets closed on clicking outside of the modal. 🌟Contents of this video 🌟 0:00 - Introduction and Application demo 0:36 - Creating the modal 3:45 - Check click outside 08:27 - Outro 👇 Subscribe Notification 🔔 for MORE 👇 @exacode 📌 Don't forget to like this video to see more such content, Thanks for watching!
Text to Speech App using React | React project for Beginners | Text to Speech React app
มุมมอง 2.3Kปีที่แล้ว
text to speech app react, react projects, react projects for beginners 📦 'react-speech-kit' github repo github.com/MikeyParton/react-speech-kit ✅ Learn how to use useEffect hook th-cam.com/video/9wgkJ53lEns/w-d-xo.html ✅ Implement infinite scrolling in React | using useEffect and useState | EASIEST way th-cam.com/video/xsCcFzuFqkM/w-d-xo.html ✅ How to Use the useFetch Hook for Data Fetching | u...
EASIEST way to send EMAIL from React WITHOUT backend | Send email using EMAILJS in React App
มุมมอง 431ปีที่แล้ว
react send email, react send email free, react send email without backend,react send email on button click,react emailjs,react email contact form, 🚀 Refer to EmailJS documentation about how to use it with React Apps www.emailjs.com/docs/examples/reactjs/ ✅ Learn how to use useMemo hook th-cam.com/video/rcWAUsfE0y8/w-d-xo.html ✅ Learn how to use useCallback hook th-cam.com/video/pmG66fj0pXc/w-d-...
How to use useMemo hook | useMemo hook | useMemo vs useCallback
มุมมอง 85ปีที่แล้ว
usememo hook,usememo,react usememo hook,react hooks,usememo react hooks, use callback react hooks, use usememo react, usememo vs use memo, use callback in reactjs, react hooks,usecallback hook,usecallback,react usecallback hook,react hooks,usecallback react hooks, use callback react hooks, use callback react, usecallback vs use memo, use callback in reactjs, react hooks ✅ Learn how to use useEf...
How to use useCallback hook | useCallback hook | React hooks for Beginners
มุมมอง 148ปีที่แล้ว
usecallback hook,usecallback,react usecallback hook,react hooks,usecallback react hooks, use callback react hooks, use callback react, usecallback vs use memo, use callback in reactjs, react hooks ✅ Learn how to use useEffect hook th-cam.com/video/9wgkJ53lEns/w-d-xo.html ✅ Implement infinite scrolling in React | using useEffect and useState | EASIEST way th-cam.com/video/xsCcFzuFqkM/w-d-xo.html...
Simple and Easiest way to Handle and Validate forms in React without Library
มุมมอง 736ปีที่แล้ว
how to add react form validation, react form validation without library, react form validation In this video you will learn about how to add form validation in React without using any external libraries. 📦 Boilerplate code github.com/exacodedev/react_form_boilerplate ✅ Learn how to use useEffect hook th-cam.com/video/9wgkJ53lEns/w-d-xo.html ✅ Implement infinite scrolling in React | using useEff...
React Context API Tutorial | useContext hook | React hook | Context API in React
มุมมอง 152ปีที่แล้ว
React Context API Tutorial | useContext hook | React hook | Context API in React In this video you'll learn about Context API in react, How to use context API, useContext hook ✅ Learn how to use useEffect hook th-cam.com/video/9wgkJ53lEns/w-d-xo.html ✅ Implement infinite scrolling in React | using useEffect and useState | EASIEST way th-cam.com/video/xsCcFzuFqkM/w-d-xo.html ✅ How to Use the use...
How to use useEffect in react | useEffect hook | React Hook | Lifecycle methods
มุมมอง 324ปีที่แล้ว
How to use useeffect in react | useEffect hook | React Hook | Lifecycle methods ✅ Learn how to use Context API th-cam.com/video/PwVyJrUUma8/w-d-xo.html ✅ Implement infinite scrolling in React | using useEffect and useState | EASIEST way th-cam.com/video/xsCcFzuFqkM/w-d-xo.html ✅ How to Use the useFetch Hook for Data Fetching | useFetch hook | React Custom Hooks th-cam.com/video/fCAItmVOuNY/w-d-...
How to implement infinite scrolling in React | using useEffect and useState | EASIEST way
มุมมอง 262ปีที่แล้ว
How to implement infinite scrolling in React | using useEffect and useState | EASIEST way
How to use useFetch Hook for Data Fetching | useFetch hook | Custom hook | Fetch API
มุมมอง 691ปีที่แล้ว
How to use useFetch Hook for Data Fetching | useFetch hook | Custom hook | Fetch API
How to Refresh Data Automatically in React ? | React tutorial for Beginners
มุมมอง 4.6Kปีที่แล้ว
How to Refresh Data Automatically in React ? | React tutorial for Beginners
How to pass data between different routes in React | useNavigate and useLocation Hook
มุมมอง 1.6Kปีที่แล้ว
How to pass data between different routes in React | useNavigate and useLocation Hook
How to implement dark/light theme toggle in React using state and context ? | React for beginners
มุมมอง 6112 ปีที่แล้ว
How to implement dark/light theme toggle in React using state and context ? | React for beginners
How to pass data between sibling components in React | Lifting up state | Easiest way
มุมมอง 16K2 ปีที่แล้ว
How to pass data between sibling components in React | Lifting up state | Easiest way
How to use DynamoDB with Lambda function and API Gateway | AWS for beginners
มุมมอง 7112 ปีที่แล้ว
How to use DynamoDB with Lambda function and API Gateway | AWS for beginners
Build REST API using Lambda and API Gateway || AWS Lambda || REST API || AWS Tutorial for Beginners
มุมมอง 922 ปีที่แล้ว
Build REST API using Lambda and API Gateway || AWS Lambda || REST API || AWS Tutorial for Beginners
How to Pass data from Child to Parent in React ? | React Tutorial
มุมมอง 2.8K2 ปีที่แล้ว
How to Pass data from Child to Parent in React ? | React Tutorial
Excellent. Thanks for this
I love you bro!!! Thanks a lot!
What if I show loader on fetching data then this technique will be failed
nice video...❤❤
This is one of the best online React tutorials I've ever used. Thanks for making this!
Short, sweet, and to the point. Thank you!!!
Thanks! It was really useful
Thank you sir
I've same use case but in my case I need to pass only 2 props value (username and password) out of bunch of state values from my one sibling to another.
i love india
Could you do this in typescript?
Thank you
Thank you. Good tutorial
Thank you. I am new to Rect.js and this video helped me solve my assignment
Great... Bring more❤
But lifting state won't cause a rerender of the parent component?
Yes, when state is lifted up to a parent component in React, changes to that state can trigger a re-render of the parent component. This is because when the state is updated, React will re-render the component and its children to reflect the new state.
@@exacode So... is it possible to prevent this full rerender without advanced state management? I've been banging my head against this wall for a while. Thank you!
@alanhf I think you can make the child components pure component using React.memo() that will stop the pure component being re-render if the props for that component are not changed. However the parent component will still re-render ( since state is changed in parent) and its all the non pure child components will also rerender.
submit my kanal
hello
why u add model .current ref in middle of if condition to remove error
That's because "model.current" was coming as null for some reason and hence we were seeing error in the console. So I added a condition to check "modalRef.current" is not null then only we will check "modalRef.current.contains(e.target)" to resolve the error. But now I checked the error does not come now and it works without this "modelRef.current" as well.
i liked your tutorial and teaching method ,try to make beginner to advance project so we can make project for our portfolio and make all react hooks with its usecase and where to use it
Is it possible to change the language like hindhi
Very good explanation and usecase demo. Whatis the vs code extension you used to display the number of times console.log got executed is showing like x14?
Thanks for watching. This extension is console ninja.
Bro it feels so freaking easy after your explaination... Thank U... I had a huge confusion here.. And U just cleared it... Thank U again❤
Thank you sir
This is how you can render different images based kn different screen sizes without any CSS.
In general, this is not particularly relevant, because typescript exists.
Yes that's what I mentioned in the end of the video. Prop-types can be useful for prop validation when using Javascript with React.
Prop types in runtime validation, typescript is compile time validation, I definitely prefer typescript
can we add an option to download the generated audio in mp3?
Yes that will be a very good and useful feature to have. You can go ahead and give it a try.
usefull video brother🤩
Code for Expo = React native ? Are both same ?
very good explaination
really nice sir, how to make just one language as default ? for example hindi or indonesian ?
Amazing video 🤝🤝🤝🤝
Glad it was useful!
I hope you liked the video, If you did please give this video a thumbs up 👍and subscribe to my channel for more such content!
I hope you like this video. Feel free to comment down your thoughts and doubts. Thanks for watching 😊
How i prevent refresh?
I didn't understand your question, could you please elaborate which refresh you are referring to?
@@exacode I was saying about page refresh that happens when u up state with that function. This was my mistake that it didn't work. Ur video was rly helpful ,tnx
@@freeversion825 When we are updating state, then React automatically re-renders the component and shows the latest state in the screen. This "re-rendering" is similar to page refresh but not exactly. Because here in re-render it does not refresh the entire page instead the specific component where the state got updated, it just re-renders that specific component. In this example we are updating the state in parent component. And in React when we update the state in parent component then it re-renders all of its child components. This is the default behaviour of React. Hope that helps! Let me know if you have any further questions or doubts.
Good job❤keep it up❤
Thank you 😊
I hope this video was useful. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe 🔔 to my channel for more great content! Happy coding 😊!!
I hope this video was useful. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe 🔔 to my channel for more great content! Happy coding 😊!!
I hope this video was useful. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe 🔔 to my channel for more great content! Happy coding 😊!!
I hope this video was useful. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe 🔔 to my channel for more great content! Happy coding 😊!!
Thank you for the lesson!!!!
Glad it was helpful!
I hope you enjoy watching it as much as I enjoyed making it. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe to my channel for more great content!
I hope you enjoy watching it as much as I enjoyed making it. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe to my channel for more great content!
I hope you enjoy watching it as much as I enjoyed making it. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe to my channel for more great content!
I hope you enjoy watching it as much as I enjoyed making it. If you have any questions or comments, feel free to leave them below and I'll do my best to respond. And don't forget to like and subscribe to my channel for more great content!
Very good
Thank you!
Osm video sir nice explain
Glad it was helpful!
nice explanation 👍👍
Glad it was helpful!
As a beginner in react this method is really useful to me , thanks brother!
Glad it was helpful!
This doesn't seem practical. Not every component is rendered in App.js. Unless one has to create a non-rendering parent component. I will recommend avoiding this method and using Redux instead.
Thank you, I'll read about Redux. But this method is pretty useful for beginners...
@iprocoder It doesnt have to be app.js though. You can lift a state to any parent component and sibling components in that component can both have access to it.
Yes correct
Very Helpful Thanks Sir🔥❤
Glad it was helpful!