Learn React.JS in 10 Minutes

ReactJS is a popular JavaScript library used extensively for building user interfaces developed by Facebook. It is a JavaScript view-based framework, which uses HTML language. It supports one-way binding which essentially means that it does not have a mechanism to allow HTML to change the components. HTML can only raise events that the components respond to.

In ReactJS, ‘state’ is the interface between back-end data and UI elements in the front end. State helps to keep the data of different components in sync to ensure that each state update will render all relevant components. To simplify, state is the medium to communicate between different components.

In this blog, I will touch upon state management, automatic back-end data refresh (no F5) and retrieving data from API and rendering the same.

Pre-requisite – Please ensure that you have installed Node.js (latest package from https://nodejs.org/en/).

To create your first ReactJs project, we will use the following command in the selected directory. This will create new project under firstreactjsapp directory.

npm init react-app firstreactjsapp

Navigate to the newly created folder, and you will see public and src directories.

To update content, go to App.js file and replace App with following code:

function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1>First ReactJS Application</h1> </header> </div> ); }

Run ReactJS application using following command and you will see below output. (prefer Chrome browser)

npm start

Interacting with API. We will use Axios, is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js.

npm i axios

Accessing API ( lets get some available online api’s from (https://jsonplaceholder.typicode.com).

Creating ToDo list grid.

Copy following code and past it in the App.js:

import React from 'react';
 import axios from 'axios'; // Reference axios for accessing API’s
 export default class PersonList extends React.Component {
 state = {
 todos: [],
 onetime:true
 }
 fetchNews(me)
 {
 if (me.state.onetime) // load data onetime
 {
 axios.get('https://jsonplaceholder.typicode.com/todos') // retreiving from backend
 .then(res => {
 var todos = []
 todos = res.data.slice(0,10); // lets fetch only 10 records
 // lets randomly update the status of first record using backgroudn thread without refershing the page or pressing F5.
 todos[0].completed = todos[0].completed==="true" ? "false" : "true";
 me.setState({ todos });
 var onetime = false;
 me.setState({ onetime }); // changing state.
 })
 }
 else
 {
 var todos = []
 todos = me.state.todos;
 todos[0].completed = todos[0].completed==="true" ? "false" : "true";
 me.setState({todos });
 }
 }
 componentWillMount() {
 if (this.state.onetime)
 {
 this.fetchNews(this);
 }
 this.interval = setInterval(this.fetchNews, 500,this); // refresh
 }
 render() { // rendering
 return (
 <ul>
 <table border="1">
 <tr><td>Id</td><td>UserID</td><td>Title</td><td>Status</td></tr>
 { this.state.todos.map(todo =>
 <tr>
 <td> <a href="/">{todo.id}</a></td>
 <td> {todo.userId}</td>
 <td> {todo.title}</td>
 <td> {todo.completed}</td>
 </tr>
 )
 }
 </table>
 </ul>
 )
 }
 }

Run React application using the following command and you will see the below output. (prefer Chrome browser)

npm start

Did you find this blog useful? Send your comments to info@trigent.com.