Improve React Code Quality with Husky

🚀 Day 11 of My Web Development Journey Today I learned how developers manage code: 👉 Version Control (Git & GitHub) Earlier I used to save files like: final.js, final2.js, final_final.js 😅 Now I understand a better way 👇 💡 Here’s what I understood: - Git = tracks changes in code - GitHub = stores code online - Helps in collaboration & backup ⚙️ Common actions: - commit → save changes - push → upload code - pull → get latest code 🎯 Simple example: You build a project → Save changes using Git → Push to GitHub → Access anytime & share with others This made me understand how real developers manage projects. No more “final_final_v3” files 😂 #webdevelopment #git #github #learning #codingjourney

𝗙𝗮𝘀𝘁 𝗡𝗼𝗱𝗲.𝗷𝘀 𝗦𝗲𝘁𝘂𝗽 𝗚𝘂𝗶𝗱𝗲 Slow tools kill your speed. A good Node.js setup helps you focus on code. Start with the basics. Install Node.js and npm from the official site. Run these commands to check the installation: - node -v - npm -v Now create your project folder: - mkdir myproject - cd myproject - npm init -y The -y flag skips the setup questions. Use a code editor. VS Code is a top choice. Create a file named index.js. Run your code with this command: - node index.js Optimize your code with Webpack. Run this command: - npm install webpack webpack-cli --save-dev Create a webpack.config.js file. This bundles your code into one file. Keep your code clean. Use ESLint and Prettier. Run this: - npm install eslint prettier --save-dev - npm install eslint-config-prettier --save-dev Run this to format your files: - npx prettier --write . Find bugs with the built-in debugger. Run: - node inspect index.js Use n to step to the next line. Use c to continue. Quick summary: - Install Node.js and npm. - Use VS Code. - Add Webpack. - Add ESLint and Prettier. - Use the Node debugger. Source: https://lnkd.in/gZ3YEZdK

Built a Meme App and Learned More Than Tutorials I started the React course by freeCodeCamp × Scrimba and instead of just watching, I built along. First project: a Meme Generator Simple idea. Real learning. Here’s what I applied while building it: -> Components & JSX Structuring the UI into reusable pieces instead of static pages -> useState Managing dynamic data — including input fields updating in real-time -> useEffect Fetching memes via API and controlling when the data loads -> Props Passing data cleanly between components -> Rendering logic Updating the UI based on state changes instead of manual DOM handling React isn’t about writing more code, it’s about controlling how UI behaves with data. Still early, but now it feels like I’m building with purpose, not just following tutorials. Next: More real-world projects and deeper React patterns What was the first project that you built as a learner? #ReactJS #WebDevelopment #FullStackDeveloper #BuildInPublic #JavaScript #LearningJourney

Waitt… if you're still using git clone like this: git clone <repo-url> Then you're probably downloading way more than you actually need 👀 Better approach?? Here u go ;) ✨ git clone --depth 1 <repo-url> honestly… it's one of those small things that just makes sense once you know it. When you normally clone a repo, Git pulls everything literally the entire history, every commit, every change since day one. But with --depth 1 {aka a shallow clone}, you only get the latest version of the code. No history. No extra baggage. Just what you need. Which means way faster cloning, Saves disk space 🧠 and hell cleaner when you just want to use the project If you've never tried this before, go ahead and give it a shot ;) Follow Sakshi Jaiswal ✨ for more quality content like this. #Frontend #React #Sakshi_Jaiswal #FullstackDevelopment #javascript #TechTips #Git #Clone #flags #Webdev

🚀 Day 8 of Consistent Learning – React Journey (Late Update) Missed posting last night, but staying accountable and sharing today. 🔹 What I covered: - PropTypes for type checking in React - Started a mini project: Text Expander 🔹 Key takeaway: Using PropTypes adds a layer of reliability to components by catching bugs early. Starting small projects like Text Expander helps in applying concepts immediately and reinforces learning. 🔹 Next step: Continue learning new React concepts step by step while strengthening these fundamentals. Consistency continues, even if the timing isn’t perfect. #React #JavaScript #WebDevelopment #Frontend #LearningInPublic

🚀 Day 4 of Consistent Learning – React Journey Focusing on revision through building, not just watching. 🔹 What I covered: - Revised previous React concepts by building the Eat-n-Split project - Applied state management, props, and component structure in a real scenario 🔹 Key takeaway: Building projects exposes gaps in understanding. Revision through real implementation is far more effective than just revisiting theory. 🔹 Next step: Continue learning new React concepts step by step while strengthening these fundamentals. Learning by building, one step at a time. #React #JavaScript #WebDevelopment #Frontend #LearningInPublic

