React Crash Course — How it Works
Part 1: Introduction to React
Live dev notes taken throughout the following tutorial by Dennis Ivy— React JS Crash Course
In part 1, we look into what makes React powerful by understanding how it works and how it compares to applications built without frameworks.
What is React?
React is a front-end framework used to build user interfaces. It is a set of tools that pre-define the structure of how we build our user interfaces, making it easier to work on larger projects and teams.
Built by Facebook in 2011 and released in 2013, it compares to other frontend frameworks such as Angular (built by Google). Similarly, Vue.js and Svelte are also considered to be competitors.
React is a great choice to learn as there is a vast amount of support available, and is also considered industry-standard (when applying for jobs). It’s built and used by some of the world’s top engineers at Facebook. Companies such as Airbnb, Netflix, and Dropbox also use React.
Since React is a front-end framework, it doesn’t interfere with the backend. In fact, they actually work even better together. The backend generally handles everything on the server-side, whether that be the database, business logic, API, etc). A front-end framework would be used to connect to the backend and render out the data.
The above image (left) shows the data which is stored in the backend. It doesn’t have to be stored as a JSON, but this is how data is extracted from the backend to the frontend. The frontend would use something like fetch or axios to make an HTTP request to get this JSON data. The front end would then take care of interacting with the API as well as of course, rendering the data (right).
Without a frontend framework, a website is typically created using HTML, CSS, and JavaScript. We would work with the DOM (Document Object Model) and interact with the website through it. Any interaction or update on the front-end needs to be written in JavaScript, which works fine with simple applications. However, as the application logic becomes more complex, a frontend framework can be really helpful.
A frontend framework sets up the structure and shows us how to piece things together in a standardised format. This can also reduce the amount of JavaScript code.
What are Components in React?
Components are fundamental to every React application. Instead of writing our applications using HTML, CSS, and JavaScript, we would build everything out of components. Each component has its own HTML and JavaScript code which lives together in its own file, making the process of building the app a lot cleaner.
Let’s take a look at Twitter as an example. Here we can imagine that the application can be made up of the following components:
- Header component
- Navigation component
- Create Tweet component
- Sidebar component
- Tweets component
All of these components can now be put inside of a parent component (i.e. the page component). The process of building these components separately and putting them together on one page is a little bit different from what we’re used to.
Components can also be nested. Using the Feed component as an example, it can be made up of Tweet components which itself is made up of a Tweet Author component, Tweet content component, and a Tweet Actions component.
A component is simply a JavaScript class or function that returns some HTML code which is written in JSX (JavaScript XML). Let’s walk through an example of how it works.
Let’s say in our notes application, we create our Notes component as a function (we can also create it using a class). In our function, we can include some kind of logic such as getting some data before we return the HTML. This function is then exported which can be imported into another component or page.
A page might look like what’s shown below where we again, use a function to define a Home component. In it, we nest other components like a Header, Notes, and Footer component.
All the code we’re returning is not HTML even though technically that’s what we’re returning. It’s actually JSX, which is a language used to bind our HTML code with JavaScript.
There are a few things to note when using JSX:
- The class attribute must be labelled as
className(because JavaScript already uses theclasskeyword) - We can write JavaScript inside of the HTML using the curly braces
- We can pass in variables directly into the HTML, again by using the curly braces
- Since the browser cannot technically read JSX, it needs to be compiled to HTML and JavaScript before it can be hosted
How to create Single Page Applications
Let’s first look at how a normal multi-page application works.
Typically, a user would make a request to go to the home page where the server-side would look for the template and return the template with some data. If the user clicks on the profile page (assuming the app has user accounts), it would send another request to the backend to obtain the profile template and data associated with the user’s profile. As a result, we’re effectively dealing with multiple pages which requires a template to be built for each unique page.
However, React is typically used to build out “single-page applications”. This term can be confusing, so Dennis Ivy prefers to call it a “single template application”.
What this basically means is that the application is made up of one template — index.html. As the user navigates through the site, they will click on links that lead you to different parts of the website. Even though the appearance of the website looks different, the template doesn’t change, but the page components (as highlighted with the dashed line) are being swapped out. Doing this means that the page never reloads and the experience is a lot faster, where elements such as likes and notifications are able to be updated and seen live.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
