Can you solve this beginner React interview practice problem?
VloĆŸit
- Äas pĆidĂĄn 9. 07. 2024
- đŹ Discord / discord
đ Newsletter newsletter.webdevcody.com/
đ GitHub github.com/webdevcody
đș Twitch / webdevcody
đ€ Website webdevcody.com
đŠ Twitter / webdevcody
Some days I'm unmotivated to learn but you do a good job breaking things down and making it more understandable. I appreciate the time you take to teach these "simpler" lessons it really helps me out.
This video is really great! It's simple yet covers an important aspect web development, making it a perfect introduction to React. I'm totally sharing this challenge with our interns.
It's an awesome way to get them started. I'll make sure to refer them to this video when they finish so that they can see your solution as well. Keep up the great work, Cody!
Amazing Challenge, please keep going for this series!
one more thing I want to say, your videos are amazing because they are spontaneity, no edit and no montage
we support you dude
Thanks man glad you enjoy my stuff!
Your videos are so good to watch. Impressive work! Keep it up
This was awesome. I would love to see more React practice problems like this.
thanks for these man, really enjoying it
Been enjoying your videos, keep on going
I will watch every react problem you upload! Iâve never seen react problems beforeâŠusually itâs DSA. This is needed content
Really nice video! Some fast and easy things I would do to make it even better (if this was a job interview) would be to set a max length of 1 for the input. Then a small tweak on the styling of the green area, maybe smaller width and then smaller height so it doesn't stay between the borders of each box. Could even place the green area inside a div with a bigger size and when the div is hovered it shows cursor pointer and shows the green box so the user can add a cell without going precisely into the middle of two cells with the cursor while still maintaining good aesthetics
Great Job I really want to see you solve more challenges like this . Thank You
Awesome stuff Cody!!
Nice tuto! I really liked your style. True and authentic!
The practice problem make me so excited. Thank you
Following your channel for few days and i love your contents specially the front end mentor challanges. đ
Love this content, great delivery and the speed was good. A tip I would like to share for your CSS - to get that .plus all the way to the right you can remove the right: -5px; then use left: 100%; with a transform: translateX(-50%); those values are great because if the width changes on your .plus you don't have to reposition it đ
i love your channel so bad bro, keep going with these videos, It motivates me a lot, I'm practicing a lot with your videos in search of getting my first job and you are part of it, thanks a lot bro
This is a great video!
Respect. Awesome tutorial. đ
Just came across your channel, instant sub đ
Keep making these types of educational videos đ
I loved that. Really made me wanna polish my knowledge of array methods đ
Great video!
Great video, thank you. :) Also props to folks in the comments mentioning how to improve upon it...
loved solving this simple problem, added some animations when you hover in between, elements space out and added animation when adding a cell, was fun.
Nice little task! I would personally add onClick on every cell and just calculate if it was clicked on the edge (either right or left) and if so add a new cell (at index -1, +1 or 0 if index -1 < 0, that would also allow to add cells to the ends of the cells chain) and focus it so you enter new value instantly. Also, I guess cell should accept only one symbol at the time so whenever you enter new value previous one should be cleared out.
That's a great idea!
I thought just the same thing, and i would have added a filter to remove item without value
Could you help explain this? I thought that was what he did with setCells and adding the new cell in between the two slices
That was a cool challenge. As a tip for beginners, don't try to over optimize everything at the start. Type out the variables, type out the arrays, the functions so you can understand the flow a little easier.
Pesterenan por aqui?!!?!?! O.O
@@rafaelneukirchen6619 ele sempre aparece na sessĂŁo de comentĂĄrio de uns videos muito bons rs, muito bom saber que alguem que eu admiro tem os mesmo gostos que eu đ„°đ„°
Amazing, Thank you .
This was very niceâ€â€â€
Incredible!
Great challenge!
Please try to bring in more real world interview questions. An idea for you: participate in real interviews, then record a video solving the challenge you had.
Yeah good idea
Iâd watch that
Agree
Good job babe!!!
cge! tara! :D
awesome vid.
More of this. This is soul of learning how to do programming
Could you please tell how you make a selection rectangle with pixels like on 6:30?
Which theme are you using in vscode ?
what is the vs code them do you use ? and what is the icon theme
hi Cody, great video! honestly seeing people, like you, doing this so easily makes me wanna not quit and try to be more efficient with my code and learn a bit more everyday. I'm now starting my path in React.js, so thank u.
pd: can u give us the name extensions that ur using for coding and the color theme? thanks! greetings from Argentina
bearded theme stained blue
Hi, what extension are you using for your theme please?. Nice video btw, really enlightening
bearded theme
What theme are you using for VS Code by any chance? The text color scheme is really nice!
Bearded theme
what is the vscode extension that you're using that puts de error in display without having to hover it?
error lens
How do you get the CSS that comes from the beginning of the video? Is there a repo somewhere? The css I get when I start a new project with vite is very different.
I may have had some left over css from an existing react directory
Np but a great tutorial!
Does anyone know the plugin used in the video that shows the error right beside the code so that we don't need to hover on the error?
Error lens
Just out of curiosity do you have a video on your vscode theme / extensions etc?
probably, theme is bearded theme stained blue
Thank you
nice lesson
next task can be - prevent all cells from rendering while editing, and have only one cell rendered
you could handle that "in between" click without adding any elements. for example you could use clientX (cursor position) and element bounding rect to calculate if the click happened near the inside edge of the box.
That was the way my brain went with it at first but his solution seemed a lot easier.
@@lucascarman2578 its not more complicated. However, it depends of a use case because its more of am edge than in between click. Wont work with spacing between the boxes.
Would .before()/.after() have better performance and be cleaner code?
splice() doesn't work here, I believe it changes the original array. App crashes if I use splice.
Just a bit confused here, why React doesn't allow you change prev in set function?
Would have been a perfect opportunity to implement a linked list! Maybe I'll try it as exercise.
Put a button between instead. Span with onclick is an antipattern, you can't tab to it
yes good point
that's pretty cool, I was working on a particularly similar personal project, but I was struggling with removing the cells with the double click event. What I would do is take the index and slicing the current array to remove the item. Problem was there wasn't a new index being generated after each item removed, and that would potencially mess up future items removed. Does anybody see a possible solution?
about splice there is toSpliced which doesn't modify the array if I'm right.
Hey man nice video, btw which laptop you're using? It feel so smooth...
M1 air
@@WebDevCody thanks for replying fast, is it good enough for coding, I'm a MERN stack developer as well
have try the method of Splice with setCell(prev=>prev.splice(idx,0,'_'))
the console show the correct result , but the display didnt render the array, can you tell why ?
I think .splice() returns the removed elements so as is youâre setting prev to an empty array
@@allanmartinez6474 so what is the correct way of using with prev?
@@apexyu164 try setCell( prev => {
prev.splice(idx,0,'_')
return [ ...prev ]
})
You have to spread the array otherwise it will keep the same reference and React wont re-render. Keep in mind that this mutates the original array so it's not recommended. You could accomplish the same in a non-mutating way with array.slice()
why not place the span outside the div with classname cell and set it to display none and then onHover to display inline-block
i think so
What is the name of the theme in vis you are using?
Bearded theme stained blue
Thank you for this video! Can you please in some future video explain why useEffect hook runs twice on mount, it messes up the application too much, especially the fetching data
React 18 strict mode, itâs supposed to help you find bugs
which IDE are you using here ?
Damn, that's some quality content. Just tired of todo apps,hooks tutorial
It would be more performant to extract the cell logic into its own react component. This will let you give each cell its own update function so you do not have to worry about mapping over the cells and only altering the one at the correct index. This is why you almost always want list items to be independent react components. Definitely a cool beginner challenge though!
glad to see im not the only one that immediately thought about this. Hey, maybe there's hope for me yet :D
can you explain this a little more?
@@copsarebastards been a while since i watched this video so i don't remember how it's all made but instead of having one component for all cells and iterating over an array to find which was clicked and which one to update, it's better to extract the cell logic into it's own component and reuse that cell component multiple times. That way first - you avoid the rerender of the entire parent component when something changes, second - you get better Separation of concerns, third - you don't have to iterate and look through to figure out what was pressed and where which means less computation, fourth - you have huge flexibility in the component.
Also this is the purpose of react - to build reusable components.
The way the video shows would be alright (somewhat) if you had done it with vanilla js.
I would solve it by dividing the offsetx by width of thr parent element and floor it to get the index. To insert I would splice 0 at that index.
i did this challenge by myself before finish watching your video and all i did to detect the click event between the boxes was adding a span in the middle, using position didn't even crossed my mind :(
I clicked like when you renamed to TSX đ
When I looked at your thumbnail I thought it was Pewdiepie coding
what's your theme on vs code?
Bearded theme
whatâs this color themeâs name??
bearded theme
Now this is what needs to be asked in interviews!!!!
Not other shit theoretical stuff
If you already have the index of the cell that needs to be updated, why would you loop over the whole array?
In my opinion, solution will be:
const updatedCells = JSON.parse(JSON.stringify(cells))
updatedCells.splice(indexToUpdate,0,newCellValue)
setCells(updatedCells)
Or setCells(p => [...p].splice(i, 0, value));
does anyone know which theme and fonts he is using ?
@Logan Laski thanks a lot !
from his description:
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
having onClick in a spacer?
Should be a button, my mistake
@Web Dev Cody Can you please make video on handeling authentication in Nextjs. Like how can we use access token withou saving it in localstorage or cookies. setting inside internal state. like that
you could just store it in context, but you need to make sure you only ever navigate using the router.push or elements or else it'll clear out
@@WebDevCody And one video could be of Implementing authentication using next 13 middleware. It would be great help. I couldnt get any article . I didnt even understand in docs
it would be great for new comers to your channel like me to
add a playlist of interview practices problems
That's a great idea!
good video ,this problem so easy with React Developer 1 year exp :v
cool
Why would you loop over the cells when you can make a component for the cells and update the state in that component instead đ
I think state needs to be elevated anyway since the child needs to append to the cell array, so the state of the cell canât really live in the cell component anyway. Either way, two ways to skin a cat
Instead of input You could also use element property: contentEditable = true, which lets You perform inline update of element. It happens only on view side so we still need to update array/object/database data, etc, i.e. save data after unfocusing element
I would mark this down since it tells me you donât care for accessibility.
easy, I would just review it in vue :p
Use buttons instead of spans. divs and span with onClick are not buttons! Only input (type button and submit for forms) and button elements are.
yes, this slipped my mind while recording
Why loop why not spread the array and update that index only ?
i am gonna copy this just so i dont forget how to insert in the middle of 2 elements xDDD
Probably to difficult for a junior developer
Of course I can. I can just paste it into chat gpt and it will give me the answer.
what is this vscode theme
bearded theme stained blue
What is the name of the plugin heâs using that is typing helpfull comments like what is wrong with the code.
typescript + error lens probably
At 10:00 when youâre writing the call back function. Could you not just:
setarray( prevArray => prevArray[indx] = e.target.value)
That modified the original array which goes against the way react expects you to update state
@@WebDevCody oh so youâre using map because it creates a copy of the original?
@@LeagueJeffreyG exactly, well it makes a shallow copy, but yes
@@WebDevCody cool stuff
Pretty challenge. But, after accessing your website, I've see that isn't responsive. Why?
I havenât gone back to make it responsive. Been focusing on other things
You could have placed the button outside of the div without needing to do all those css
Can i skip learning javascript and go direct to learning react?
I wouldnât
@@WebDevCody thanks for the response.
Before you start learning any framework/library you've to know some basic concepts of the source language. In this case, javascript knowledge is essential. (basic things like loops, conditional ... and some new features like arrow functions, promises, destructuring, map, reduce, filter), you can search for a Roadmap to become a react developer.
Itâs a bad practice to use indexes as keys. It can cause unexpected behaviour
I can) I'm sql developer)
Why shouldn't we use ID as key?
Because when you, for example, change the order of such an array that only has primitive values, React doesn't see this - keys remain the same because they are the index, despite the values at that index changing. And when you make it hard for React to detect state changes, you're shooting yourself in a foot. What you should do instead, is have an array of objects, each with the display value and an unique id, which you can dynamically generate (uuid() or stringified Math.random()) when adding new tiles on click.
123
video is 22 mins long. how much time did you actually take?
Usually I edit out maybe 1-2 minutes from videos depending on how much I clear my throat or say um or explain things poorly. Most of my videos I try to do a live as possible and just clean up the video
No context reducer I don't think this is gonna pass these are just leetcodes.
Iâm not sure what you even said
You talk a bit to much and you tend to repeat the same stuff 2/3 times.
Thanks for the feedback
If you're already passing the index of the array you want to update, why map over it? Why not just directly update it?