Nuwandi Dulshara’s Post

🚀 Excited to share my progress with React! 🚀 📝 Day 30 of #100DaysOfCode: Today, I worked on enhancing my React skills by creating a TodoButton component for my Todo application. TodoButton Component: This component is a part of a React project, designed to handle actions related to individual todo items. Props: The component receives several props:id: Unique identifier for the todo item. The post introduces the TodoButton component and its features briefly. It showcases a code snippet of the TodoButton component. Hashtags are used to categorize the post and increase its visibility among developers interested in React, JavaScript, web development, UI/UX, etc. Looking forward to diving deeper into React and building more exciting features. Stay tuned for further updates! 🛠️💻 #React #Coding #WebDevelopment

🚀 Learning React Components & Props! 🚀 I just dived into a crucial concept in React: Components and Props! 🎉 🔹 Components: The Building Blocks 🧱 Think of components as reusable, independent blocks that make up your UI. They're like functions that return HTML elements, making your app more organized and maintainable. You can create functional or class components, both serving the same purpose! 🔹 Props: The Communication Link 🔗 Props (short for properties) are how components talk to each other. They allow you to pass data and functions between components, making your app dynamic and interactive! 🌈 💡 Pro Tip: Always keep your components pure by using props effectively! It makes your code easier to maintain and debug. Simplified View: Components 🧩 = Blueprints Props 📨 = Data you send to customize them Excited to build more UIs and learn deeper concepts! Let's keep building together! 💪✨ #React #WebDevelopment #Components #Props #JavaScript #LearningJourney #FrontendDevelopment

🚀 Just Completed a New React Project! 🚀 Excited to share that I've just finished creating a Todoie App using React! 🌟 This project was an amazing learning experience, and I'd love to share some highlights with you all. 🛠️ Tech Stack: React: For building the user interface CSS: For styling the components 📋 Features: Add Todos: Easily add new tasks to your todo list. Display Todos: View all your tasks in a clean, organized list. Interactive UI: User-friendly and visually appealing interface. 🌟 Learning Outcomes: Gained hands-on experience with React components and state management. Enhanced my CSS skills to create a responsive and modern design. Improved my understanding of user interaction handling in React. 💡 Project Highlights: Used functional components and hooks for state management. Styled the app to have a sleek, dark theme with a central todo list. Implemented form handling for adding new todos efficiently. I’m excited to apply these skills to even more complex projects in the future. If you have any feedback or questions, I’d love to hear from you! Let's connect and share our experiences with React development. #React #WebDevelopment #TodoApp #JavaScript #FrontendDevelopment #Coding #LearningByDoing

🚀 Just Completed a New React Project! 🚀 Excited to share that I've just finished creating a Todoie App using React! 🌟 This project was an amazing learning experience, and I'd love to share some highlights with you all. 🛠️ Tech Stack: React: For building the user interface CSS: For styling the components 📋 Features: Add Todos: Easily add new tasks to your todo list. Display Todos: View all your tasks in a clean, organized list. Interactive UI: User-friendly and visually appealing interface. 🌟 Learning Outcomes: Gained hands-on experience with React components and state management. Enhanced my CSS skills to create a responsive and modern design. Improved my understanding of user interaction handling in React. 💡 Project Highlights: Used functional components and hooks for state management. Styled the app to have a sleek, dark theme with a central todo list. Implemented form handling for adding new todos efficiently. I’m excited to apply these skills to even more complex projects in the future. If you have any feedback or questions, I’d love to hear from you! Let's connect and share our experiences with React development. #React #WebDevelopment #TodoApp #JavaScript #FrontendDevelopment #Coding #LearningByDoing

🌟 My First React.js Project! 🌟 I'm excited to share my first project in my React.js learning journey. I built a simple yet functional CRUD application for managing users, where you can add, edit, or delete users with ease. Each successful action shows a confirmation alert to keep the user informed. To ensure a polished and responsive user experience, I used Bootstrap for styling. This project allowed me to apply essential concepts like state management, component-based design, and real-time updates, giving me hands-on experience with core React principles. There's more to explore in this demo video, and I hope it’s helpful to others starting with React! Looking forward to sharing more projects in the future. Any feedback or suggestions are most welcome! 🚀 #ReactJS #CRUD #WebDevelopment #Bootstrap #LearningJourney

