How I Write Clean Code in React

Рет қаралды 24,139

Күн бұрын

Check Out Brilliant → brilliant.org/CosdenSolutions
🚀 Project React → cosden.solutions/project-react
Join The Discord! → discord.cosden.solutions
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video I will show you how I write clean code in React. I will show you my mindset, how I approach a problem, and how I break it down into multiple small parts to make it manageable and scalable. Through this video you will learn how to write better React code yourself, and become a better React developer!

Пікірлер: 66

@johndevnoza4223 Ай бұрын

as a begginer one, im doing this by habbit and i was scared if it was overkill or not. now i feel happy!

@dr_jacko Ай бұрын

This is a good start, but in general I would prefer to abstract fetch away a step further than hooks or components and you also need to handle loading and error states with your async calls. As an example, create a UserProfileRepository and UserProfileService classes which have functions for CRUD on UserProfiles. Use the singleton pattern on these classes and keep them in a context where it is required in the app.

@vladanisov1689 Ай бұрын

definitely the best approach for this kind of scenario!

@hooooman. 22 күн бұрын

A beginner here, this approach definitely makes our code more clean. but my doubt is, say if we are building a little advanced/complex project, the same approach makes too many folders and files ?

@mulengachitalima7695 Ай бұрын

Awesome video.. Really appreciate how you always adhere to SOLID principles in your videos

@sachityadav4141 Ай бұрын

This was Needed 😀 ThankYou, i was having anxiety seeing lots of styling classes in return of every component

@user-be3ri8gf1p Ай бұрын

Perfect timing, just wanted to learn about those :D

@sontranvan5348 Ай бұрын

Simple, effective tips that are easy to learn and apply. Thank you for sharing your knowledge!!!!

@carloseduardomagalhaespere5112 Ай бұрын

Thank you for another great video! I've been learning a lot here! One question: Why do you prefer to use type instead of interface in the props definition? 🤔

@gherardivictor Ай бұрын

Good quality and valuable content, thanks

@edward-vonschondorf-dev Ай бұрын

Great video Cosden! It's definitely something I've been looking into lately cause I don't like long complex components that I have to edit/create. I was just curious about something though, i noticed in your imports you have an @ symbol at the beginning and was wondering how that was setup and if there is an advantage to it? Thanks!

@cosdensolutions Ай бұрын

it's import aliases, the advantage is it makes things cleaner, and if you move things you don't have to always have everything be rewritten

@MohamedRabi Ай бұрын

Thank you for the fantastic content!

@tunde6159 27 күн бұрын

Such good tutorials.

@bruce_k3lly Ай бұрын

Thank you for this amazing video it's really helpful and it has increased my productivity, but can I use utils folder, as you said and just add reusable function for similar work ?

@fanespratama Ай бұрын

Take a note that when you use the custom hook with useEffect in more than one file, the useEffect will run more than once, so keep one custom hook for every layout/component (let say one for user list, one for user details). If not, just move the useEffect outside the custom hook

@sathirabandara7981 Ай бұрын

great video. its very useful. 🤩

@mashab9129 28 күн бұрын

why not having ProfileData component call the useFetchProfile ?

@devquen37 6 күн бұрын

PageLayout -> ProfilePage -> ProfileData -> Children Components (Avatar, PostList, etc)

@SahilPatel-kh2rt Ай бұрын

Hey, which vs code theme you are using.? Excited to use it for my self also.

@2positive1 19 күн бұрын

I would move static data array upper, from the App component. It’s static, no need to recreate it on every re-render.

@JericAdriano-yo9pv Ай бұрын

How about modals or dialogs that are used in one page? Do we handle them all in the parent component?

@user-dd7kw3ym5i Ай бұрын

should I still separate the fetching hook if only one component uses it?

@64revolt 26 күн бұрын

What do you think of atomic design and styled components? Only got to the page layout so far, but that seems like a perfect case for that, no?

@QueeeeenZ Ай бұрын

I think you can use Nuxt and all the layout, structure will be already configured for you out of the box.

@ianfrye8988 Ай бұрын

Great video. Only question I have: why not move the useFetchProfile inside the ProfileData page instead of passing it as a prop?

