React JS

What is react and Implementation

react

Jordane Walke, a Facebook software engineer, first released React.js in 2011. React is a JavaScript library that uses a component-based approach to create declarative user interfaces (UIs). It manages the view layer and can be used in both web and mobile apps. The main goal of React is to be comprehensive, quick, declarative, flexible, and simple.

React is not a framework; rather, it is a library. The reason for this is that React is only concerned with rendering user interfaces and leaves a lot to the discretion of individual projects. The stack is a term used to describe the standard set of tools for building ReactJS applications.

Why use React? (features)

Let’s take a closer look at what distinguishes React from other frameworks and libraries, and what makes it so powerful and popular for application development.

JSX

JSX is a JavaScript syntax extension used by React. We use it to create ‘elements’.

const element = <>My React element using JSX</>

Babel preprocessors are used by JSX to convert HTML-like text in JavaScript files into parsable JavaScript objects. Although React does not require the use of JSX, most developers find that it makes the JavaScript code more user-friendly. Because we use JSX to create React components, it is an essential component of ReactJS.

Components

Components

Main Component

ReactJS is a component-based library that allows us to reuse code and break up our user interface into smaller chunks. There are two types of components: Class components and Function components. All React components adhere to the separation of concerns design principle, which states that we should divide our app into sections to address different concerns.

Function components

import React from 'react'
function Test(props) {
 return (
   <div>Function Components</div>
 )
}
export default Test

or

import React from 'react'
const Test = (props)=> {   //arrow function
return (
   <div>Function Components</div>
 )
}
export default Test

JavaScript functions are similar to React components. A component must always return a React element that defines what is intended to be displayed to the user and takes random inputs, which we call props.

Get Pramud Nadula’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Defining a JavaScript function that returns a React element is a simple way to specify a React component. If the React component does not return a React element, an error will be thrown.

Class components

The extends ‘React.Component’ statement must be present in the Class component. This statement creates a subclass of ‘React.Component’ that allows your component to use ‘React.Component’ functions.

The component must also have a method called render() that returns HTML.

import React, { Component } from 'react'
export default class Test extends Component {
  render() {
    return (
      <div>Class Components</div>
    )
  }
}

I started developing react components with class components as well, but I eventually switched to functional components because they are much easier to understand than class components.

Rendering Components

index.js

We can also render user-defined components in React. To render a component in React, we must either initialize an element with a user-defined component and pass this element as the first parameter to ReactDOM.render() or pass the component as the first argument to ReactDOM.render().

How to Build a Basic React App

It’s very easy to make a simple react app. We only need to give one command, and we’ll have a simple react application in no time. It includes everything you need, including an inbuilt server, Webpack, Babel, ESLint, and testing configuration.

First Command is,

npm is a tool that use to install packages and, npx that used to execute packages

npx create-react-app application-name

Your react application will be created with the name you have given after the creation.

Now we must use the command to navigate to that project folder.

cd application name

After you can start the project using npm start

http://localhost:3000/

I hope you found this useful. I would like to hear from you so feel free to drop a comment or connect with me via LinkedIn or Portfolio.