How I Created My First React Project
React is an open-source Javascript library for building dynamic apps, and it is the most enjoyable thing I’ve learned so far at coding. It facilitates the overall process of writing components, boosts productivity and facilitates further maintenance, ensures faster rendering, guarantees stable code, has all the Facebook resources, etc. I think those are enough reasons why you need to use React for your projects/app. So here we go! Let me tell you the whole story about my first project called “Madflix”!
DREAM ABOUT YOUR PROJECT!
I’m a junior software engineer, and I started coding very recently, like only a couple of months ago. When I heard that we would study React in the next phase, I had no idea about it. I googled and read blogs, watched videos about it, and knew I would love React. Then weeks before the project weeks started, I started thinking about my project. I was trying to find the best API that fits my expectations and is also not too hard to code because, first of all, I’m still a beginner at coding and I had limited time to finish this project. Then I found TMDB API provided by TheMovieDb. I remember the first moment when I saw the API and its features. I couldn’t stop thinking about it. I was thinking about it almost 7/24, including in my dreams! Yup, you heard me right. I dreamt about it! Dream about your project! Have a substantial passion for it! Other steps will come along.
DRAW ANYTHING YOU THINK!
This is something that I find extremely helpful. I draw! Draw anything that comes to your mind. Drawing helps me to clear my mind and figure out the path I’m going to take. It may not work for you, but it definitely works for me, and I wanted to mention it. I hope it helps anyone who reads this blog as well.
I wasted more than 20 pages to figure out how to build the structure of my project. (unfortunately wasted some pages 😭 ). This is one of the first pages I draw, and it only shows the first page that we’ll see when you enter my website. There are more pages that show component structures, movie pages, and the features I’ll add to my project, but I don’t want to upload them all here. You have to wait and see when it’s online!
LEARN HOW TO BUILD YOUR STRUCTURE!
I think the essential part of creating any project is in any programming language. I didn’t really care about the structure for the first couple of weeks when I started studying software engineering. Then I came across this YouTube Video, and it changed my vision completely. Everything started clicking for me right after I watched this video. If you are focusing on being a front-end developer, I highly recommend you watching that video so you’ll know some idea about how to start creating a project from scratches.
GET READY YOUR TOOLS/EXTENSIONS!
I LOOOOOVE extensions. They are going to be your third hand and eye. Coding is not easy, but it’s unbelievably easy to mess up. But there are some good people out there, and thanks to them, coding is way easier than before now. Don’t hesitate to use them. I’ll give you some of the extensions I use, and they are all highly recommended;
- Auto Rename Tag
- Prettier
- ES7 React/Redux/GraphQL/React-Native snippets
- Bracket Pair Colorizer 2
- VS Code Styled Components
- VS Code Styled Jsx
- React Developer Tools (Chrome Extension)
I don’t want to go too deep into them. Otherwise, this blog will never end hehehe. So please trust me and download them all, then figure out how they work and what they do. And now, let’s talk about serious stuff. Game begins!
STYLED-COMPONENTS
Styled-componentsis a library built for React and React Native developers. It allows you to use component-level styles in your applications.Styled-componentsleverage a mixture of JavaScript and CSS using a technique called CSS-in-JS.
Styled-componentsare based on tagged template literals, meaning actual CSS code is written between backticks when styling your components. This gives developers the flexibility of reusing their CSS code from one project to another.
I found out about styled-components recently and use them in this app. I think styling is one of the most critical parts when creating a website or an app, and styled-components made it pretty easy to style my app.
The most important part in styling is “Wrapper,” or whatever you want to call it. I called it wrapper conventionally. You can think of it as global styling for your components. You can hold the entire content of the page in one container. The actual content of the page is then enclosed inside this wrapper container. It’s easy to change and edit if you make any mistake or don’t like how it looks.
USE GLOBAL STYLE!
Another free hint from me. USE IT! Global styles are beneficial, and it makes styling easier. You can edit the most used tags like <body>, <p>, <h1>, or you can assign variable names for color that you are going to often use for your app at the beginning and never worry about them ever again.
Then all you need to do is import your global style file into the app.js, and that is it! Voila! Magic happened!
BE ORGANIZED!
Being organized must be your habit. Try to separate your page into components as much as possible and create files for them. Create your config file for the API sources that you will use several times in your app. Use “prettier” extension that I provided earlier.
If this blog helps at least one person at some point, then my goal will be accomplished. Don’t hesitate to reach out and ask me questions. I wish everyone my besties! Stay with codes :=>