@ExileEditing Ай бұрын

I struggle with choosing between fetching on the page and passing down or fetching in the components as well. I think it makes sense for both, but it is better if you separate concerns and fetch from the page. This way, your component only cares about rendering and doesn't deal with how it gets the data. It makes those components simpler as well and probably easier to test

@cosdensolutions Ай бұрын

because ProfileData is only responsible for rendering, not fetching. Also, if you want to show profileData but with different filters or page sizes, adding that inside will be a mess. The way I did it, the parent decides that and just gives it to ProfileData to take over. It's simpler

@ianfrye8988 Ай бұрын

@@cosdensolutions Thanks for clarifying!

@sontranvan5348 Ай бұрын

@@cosdensolutions but in case I need to use the data of filters or page sizes from ProfileData to refresh profiledata, should I use a callback to left it to ProfilePage or move fetching into ProfileData component?

@techaddictdude Ай бұрын

Shouldn't the PageLayout.tsx be located in the pages folder, while the 'Profile' file should be in the in components?

@kit3x663 Ай бұрын

I have one question. Why you didn't use React.FC or forwardRef in any of your videos. Is it usseles to use?

@harithsenevi4 Ай бұрын

Can't we just use the useFetchProfile hook inside the ProfileData component itself instead of passing profileData as props from ProfilePage component? Is it a bad practice? What complications could have with that approach?

@FiguringOutWhatIsLife Ай бұрын

I mean isn't the children example you gave in the first one just what we do in App.jsx though?

@viophile Ай бұрын

What is your view on default exports? In my opinion they should only be used in libraries, not in any other code.

@mahendrasinh_9106 Ай бұрын

if you export as a default then you can import it at any name // Exporting a component with export default const MyComponent = () => { // Component implementation }; export default MyComponent; import MyComponent from './MyComponent'; without export default // Exporting a component with named export export const MyComponent = () => { // Component implementation }; // Importing the component import { MyComponent } from './MyComponent'; you need to call with same name

@PaulSebastianM Ай бұрын

Default exports should be banned. They are not adhesive to strong typing and make tree shaking impossible especially when mixed with named export.

@delightful209 Ай бұрын

is it me or is the audio levels on this video really low. i have my headphones at 50 % and its quite low compared to other videos

@lyrical6852 Ай бұрын

Honest question, are you doing this in the real world app or in your work?

@isaacjames8735 Ай бұрын

Make a video about Social Login system in react please

@programmerjowo Ай бұрын

How to handle authentication on the API

@Divyv520 Ай бұрын

Hey Man , really nice video ! I was wondering if I could help you with Viral Content ideas in your niche , Script , editing , thumbnail , SEO , Growth and analysis , Leads and appointments for your business , etc in all to you ! Pls let me know what do you think ?

@keklamo1485 Ай бұрын

anyone know what allows him to do rjsfc and have the react component with function keyword? i just have rafc and its the arrow funciton i hate it

@cosdensolutions Ай бұрын

check out my vscode setup video

@nicus1504 Ай бұрын

why would you use export default function instead of export const?

@keklamo1485 Ай бұрын

@@nicus1504 i just like using function better its personal preference

@RoomCorner_ Ай бұрын

Sir i'm interest of React Project but my english isn't very well. Is there subtitle like in KZfaq?

@cosdensolutions Ай бұрын

yes there is!

@SingleSeeker Ай бұрын

in a real project , a loading , error is also needed.

@FalioV Ай бұрын

Why would you use this Layout component on every page like this ? Just pass it to the index route and thats it. Overall I see this is "basic 101" and way far from Sr. react code. And I personally think this is not the best way to describe "custom hooks" as it should be. This profile code belongs to the Service layer. Don't get me wrong, I'm not here to argue, just have some questions over all. :)

@-mahmoudadel2628 Ай бұрын

يمزاجك يا كوزدين

@Edgars82 Ай бұрын

export const router = createBrowserRouter([ { path: '/', element: ( ), errorElement: , children: [ { index: true, element: , }, { path: 'search', element: (... this way all childrens will have layout and no need to import it as wrapper inside page components