As a curious person, I have always been interested in programming. When seeing a computer or a smartphone work, one should wonder what is going on inside it.
At a certain point, I started pursuing that curiosity. At the age of 18 I took my first programming course, an introduction to computer science discipline at the university, that used C++ as the language of choice. It was pretty fun. I could study about variables and their types, repetition loops, conditional statements, and it all made a lot of sense, but nothing more than that. The course consisted mainly of writing command line programs that performed some sort of calculation. It was still pretty unclear to me how those little programs could become something like a website or mobile app.
I was still curious, but for whatever reason in life, I didn’t try to make a career in the field at the time. Over the years I did more programming courses in Java, C and Python. Those were mostly introductory courses and I reviewed those same basic concepts by building similar command line programs. It still made a lot of sense, but at the same time I didn’t know how those would be useful or how one could make a career out of it. It seemed far from the real world. I was working in finance at the time and tried to apply some of those concepts there, but the impact was still limited.
One of the projects I did was a tic-tac-toe game built in Java that could be played in the command line. I was pretty excited about it, after all it was a challenge for a beginner like me. I remember showing it to my family and friends and I could clearly tell that they didn’t think it was a big deal. Of course, who would open a terminal and run some weird commands in order to play a poorly looking game with terrible usability? At this point, I didn’t fully understand the importance of a friendly user interface. Technology is all about creating solutions, but without a good UI, your solution becomes much less useful and more difficult to use.
When I decided to study web development and go all-in into the tech career path, approximately 10 years after that first C++ introductory course, things started to make more sense. I started to understand how the internet works and began to discover the true value behind those lines of code. Besides that, I discovered how to build an interactive web page and put it up on the internet. I could build something that someone could actually use for something, anywhere in the world. That was a game changer.
HTML, or Hypertext Markup Language, is the content part. It defines the building blocks of the page, like a header, a sidebar, a dropdown menu and so on. It does so with a tag pattern, where each tag represents an element in the screen.
CSS, or Cascading Style Sheets, is the style part. It is what gives those HTML elements some visual appeal. With it you can add color, position the elements, shape them and make the page beautiful.
Components are the building blocks of React. They are independent, reusable pieces of code that can be used separately. For instance, a single page can be broken down into smaller components such as a navigation bar, a button with a specific functionality and a form.
You might think that React components are similar to HTML tags, and they are in a certain way. However, a component can have several tags and, more importantly, they can manipulate the way those elements interact with the user. An
<img /> tag in HTML represents a simple image. In React, you can create a component that still displays the image, but you can change its source dynamically according to user-specific data, or even put conditions in the display or style of that image. React allows you to manipulate the inner mechanics of the elements in the screen, something you can’t do in plain HTML.
Props, which is shorthand for properties, are pieces of data that can be passed to a component, just like parameters to a function. The render of that component, that will be displayed on the screen, can be a result of manipulations of that data passed as props. For example, a component can receive the user name as a prop and render it in some way.
State is data that is created within the component and used only inside it. It is supposed to represent the actual state of the component in a given moment. For example, whether a button is clickable or not. Managing state is one of the biggest challenges in front-end projects. Complex applications have several pieces of state and sometimes managing it requires help from other libraries, like Redux, or even React’s own Context API.
Fully understanding these three concepts and being able to play around with them has an incredible power. It allows you to create basically anything that comes to mind. Of course the level of complexity will change from one project to another, but the basics will stick.
Besides learning about the front-end, I also discovered what an API is and how it distributes data between the front-end and the back-end. The React application I know how to build will consume the data from an API and display it to the user. I can also understand what is the role of a database and how it can be used to store all the data of the application in a safe, reliable way.
Being able to build friendly, intuitive user interfaces gives a whole new meaning to programming. All those fundamental concepts I learned early on my journey are now proving themselves useful in a real context. Now I know that all that code made in C, C++, Java and Python can be translated into useful data that can be integrated into an API or a database, which then can be consumed by the front-end to develop real software products that real people can use to improve their lives.
Seeing something I have built with code being used by someone is, for me, the greatest motivator to keep studying and discovering more. After learning the basics of the front-end it is time to dive into the back-end, where all that data and logic can be manipulated in order to better serve the users. Understanding this logic of how web applications work was certainly the biggest transformation on my journey, it allows me to have a big picture vision of how things work and where each piece of the puzzle goes.