Introduction to Frontend Development

Title: Introduction to Frontend Development using React.js

Subtitle: Beginners’ guide on how to create responsive and user-friendly web pages

with React.js

Introduction:

React, sometimes referred to as a frontend Javascript framework, is a

Javascript library that was created by Facebook.

React is a tool for building user interface(UI) components.

Prerequisite:

To get the most out of this article, you should have a basic understanding of

HTML, CSS and Javascript. If you are unfamiliar with these technologies, we

recommend taking some time to familiarize yourself before proceeding.

What is React?

React is a Javascript library for building user interfaces. React is used to build

single-page applications. React allows us to create a reusable user interface(UI)

components.

Features of React.js, Installation and Virtual DOM

Features of React.js

Here are some features of React;

• JSX: React uses the JSX syntax in writing components, which makes them more

independent.

• Component: React adopts the component-based application approach which

allows us to use the same component repeatedly.

• One-way data flow: React only allows us to pass data from parent to child,

which helps trace data when debugging.

• Virtual DOM: The Virtual DOM makes rendering user interface(UI) super fast.

• Simplicity: React is very simple to learn and work with, especially for new

comers.

Installation

What you need to install;

i. Node.js

ii. Virtual studio code(VScode).

Setting up a React Environment

If you have Node.js installed, you can create a React application by using create-react-app.

If you’ve previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app,

To uninstall, run this command: npm uninstall -g create-react-app.

Run this command to create a React application named my-react-app :

npx create-react-app my-react-app

The create-react app will set up everything you need to run a React application.

Run the React Application

Now you are ready to run your first real React application!

Run this command to move to the my-react-app directory:

cd my-react-app

Run this command to run the React application my-react-app :

npm start

Result:

Virtual DOM

React maintains 2 virtual DOMs at once, one contains the updated virtual DOM and one which is just the pre-updated version.

React compares the pre-updated virtual DOM and the updated virtual DOM, then figures out what exactly has changed in the DOM, this process is known as “Diffing”.

React ES6

What is ES6:

ES6 stands for ECMAScript 6.

ECMAScript was created to standardize Javascript, and the ES6 is the 6th version of ECMAScript, it was published in 2015 and is also known as ECMAScript 2015.

React uses ES6, and you should be familiar with some of the new features like:

i. React ES6 Classes: ES6 introduced classes.

A class is a type of function, but instead of using the keyword function

to initiate it, we use the keyword class, and the properties are assigned

inside a constructor() method.

Example:

A simple class constructor;

class Car {

constructor(name) {

This.brand = name;

}

}

ii. React ES6 Arrow Functions: Arrow functions allow us to write a shorter function

syntax.

Example:

hello = () => {

return “Hello World!” ;

}

iii. React ES6 Variables: Before ES6 there was only one way of defining your

variables: with the var keyword. If you did not define them, they would be

assigned to a global object.

Now, with ES6, there are three ways of defining your variables: var, let, and

const.

var has a function scope, not a block scope.

let has block scope.

const has a block scope and its value can never change.

iv. React ES6 Array Methods: There are many Javascript array methods.

One of the most useful in React is the .map() array method.

The .map() method allows you to run a function on each item in the

array, returning a new array as the result.

In React, map() can be used to generate lists

Example:

const myArray = [ ‘apple ’, ‘ banana ‘, ‘ orange ‘ ]

const myList = myArray.map((item) => <p>{item}</p> )

v. React ES6 Destructuring: Destructuring makes it easy to extract what is

only needed.

Example:

const vehicles = [ ‘mustang’ , ‘f-150’ , ‘expedition’ ] ;

const [ car, truck, suv ] = vehicles ;

vi. React ES6 Modules: Javascript modules allow you to break up your code into

separate files.

ES Modules rely on the import and export statements.

Export allows us to export functions or variables from any file.

There are two types of export: Named and Default.

Named Export: You can create named exports in two ways. In-line individually, or all at

once at the bottom.

Default Export: You can only have one default export in a file.

Import allows us to import modules into a file in two ways, based on if they are named exports or default exports

