The latest articles on DEV Community by Karim Abdelrehim (@karim_abdelrehim_6674509e). https://dev.to/karim_abdelrehim_6674509e https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3676903%2Fcf8add2e-13e0-4edb-bbfb-e0e91cca640a.png https://dev.to/karim_abdelrehim_6674509e en Karim Abdelrehim Wed, 24 Dec 2025 12:28:48 +0000 https://dev.to/karim_abdelrehim_6674509e/what-i-learned-building-my-first-react-portfolio-9o9 https://dev.to/karim_abdelrehim_6674509e/what-i-learned-building-my-first-react-portfolio-9o9 <p>Hi everyone 👋</p> <p>I recently built my first React portfolio as part of my journey into full-stack web development, and I wanted to share a few things I learned along the way.</p> <p>This project helped me understand not just React itself, but also how modern web applications are structured and how different tools work together.</p> <p>Why I Built a React Portfolio</p> <p>I wanted a single place to:</p> <p>Showcase my projects</p> <p>Practice real-world React patterns</p> <p>Learn state management with Redux</p> <p>Work with external APIs</p> <p>Instead of just following tutorials, I decided to build something practical that I could improve over time.</p> <p>Key Technologies I Used</p> <p>Here are some of the tools and technologies I worked with:</p> <p>React – for building reusable UI components</p> <p>Redux Toolkit – for managing global state</p> <p>Axios – for handling API requests</p> <p>CSS – for responsive layouts and styling</p> <p>Public APIs – such as random quote APIs and Dev.to articles</p> <p>What I Learned</p> <p>Some of the most important lessons from this project were:</p> <p>How useEffect is used to fetch data when a component loads</p> <p>Why global state (Redux) is useful for shared data</p> <p>How to structure a React project properly</p> <p>How small UI details (like hover effects) improve user experience</p> <p>How to debug common issues like incorrect imports and state updates</p> <p>Challenges I Faced</p> <p>One challenge was understanding how asynchronous code works in Redux. At first, concepts like thunks were confusing, but after practicing, they started to make sense.</p> <p>Another challenge was organizing files correctly and keeping components clean and readable.</p> <p>What’s Next?</p> <p>I plan to:</p> <p>Add more projects to my portfolio</p> <p>Improve styling and animations</p> <p>Write more technical blog posts</p> <p>Continue learning backend technologies</p> <p>Final Thoughts</p> <p>Building projects is one of the best ways to learn web development. Even simple applications can teach you a lot if you focus on understanding how things work under the hood.</p> <p>Thanks for reading!</p> react beginners webdev javascript