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.
Learning the basics to build a Web user interface
I started learning the basics of the front-end with the three technologies that compose the core of any modern web page: HTML, CSS and JavaScript. This article is not supposed to be a tutorial, as I will only describe what those technologies are used for. For those who want to learn it, there are tons of good resources over the internet. I personally recommend freeCodeCamp.
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.
With HTML and CSS alone it is possible to do lots of things, but only static pages. Meaning that there is no user interaction and the page is the same for anyone who accesses it. That is where JavaScript comes into play. It is a programming language that can manipulate the web page through something called the DOM (Document Object Model). It can add and remove HTML elements, add behaviour to things like buttons and dropdown selectors and basically anything that involves specific user interactions and data.
This very brief description summarizes how every web page works. Everything that happens in the browser in terms of user interface can be narrowed down to HTML, CSS and JS. That means you can basically build anything knowing just that. Correct, but if you are a habitual web user you know that there are some pretty complex pages out there, and building those with just these three technologies would be possible, but incredibly complex and time-consuming. This is why something like React was born.
What is React and why it exists
Quoting React’s own documentation, it is an open-source JavaScript library, developed by Facebook, used for building user interfaces. A library is basically a set of functionalities developed and published by a third party that are not native to the language. React exists to facilitate the work of developers who need to create interactive user interfaces in web applications. The three main concepts of React are components, props and state.
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.
When it all comes together
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.
Top comments (0)