Making your first React project

Photo by Ilya Pavlov on Unsplash

Making your first React project


2 min read

Okay, so this is my 2nd article. So expect mistakes in some instances.

So let's start with the blog and it is quite obvious what we are gonna talk about. REACT.

The day when I started learning web development one thing was consistently hovering over my head when we will start. But after learning a bit more about JavaScript, I figured out that jumping right away is not the best option. Because ultimately REACT is a product built out of HTML, CSS and JavaScript. So to work properly on React I think you should understand a fair bit of the above. Okay, so enough blabbering let's just jump over my project.

Okay, so my project is just a standard react project (which means no backend as such as for now). When I started learning React it was quite difficult to wrap my head around the concept of components and all why this many codes and complex file structures but after the moment I worked on the project I understood the underlying benefit of components. Although I am no expert here are the two basic things that components excel in reusability (modularity) and responsiveness.

Since the site is broken into components making the whole website responsive is not a big issue any more, just focus on the things an individual component needs to adjust to make work responsively. In the end, all of this will assemble like a Lego.

Let's just look at some technical side of things:

I created the project using the old way npx create-react-app appname and then started working. My project is a conference website which needs 7 pages or so. So I broke it into 7 pages and each page shared some components which was like very helpful and can think of a project that consists of multiple pages and have many components in common. If somebody is quite unfamiliar with components like the basic part of the UI for example a button that needed to be used on page 1, can also be used on page 2 .. like that.

So here are the initial learnings: If possible decide all the components and structure of the project, so that you can create the required things right away and you'll save yourself from re-structuring which is quite confusing and hectic. So, react could be the tool if you have a design team that already created a UI/UX for the project.

Okay since the project is not official yet so I am not writing other things but soon when I'll be in a position to share I'll update this blog with more info.

Thanks if somebody on this earth reads this. Please leave feedback. Peace ✌️.