"Excited to share my first React project! 🚀 After diving into the world of web development, I've challenged myself to learn React, and the journey has been incredibly rewarding. 💡 Introducing my latest creation, a responsive web application built entirely with React. From managing state efficiently to building reusable components, every step has been a lesson in innovation and problem-solving. What I love most about React is its flexibility and scalability, allowing me to craft seamless experiences for users across devices while streamlining development workflows. This project has not only honed my technical skills but also ignited a passion for creating impactful web applications. A huge shoutout to the React community for their valuable resources and support along the way. I can't wait to continue exploring and pushing the boundaries of what's possible with React! 🌟 Live Demo : https://lnkd.in/gB-gVfCi GitHub Repo : https://lnkd.in/gNUBpSW5 #React #ReactJS #JavaScript #FrontendDevelopment #ResponsiveDesign #Coding #Programming #WebDev #DeveloperLife #UI #UX #SoftwareEngineering #CodeNewbie #TechSkills #LearnToCode #ProjectShowcase #Innovation #TechCommunity #CodeIsArt #CreativeCoding #SoftwareDevelopment #TechEnthusiast #CodePassion"

Hello Connections!! 🌟 My First Simple State Functional Component Task! 💻✨ I’m excited to share a small yet meaningful project I built recently as I’ve started my journey into React JS under the guidance of Sridhar Raj P at Credo Systemz. This project demonstrates how state management in React can make components interactive and dynamic. With just a click of a button, users unlock a message.  What I Learned: 🎉Understanding and implementing state in functional components using useState. 🎉Creating interactive UI that responds to user actions. 🎉Building simple yet impactful projects to solidify React concepts. This project marks the beginning of my journey with React JS, and I’m excited to explore more complex and powerful applications as I continue to learn! 🚀 Looking forward to sharing more projects and milestones with you all. 😊 #ReactJS #StateManagement #FrontendDevelopment #LearningJourney #CredoSystemz #MotivationThroughCode

🚀 Project Launch: To-Do List App with React 🚀 I'm excited to share a project I've been working on—a To-Do List application built with React+vite! This project allowed me to dive deep into React's powerful features and improve my front-end development skills. Live: https://lnkd.in/gWrZBtFd 🔹 Project Highlights: Interactive UI: Clean and user-friendly interface for adding, editing, and deleting tasks. State Management: Efficient use of React hooks for state management and side effects. Responsive Design: Optimized for various screen sizes to provide a seamless user experience. Persistent Storage: Tasks are saved in local storage, ensuring data persistence even after refreshing the page. This project was a fantastic opportunity to enhance my understanding of React and modern JavaScript development. I’m looking forward to building more projects and exploring new technologies. You can check out the project on GitHub [https://lnkd.in/giZcmcfP] and feel free to provide any feedback! #React #JavaScript #WebDevelopment #FrontendDevelopment #Programming #Project

Day 14: Exploring React Components, Props, and JSX! 🚀 Today, my web development journey took an exciting turn as I delved into React’s fundamentals: Components, Props, and JSX. Key Highlights: 🔹 Components: I learned to break down the UI into smaller, reusable building blocks. This modular approach makes app development organized and scalable. 🔹 Props: Props introduced me to the power of passing data dynamically between components, making them flexible and adaptable. 🔹 JSX: Writing UI code in JSX felt seamless, blending JavaScript logic with HTML-like structure for an efficient development experience. 🔹 Styling: I used CSS to add structure and visual appeal to the app, exploring how to design layouts effectively with Flexbox. React’s approach to building applications is truly a game-changer, and I’m thrilled to have started this chapter. Next, I’ll explore state management and lifecycle methods to make my applications even more dynamic. What’s your go-to tip for learning React? Let’s discuss and grow together! 🌟 #ReactJS #WebDevelopment #Components #Props #JSX #FrontendDevelopment

🚀 Excited to share my latest project! 🎬 I've just completed a React-based application that showcases movie details, including title, poster, director, and cast. Here's a brief overview of the key functionalities: 🎥 Movie Listings: Display a comprehensive list of movies with their posters, titles, and brief descriptions. 🔍 Search Functionality: Easily search for movies by title or director, making it simple to find your favorite films. 📖 Detailed Views: Click on any movie to view detailed information, including the director's name, cast list, and a larger poster image. 📱 Responsive Design: The app is fully responsive, ensuring a seamless experience on both desktop and mobile devices. 🔗 External Links: Includes links to more information or trailers for each movie, providing users with a richer experience. Technologies used: ⚛️ React: For building a dynamic and interactive user interface. 💅 Tailwind CSS: For a clean and modern responsive design. 🌐 Node.js: For backend integration and API handling. I'm thrilled with how this project turned out and am looking forward to adding even more features in the future! Check out the screenshots below, and feel free to reach out if you have any questions or feedback. Github Repo : https://lnkd.in/gS_eGgUX #ReactJS #WebDevelopment #MovieApp #JavaScript #TailwindCSS #NodeJS #ResponsiveDesign #FrontEndDevelopment #Programming #TechProject