Class-13 'Time for test' from the Namaste React course by Akshay Saini 🚀 01. What are different types for testing?  - Manual testing: Testing the functionality that we have developed. E.g → we have developed a search bar, manual testing is checking the search bar manually by typing in it and searching the query.  - Automatic testing: We can write the test cases for testing the functionality. It includes   1. Unit testing : Write test cases for the specific part (isolated components)  2. Integration testing: writing testcases for the components that are connected like menu page and cart page are connected.  3. End-to-end testing: writing testcases from user enters into the website to user leaves the website. 02. Enzyme and React Testing Library (RTL) are both popular utilities for testing React components,  but they operate on fundamentally different philosophies.  While Enzyme was the industry standard for years,  React Testing Library is now the officially recommended tool for modern React applications. Enzyme:  Implementation-focused: Tests how a component is built (state, props, internal methods). Supports Shallow Rendering (renders only the top-level component) and Full DOM rendering React Testing Library (RTL): User-focused: Tests what the user sees and interacts with (DOM nodes, text, labels). Always performs Full DOM rendering to simulate a real browser environment. 03. What is Jest and why do we use it? Jest is a Javascript testing framework designed to ensure correctness of any Javascript codebase. It creates a test environment  - Running tests: Finding files and executing them in the command line.  - Assertions: using expect() to verify code outcomes.  - Mocking: Simulating modules or functions with jest.fn() or jest.mock()  - Code Coverage: Generating reports on how much code is tested. Please have a look at my github repo at the 'branch 13' I've shared all my assignments. #frontend #uideveloper #reactjs #programming #javascript #jsx #coding #uiux https://lnkd.in/g6Dt-SuA

We're back with another update on react-infinite-scroll-component(https://lnkd.in/gZgRuSkG)! 🥁 When I took over as maintainer, I laid out a 4-phase roadmap to bring this library back to life. Today, we're crossing off Phase 2 with the release of v7.0.0. 🎉 Here's where we stand: ✅ Phase 1 — Comprehensive test suites & CI/CD automation (v6.1.1) ✅ Phase 2 — React 17 migration (v7.0.0) 🔜 Phase 3 — TypeScript conversion & modern React features 🔜 Phase 4 — Accessibility improvements & enhanced documentation What shipped in v7: - React 17 peer dependency support - Jest + React Testing Library test coverage - Storybook upgraded from v5 to v7 - Revamped CI/CD with automated publish workflows - ESLint, Prettier, and Husky configured for contributor-friendly DX - Node.js 18+ baseline 109k+ dependents. Still going. Still breaking nothing. Huge thanks to Ankeet Maini for the trust, and to everyone who's filed issues, opened PRs, or just starred the repo, your patience means a lot. I'll be actively going through open issues and PRs now, so if you've been waiting, your turn is coming. 🙌🏻 #OpenSource #React #JavaScript #TypeScript #WebDevelopment #Community #Maintainership

🚀 Day 2 of Consistent Learning – React Journey Building momentum after getting back on track. 🔹 What I covered: - State management in React - Local vs Global state - Lifting state up - Derived state 🔹 Key takeaway: Understanding where state should live is crucial. Lifting state up helps keep data consistent across components, while derived state avoids unnecessary duplication and keeps logic clean. 🔹 Next step: Continue learning new React concepts step by step while strengthening these fundamentals. Staying consistent, one step at a time. #React #JavaScript #WebDevelopment #Frontend #LearningInPublic

I like building in Next.js because it lets me get moving fast without feeling like I’m fighting my tooling the whole time. Lately I’ve been doing a lot of work in a TypeScript + Next.js setup, and one of the things I really like about it is how quickly I can go from idea to implementation. - Server components are great. - Server-side functions are great. - TypeScript keeps me honest. And overall it just makes building feel fast and clean. One thing I’ve also really been enjoying is setting up GitHub Copilot to work more like an actual part of my workflow instead of just a fancy autocomplete. I use: - instruction files - skills - agents - prompt files That setup has been super helpful for keeping my code more consistent. A lot of times I’ll build a section first, then use Copilot to come through behind me and help review the work, write tests, and document what I just built. What makes it especially useful is having reusable prompts already set up, because then I’m not starting from scratch every time I want help reviewing code quality or checking consistency. Honestly, that has been one of my favorite parts of my workflow lately: moving fast, but still giving myself structure. I like tools that help me build quicker, but I really like tools that help me stay organized while I’m doing it. Also, tiny nerd moment: I think it’s super nifty that Next.js includes docs in node_modules and provides an AGENTS.md file for agent workflows. Stuff like that makes the ecosystem feel very builder-friendly. #nextjs #typescript #githubcopilot #softwareengineering #webdevelopment #fullstackdeveloper #devworkflow