React is an open-source framework used to develop frontend and single-page web applications with ease. Since its inception in 2013, it has grown to become one of the most widely used frameworks for building web applications. The framework currently has over 120k stars on Github which is a testament to its growing usage in the industry.
The benefits of using a framework like react for frontend development are tremendous which includes
- Job security: Currently, there is a high demand for skilled react developers in the industry which implies that having a very good understanding of the react framework increases the prospects of getting a good job.
- Reusable blocks of code: When writing vanilla HTML code, it is difficult to reuse blocks of code. For example, there are certain sections of a website that remains the same on multiple pages such as the footer, navigation bar, etc. With react, it enables developers to create a section of a website as a component then import it to parts of the website the code is needed.
- The abundance of open-source packages: The popularity of react framework has enabled many developers to create packages/libraries which reduce development time and make frontend development easier for other developers. For instance, there are different packages for forms, tables, modals, etc, which are can be easily customized for the application.
- Scalability: The ability to reuse components in different aspects of the application makes react scalable for building large applications, besides components reusability, DOM manipulation with react is easy because of its declarative rendering
The basics of a react app
To get started with building react application there are basic concepts that should be known, let us dive into it. PS: it is assumed that you have a solid understanding of HTML, CSS, and Javascript.
1. JSX
JSX is acronym for JavaScript XML . It is a templating engine for writing HTML in React. It contains the full powers of Javascript which means you are not restricted in writing Javascript codes in HTML tags. In other words, you can embed javascript expressions alongside your HTML codes which will be rendered at run time. The example below displays the difference between rendering a UI in regular HTML and React JSX.
(App.html)
<div> 5 + 5 = <span id='answer'></span> </div>
<script>
document.querySelector("#answer").innerHTML = 5 + 5
</script>
JSX (App.jsx)
<div> 5 + 5 = <span id='answer'>{5 + 5}</span> </div>
Furthermore, the above example displays the ability to embed Javascript code directly into HTML code which in the long run saves the developers time. Additionally, it also allows developers to easily create dynamic web pages without stress.
2. Components
Components in React are reusable blocks of code that can be used in different parts of the codebase. They are Javascript functions that receive an input called props and return JSX elements. For example
const HelloWorld = (props) => {
return <div>Hello world</div>
}
To make components become usable in your application you render them in JSX using similar syntax as HTML. For instance
<HelloWorld />
3. Props
Another basic concept to understand in React is props. Just like HTML elements, components can also have attributes, which are used to pass data into the components. The below example shows how to use props
const HelloWorld = (props) => {
return <div>Hello world! my name is {props.name}</div>
}
<HelloWorld name="Jason" />
At runtime when the HelloWorld component is rendered, it will render Hello world! my name is Jason. We have successfully been able to pass data into the HelloWorld component. It is important to note that you can also pass dynamic data to components via props e.g
const HelloWorld = (props) => {
return <div>Hello world! my name is {props.name}</div>
}
const myName = "Jason"
<HelloWorld name={myName} />
At runtime, the Hello World component will render the appropriate message
4. useState
React useState is used to declare variables and store property values that belong to a component. Whenever the value of the variable changes the component is re-rendered. React useState is part of the family of React Hooks. As a beginner, it is advisable to understand the concept of useState before learning the other hook concepts.
Here is an example of how to declare a state
const [state, setState] = useState(initialState);
Now a full example
import {useState} from "react";
const HelloWorld = () => {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const randomAge = () => {
setAge(Math.floor(Math.random * ))
}
return {
<div>
<div>Hello world! my name is {name}, I am {age} years</div>
<button onClick={randomAge}>Randomize my age </button>
</div>
}
}
In the example above, whenever the button is clicked, the randomAge function sets a new value to the age state using the setAge variable
5. create-react-app cli
Create react app cli is the best way of starting a react app, it provides the necessary development tool to kickstart a react app. Let’s get started.
1. Ensure you have node and npm installed on your computer, if you don’t click HERE to download. Note: install from the LTS tab, which is recommended for most users.
2. Open your terminal into a directory of your choice on your computer and run the following command
npx create-react-app my-app
PS: replace “my-app” with the name of your chosen app name
3. Open “my-app” with your favorite code editor, you should have a list of directories and files like the image below.
4. Return to your terminal run cd my-app
5. To start the application you use npm start. It creates a local server that is accessible on your web browser. Voila we have created a react app
In conclusion, React is a framework developed to reduce your development time, give structure to your frontend codebase. It will still be relevant in the future due to its growing popularity and demand. Therefore, if you are a beginner considering learning React, I will advise you to get started now!!!!
Cheers
