This article was co-authored by Xander Jay Cagang
As developers, we constantly aim for simplicity and efficiency in building websites and applications. Developing a user interface with only HTML and CSS can be challenging, mainly because it would result in a lot of lines of code. To help with these challenges, comes libraries. One user interface library that every beginner developer should know about is REACT. With React, a developer can create perfect websites and applications with efficiency.
Introduction
Before we start, we should go back to the basics. Creating websites or web applications are what we call web development. It is the process of creating a page or website on the internet, allowing you, the developer, to share insightful information, connect with users around the world, and manage data online.
Two sides of web development are frontend development and backend development. Our main focus is frontend development, the process of creating user interfaces and user experience.
Two important tools of frontend development are frameworks and libraries. Our focus is on libraries, which is essentially a tool that helps you create your app. You are still in control of what you want to create and when you call the library.
What is REACT?
React is a Javascript library that helps in the development of user interfaces with the implementation of components. These React components combine and form together a whole React application or website.
When building with React, we first break down our desired app into components. These React components are Javascript functions that have their own logic and appearances. These components can range from buttons, cards, icons, and etc. Once implemented, they are combined into one so that data can flow through them. This is how to think in React.
Why use REACT?
As developers, we want to develop an app in the simplest and most efficient way. Building an app with manual HTML, CSS, and Javascript is still okay, but at times can be too long and confusing. It can be hard to debug errors, and there are times when you want to reuse the same UI elements throughout your app, but you find yourself repeatedly writing the same blocks of code.
With React, the time to develop an app can be reduced with the help of reusable components, simpler coding logic, easier fetching, and less code. Errors can easily be seen for debugging, with your files and codes organized neatly.
Let’s REACT!
1. To get started, open your Command Prompt (CMD) or PowerShell.
Check if Node.js is installed.
node -v
If a version number is returned it means you have Node installed, congrats!
If not, you must first install Node.js
2. Create our first REACT App using Vite
Once you have confirmed you have Node.js in you machine, run:
npm create vite@latest
You are then prompted to enter your project name.
Afterwards, you will be asked to choose a framework, choose REACT.
The language we will be using is Javascript so make sure to choose that.
Allow to install npm dependencies.
Note: Now as React is written in JSX, browsers tend to have a hard time understanding and loading it. Although it is possible to run an app with React only, it takes a lot of things to set up, and it is generally slow for modern apps. That is why we need a helper. In this workshop, we will use Vite.
Vite helps translate JSX into readable HTML and Javascript for browsers. Furthermore, it helps handle the files and manages the production server, providing a faster and more efficient development process.
3. My First REACT App
Once the setup finishes, Vite will automatically start the app and show a local URL (usually http://localhost:5173).
Fun Fact! Port 5173 is actually a clever Easter Egg. In leet speak, it can be read as V1T3. 5 -> V (Roman Numeral 5), 1 -> I, 7 -> T, 3 -> 3. Aside from that, it also serves a practical purpose as 5173 is unlikely to conflict with commonly used ports like 3000 or 8080. But, you’re not stuck with it and you can always change the port in your Vite configuration.
Open that link in your browser to see your React app running.
Components
React is built around components, which are small, reusable pieces of the user interface. Instead of writing one large page, you split your app into meaningful parts like headers, buttons, cards, and sections.
You can think of components as building blocks for your UI. Each component focuses on one responsibility, making your code easier to read, easier to maintain, and easier to scale as your app grows. One of React’s biggest strengths is reusability. Once you create a component, you can use it in multiple places. When you update that component, the change automatically reflect everywhere it’s used.
Now let’s create your first Component:
Inside the React project you just created, most of your work will happen inside the src folder. This is basically where your components live.
It is important to note that:
- React components must use PascalCase (e.g., Button, ProfileCard, Message)
- React components are written using JSX, which is a mix of Javascript and HTML. This lets you write HTML-like syntax directly inside your JavaScript files
1. Create a new component file
Inside the src folder, create a new file called Message.jsx.
Then inside create this code:
function Message() {
return (
<h1>Hello</h1>
);
}
export default Message;
This is a function component called Message.
This component simply displays a message “Hello”.
2. Import it in your main app
Now let’s use this component in our main app.
Our main app starts at the root component, often called App.jsx. This file acts as the place where the UI starts to take shape.
Note: When first installed, App.jsx will have written code for its welcoming page. It can be removed once you start editing your own app.
First, open App.jsx and import your component. Next, call the component inside the App function. A React component can be called by simply typing in the component name in a self-closing tag (e.g. ).
import Message from "./Message";
function App() {
return (
<div>
<Message />
</div>
);
}
export default App;
Congrats! You have successfully created and rendered your first React Component.
Note: React components’ return statement returns exactly one root element. When dealing with more than one element, it is an important practice to create one parent <div> for the return statement, and place all other statements inside of it.
Props
The component you have just created will always show the same text. But what if you want to reuse the same component but with a different message? This is where props come in.
Props, short for properties, let you pass data from a different parent component to a child component.
1. Update your Message.jsx
function Message(props) {
return (
<h1>{props.text}</h1>
);
}
export default Message;
Instead of displaying a message immediately, Message now receives an object called props.
The props.text is a value passed from the parent component (App) and the content of
<h1> is now dynamic instead of being hardcoded.
2. Update App.jsx
import Message from "./Message";
function App() {
return (
<div>
<Message text="Hello World!" />
<Message text="My first React Component" />
</div>
);
}
export default App;
React now renders two instances instead of the same Message component
Each instance receives two different props
This is very powerful and useful as instead of creating multiple components, we can create one reusable component and control what it shows or do with props.
States
In your web application, components sometimes need to change because of an interaction made by the user. For example, clicking a button should increase the number or typing into an input field should update the displayed text. In React, components need to remember what is currently there, and this is called a state.
Let’s try implementing a state in a component.
Let us create a similar component to the first component you created. Create a file Greeting.jsx and type in the same code and structure of your first component that displays “Hello.” Since it already says “hello,” let’s make it a greeting to a name. We will create a state where we can change the name that we want to be displayed through an input field.
1. Import useState in your component
import { useState } from 'react';
function Greeting() {
return (
<h1>Hello</h1>
);
}
export default Greeting;
First thing we need to do is to import useState from the react library.
Insert the first line of code shown above into the top or first line of your component.
2. Call useState
const [name, setName] = useState("World");
Now we are going to call useState in our component. When calling useState, we are telling React that we want this component to remember something.
On the first line inside your component function, type this line displayed above. Your code should now look like this:
import { useState } from 'react';
function Greeting() {
const [name, setName] = useState("World");
return (
<h1>Hello</h1>
);
}
export default Greeting;
This line defines our name state variable. State variables like name and setName are the variables that we want to change for the message. State variables are named like these (variable and setVariable) so that we know that we can change the original state or value of the variable into another. In our code above, name is where the value is displayed while setName can be used as a function to change the value of name.
Also, useState() is a Hook, where the current and default value that we want the component to remember will be placed. In our code above, we set the default value to be “World” meaning that we want it to display “Hello World” when the state of the variable is untouched.
3. Adjust your component
import { useState } from 'react';
function Greeting() {
const [name, setName] = useState("World");
return (
<div>
<h1>Hello {name}</h1>
<input
type="text"
placeholder="Enter a name"
onChange={(e) => setName(e.target.value)}
/>
<div/>
);
}
export default Greeting;
Inside return, edit your header element and add an input tag similar to what’s shown above.
{name} allows us to be able to change text, rather than just having static text in that line. This is where our name state will be placed and displayed.
Inside the input field, onChange is used to listen to the event (e) that has occurred. When the text inside the field (e.target.value) is final and entered, it activates the setName state and changes the value in your {name}.
You can now import the Greeting component into App.jsx and test it out by writing an input. With the event that you typed on the input field, you have now changed the current state of your component.
Conclusion
What was shown in this article is only an introduction to the basics of React. There is still much more to explore about its features and capabilities. To better understand the full power that React provides to developers, you can read more in the official documentation on their website. As a developer, learning React is one of the important foundations in your frontend development journey. By mastering it, you can start building websites and applications with greater efficiency, flexibility, and creativity.
Top comments (1)
Amazing!!!