Introduction to Web Development using ReactJS

By Joan Wanini Maina.

Well, have you and your friend had a debate about something and you went ahead and ‘googled’ it? Definitely! You were looking at a website, on the internet, while confirming who won the debate. Websites can be used to do A LOT of stuff! There are several types of websites, they include: e-commerce, blog, entertainment, educational, portfolio and so many more. Some of the well-known websites are: Amazon, Google and Airbnb.

Web development is the creation or development or maintenance of a website. This is done by software developers I.e web developers. Software developers use different programming languages such as: Java, Javascript, Python, C among others to create software. As we dive into this, we will use ReactJs for in-depth understanding.

So, what is ReactJs? React JS is a Javascript framework that is used in front-end web development, I.e creation of user interfaces for websites. User interfaces is what is displayed on a screen of a device for users.

You might have wondered why I picked on Javascript as the programming language, and here is why:

Javascript is relatively easy to learn. Javascript is close to the normal English we use. This reduces the amount of time you take to understand the language.

However, React JS is built off a virtual DOM(Document Object Model). DOM is a programming interface for HTML. When using javascript, we write on the actual DOM, using Vanilla javascript, This means that the website is rendered very fast.

To create a react application, we use npx create-react-app name-of-your-app. You need to have installed node.js.

Reactjs uses JSX, Javascript XML. This is a syntax extension of javascript where the tags used to create elements in HTML are placed in javascript files. Reactjs has no HTML files.

const element = <h1>Hello, world</h1>;

Elements are used to create components. Components allow grouping of user interface elements in React. This helps in breaking down code. Components also increase re-usability since an element or a group of elements might be appearing severally on a website. For example, a log in page might be divided into input, title and button components.

There are two main types of components:

• Functional components - This type of component is most common. It makes use of a function to declare a component. Therefore, you might encounter these two formats of functional components. The second format uses a fat arrow function as opposed to the ‘normal’ function.

function Example(props) {
  return <h1>Hello, {props.name}</h1>;}

Const Example = (props) => {
  return <h1>Hello, {props.name}</h1>;}

• Class components - They use class objects. ‘this’ is used to access

class Example extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }}

To render a component, the tags with the following format is used: This tag is added to App.jsx or another component, all depending on where you want to place the component. In this case, the component being added is a child component while the component on which it is added is its parent component.

Parent components can communicate to child components using a special property defined by React called as Props. Props or properties are added to child components as inputs as they are rendered. I.e

<Button text=”log in”/>

The button component take in the text as a property. On the child component, props is an object. Therefore, the best way to access props is by destructuring. Destructuring is used to take out sections of data from an array or objects by placing the keys in curly braces. Example: This example shows accessing the text property.

function Button({text}) {
  return <button>{text}</button>;}

State is a piece of information used within a component. In functional components, hooks are used to declare state. Hooks are functions that let you “hook into” React state and lifecycle features from function components. Here is an example where useState() hook Is used to declare state

const [count, setCount] = useState(0);

Hooks are not used in class components. Therefore, state is declared inside the constructor using this.state in class components.

constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

It can be modified and this is the key difference between props and state. To modify state, always use the setState() method since it calls the render() method and that ensures the UI is updated to have the new state. There are various ways of managing state and Redux is the most commonly used state management tool.

Just like HTML DOM events, React can perform actions based on user events. These events include click, mouseover, DOM change. Events allow users to interact with the user interface.

• On clicking the button, the Login function is called.

<button onClick={Login}>{text}</button>

When one wants to display a text or image in a certain situation, one uses Conditional rendering. It works just like the if else condition. The use of ES6 makes conditional rendering easy. The format used is:

Condition ? What to do if condition is true : What to do if condition is not met

A simple example is when you have posts with comments. If there is no comment, you would like to tell the users and if there is a comment, display the comment.

{comment.length === 0 ? <h1>“No comment available” </h1>: <p>{comment.text}</p>}

These are the basics of Reactjs. I hope this has sparked some interest in you to learn more about web development or Reactjs. You can learn more about Reactjs on: reactjs.org Be sure to practise as you learn, enjoy!