Introduction to React JS

React JS is a free and open source frontend JavaScript library developed by Facebook (Meta) which was first released in 2013 , with a version number of 0.3.0. React is used for the development of single-page applications also it requires additional libraries as it is only concerned with state management and rendering state to DOM (Document Object Model).

JSX(JavaScript Syntax Extension) is used in React , which is an extension of the Java Script language syntax and also holding a similar appearance to HTML. Below is an example for such a code ;

import React from “react”;

const Hello = () => {

return (

<div className=”hello_world”>

<h1> Hello, world! </h1>

</div>

);

};

export default Hello;

Despite being famous among developers , React has it’s own pros and cons

Pros

Easy to Learn and Use

Creating Dynamic Web Applications Becomes Easier

Reusable Components

Rich JS library

Scope for testing the codes

Cons

High pace of development > React JS changes so fast that developers have to regularly update their knowledge.

Some developers finding JSX difficult to grasp.

Proper documentation cannot keep up due to the high development pace.

React Components

React code is made of entities called ‘components’. These should be stored in the SRC folder following the Pascal Case as naming convention. Components are used as to make our code reusable. For an example , we can have a form component , so that the same form is used throughout our web application where required without coding the same again.

function FormInput(props) {
const [inputType] = useState(props.type)
const [inputValue, setInputValue] = useState('')
function handleChange(event){
setInputValue(event.target.value);
if(props.onChange) props.onChange(inputValue)
}
return (
<>
<input type={inputType} value={inputValue} name="input-form" onChange={handleChange} class="inputclass"/>
</>
);
}
export default TextInput;

Above is a reusable single input form , in which props and useState are used , which we will be talking about.

React has two types of components ; Class components and Functional components , functional component is the latest addition of react and the most convenient to use.

Functional Components

Functional component consist of a JS function which return a React element.

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

Here we can import this component in any other by exporting as such.

Functional components should always start with a capital letter , also we can use props where necessary.

Functional components are considered to be convenient because of ‘Hooks’ too. Hooks came into play in React 16.8 , which made developers start to use functional components more than the then prominent class component. useState , useEffect , useRef , useReducer are some hooks available in React.

The useState hook is used to update the state of a variable throughout the code

import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("blue");
}

We have initialized the color variable to blue here . setColor is the function that is used to update our state.

The useEffect hook allows you to perform side effects in your components , some examples of side effects are : fetching data , directly updating the DOM and timers. We can pass a dependency for this to define when the code inside of it should run.

useEffect(() => {

As mention above , class components have been prominent before the version 16.8 , as the functional components were considered ‘state-less’.

Below is a simple example for a class component with a state.

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}

Props in React

Props are like function arguments , we can send them into the component as attributes.

Below is a basic example of props. I almost all cases we have to import the component first.

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

function App() {

return (

<div>

<Welcome name=”Sara” />

<Welcome name=”Cahal” />

<Welcome name=”Edite” />

</div>

);

}

In this blog we have discussed some basic features in React JS , hope this will inspire you to learn more!