React Naming Conventions You should follow as a Junior Developer - clean-code

Whether you're new to React or already working as a Junior developer, you might have already wondered what are the right naming conventions to use for React projects and codebases and how to avoid writing bad code. In this video, we'll explore the Essentials React Naming Conventions and Principles for writing cleaner and readable code.

⭐ Timestamps ⭐
00:00 Intro
00:25 Folder Structure
03:23 Naming Conventions
03:26 1. Pages naming conventions
04:15 2. Filenames
04:52 3. Components
05:53 4. Props
06:19 5. Functions
07:53 6. Variables
09:06 7. Hooks
09:41 8. Typescript Interfaces
10:25 9. Constants
10:46 ESLint Rules for clean-code

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

Watch This 👇 👌
Why I avoid useEffect For API Calls and use React Query instead ✅

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[alex--.--]

Really good explanation, I like your style! Do you happen to have the code you are showing in your video in a public github repo?

[kushagra-aa]

Hey there! Could you please provide a video explaining how to write better services? Currently, I create hooks for different types of API calls (such as UseOrders to get, edit, delete, and add orders). However, I feel that this approach might be flawed. Additionally, I would like to know how to handle filters effectively. I have multiple filters that can be active at different or the same times, like or "?search=gold". What would be the best way to handle these filters dynamically? Please check the grammar and spelling of this paragraph.

[alexandruenache]

Hello! I have noticed that you wrote your types files with .d.ts and that is not correct. Matt Pocock has a good explination why is bad to name types files with d.ts

[sujithgnth]

Man, This is the most underrated channel I have ever seen. Cool contents

[galactusclb]

As the always valuable video Can you share your ESLint Rules file

[rjwhite]

For my API calls I have a folder titled "api" and inside a file axios.ts. I declare and export all of my axios calls to be used somewhere else in the program. I also make a folder specifically for forms since they can be pretty lengthy when you add validation like zod and react form hook. Do you think that's bad naming convention?

[merazmi]

my preferences, all filename usin "-", i like about-us.tsx. because nextjs using "-" based for pages filename. and easy to read too. but each component, will be PascalCase.

[aymenbachiri-yhhd]

Thanks, keep posting videos like this

[JanJ-rq]

For props I prefer types over interface and do not export it unless I really need it. If the type is not exported it is fine to define type Props instead of type SomeSpecificProps

[whateva]

Why do you use an assets and a public folder? How do you decide to put the assets in one or the other folder?

[reinhardkevin]

what color theme do you use in vscode?