vii. React ES6 Ternary Operator: The ternary operator is a simplified conditional

an operator like if / else.

Syntax: condition? <expression if true> : <expression if false>

viii. React ES6 Spread Operator: The Javascript spread operator ( … ) allows us to

quickly copy all or part of an existing array or object into another array or

object

Example:

const numbersOne = [1, 2, 3] ;

const numbersTwo = [4, 5, 6] ;

const numbersCombined = [ …numbersOne, …numbersTwo] ;

React JSX

JSX stands for Javascript XML.

JSX allows us to write HTML in React

Coding JSX

JSX allows us to write HTML elements in Javascript and place them in the DOM without any createElement() and/or appendChild() methods.

Example:

const myElement = <h1>I Love JSX! </> ;

const root = ReactDOM.createRoot(document.getElementById( ‘root’ )) ;

root.render(myElement) ;

React Components

Components are like functions that return HTML elements.

Components are independent and reusable bits of code.

Components come in two types, Class components and Function components.

Class components

A class component must include the extends React.Component statement.

Example:

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car! </h2> ;

}

}

Function components

A function component also returns HTML, but function components can be written using much less code and are easier to understand.

Example:

function Car() {

return <h2>Hi, I am a Car! </h2> ;

}

React Props

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

Props stand for properties.

Example:

const myElement = <Car brand= “Ford” />;

function Car(props) {

return <h2>I am a { props.brand } ! </h2> ;

}

React State

The State is a Javascript Object that stores a component’s dynamic data and determines the component’s behavior.

State is dynamic because it enables a component to keep track of changing information, whilst rendering for it to be more dynamic and interactive.

React Hooks

Hooks were added to React in version 16.8.

Hooks allow function components to have access to state and other React features.

Because of this, class components are generally no longer needed.

Hooks allow us to “hook” into React features such as state and lifecycle methods.

Hook Rules

• Hooks can only be called inside React function components.

• Hooks can only be called at the top level of a component.

• Hooks cannot be conditional.

React Router

React Router is a React standard routing library.

When you need to navigate through a React application with multiple views, you will need a router to manage the URL, React Router does that while keeping your application’s UI and URL in sync.

Add React Router

To add React Router to your application, run this in the terminal from the root directory of the application:

npm i -D react-router-dom

Redux and React Redux

Redux

Redux is one of the most known and used state management libraries.

Redux is used to manage the state of an application to avoid “Prop-drilling”, for instance, when you need to pass the state deep inside the component tree to a child element, you have to pass through every component in between.

By definition, Redux is a predictable state container for Javascript applications.

Principles of Redux

• The state of an application is stored in an object tree within a single store.

• The only way to change the state is to emit an action, describing what happened.

• Changes are made with pure functions.

Redux has three main parts, which are the action, reducer and store.

React-Redux

React Redux is the official Redux user interface(UI) binding library for React.

Benefits of React-Redux library

• React Redux encourages good React architecture.

• React Redux implements performance optimization

• Community support.

Installing React-Redux

• Create a new React application:

npx create-react-app redux-counter

• Install redux

npm i redux

• Install react-redux

npm i react-redux

API(Application Programming Interface)

API is an interface that can be used to develop software that interacts with an existing application.

In practice, an API is a set of functions and procedures that allow you to access and build upon the data and functionality of an existing application.

Methods

The most commonly used HTTP verbs or methods as they are properly called are POST, GET, PUT, PATCH and DELETE.

POST: The POST method is used to send data from the client(browser) to the server.

GET: The GET method is used to fetch data from the API.

PUT: The PUT method is used to completely update requests and modify entries in the database.

PATCH: The PATCH method applies partial modification to a resource.

DELETE: The DELETE method is used to send a request to delete the user.

Conclusion

In this article, we have learned how to create our first React application and some important topics in React.js to make our React application dynamic, responsive and user-friendly. The core part to kick start our Frontend web development journey.

Resources and References

You can check out the resources listed below to learn more about React.

• W3 schools

• Gomycode