Frontend development with React: the basics
What is frontend development?
If you stumbled upon this article, you are probably familiar with frontend development and React. If not, let’s cover the most basic definitions first. What is frontend development?
Development is divided into two groups: backend and frontend. Frontend development refers to the development of the graphical user interface (GUI) of a website or web app.
- HTML (HyperText Markup Language): the structure, the semantics of the page, a completely static structure
- CSS (Cascading Style Sheets): the presentation of the document or site, the cosmetics, how to embellish a site
A frontend developer then works with these three languages to create software. Their projects can be desktop or mobile websites, adaptive or responsive, reactive or static. As a rule of thumb, a frontend developer works on the side of technology with which the users interact. They focus on how the website feels and responds to actions from the users.
What are they? Basically, they are a collection of JS libraries that give devs pre-written code for routine tasks. These frameworks provide the structure that helps make web applications and sites: a bunch of JS code that someone else wrote, making it easy to use.
Frameworks have three main features: rendering, data handling, and event handling. These are supported by an MVC (model view controller) architecture. But if they are so similar, why choose React?
What is React
React was created by Facebook, later Meta after being reforged in Mount Doom, and a community of individual developers and companies have backed it. It has been over eight years since its release. Presently, it challenges other JS frameworks and libraries such as Vue and Angular.
For someone starting in web development, React offers an easy-to-learn environment that works for projects of any size. Thanks to its wide adoption, both newbies and experienced developers add resources for a growing ecosystem. In this way, tons of tools and extensions stem from an open-source community perspective.
Among other characteristics, React presents itself as:
- Declarative: essential to create interactive UIs easier. A dev can update and render code automatically for every data change and even get easier to debug code.
- Component-Based: With this feature, devs can build independent components to make complex UIs.
- Learn Once, Write Anywhere: If looking to develop new features without rewriting code, React does not assume what other technologies you use.
If all of these features are not enough, React also has a version to create native apps for Android and iOS: React Native.
Has React piqued your curiosity? Not a developer? That's okay! Neither am I. In any case, knowing what today's technologies do and having a crude understanding of how they work can be essential knowledge to leverage in the future. (Or just a way to throw an intelligent comment on your next dinner with developers).
Some developers today take a stand against React and put forward other options as Svelte. They usually have a couple of valid points, but the reality is that many companies are still looking for developers capable of using React. As with most things in technology, React will someday be obsolete and vanish from our shifting landscape, but that is not today and probably not tomorrow.
Are you willing to take your first steps into frontend development? Are you looking for an experienced mentor?