Reactjs

Hello and Welcome to this tutorial on Reactjs . Here , we are going to learn Reactjs and also create a simple application .


Table of Contents

• Getting Started
• Components
• JSX
• props
• state

1. Getting Started

Finish up all the required software installation (nodejs , vscode..) and start with creating a simple application using the following command .

npx create-react-app your-app-name

start your app using the following command

npm start

2. Components

Components are basic building blocks of a React application . Let's create one .
Create a new  file , here is an example of a sample component . 

import React from 'react';

import './App.css';

function App() {

  return (

    <div  >

       Hello World !

    </div>

  );

}

export default App;

2.1  render()

returns the HTML part of the component .

3. JSX

JSX stands for Javascript XML . You would have notice that in the render function we return an HTML element , that's actually a JSX . A JSX should be a valid XML .It is translated to Javascript at runtime .You can use an expression {} in JSX .

4. props

We can access the data passed to a component using props .

5. state

A state can have multiple properties which will be used within an application . If any state property is changed the component is re rendered .

  6.LifeCycle : Mounting 

• Constructor
• static getDerivedStateFromProps
• render
• componentDidMount

Error: Objects are not valid as a React child

Error Blog 

This blog is about the error Error: Objects are not valid as a React child 

Problem Statement

error on start of reactjs application

Error Details 

error Log

ERROR DETAILS 

Error: Objects are not valid as a React child (found: object with keys {TASK_ID, TASK_DESC, TASK_REF, TASK_STATUS, UPDATED_ON}). If you meant to render a collection of children, use an array instead. in div (at task-list.js:22) in TaskList (at App.js:10) in div (at App.js:9) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

Error Code 

You will face this error if you try to convert an array response to json .

router.get('/', function (req, res) { Task.getAllTask(function (err, task) { console.log('controller') if (err) res.send(err); console.log('res', task); res.send( task); }); });

Solution

change the code so that the array is handled .

Code Changes 

wrap the array inside a json .

  

        

    

router.get('/', function (req, res) { Task.getAllTask(function (err, task) { console.log('controller') if (err) res.send(err); console.log('res', task); res.send({'resp':task}); }); });

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

TypeError: Class extends value undefined is not a constructor or null

Error Blog 

This blog is about the error TypeError: Class extends value undefined is not a constructor or null

Problem Statement

unable to start reactjs application

Error Details 

error Log

ERROR DETAILS 

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module../src/task/task-list.js (task-list.js:5)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/App.js (App.css?4433:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?f3f6:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (task.js:11)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Error Code 

You will face this error if you have improper syntax in extends React.Component.

import React from 'react';

class TaskList extends React.Component() {

  constructor() {

    super();

    this.state = {

      name: 'React',assetName:"asset name"

    };

  }

 

  render() {

     return (

    <div  >

       Task List

    </div>

  );

  }

}

export default TaskList;

Solution

change the code so that the syntax is proper for extends  . .

Code Changes 

add the following import in your component.ts file .

  

        

     class TaskList extends React.Component  {

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

JSX expressions must have one parent element.

Hi Guys ,


This blog is about the error " JSX expressions must have one parent element.

Let's look at the erroneous code .

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>;

You can see there are two elements <h1> and <input> .
The error is because react does not allow multiple component as a parent component . To fix this issue we can put the two elements under single parent component , like a <div> .

Let's fix the code .

import React from 'react';

export default ({ name }) => <div><h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>  </div>;

The error is gone . Hope this helps , Thanks !

Checkout this error in youtube .

Let me know if you still face error in the comments below .

Target container is not a DOM element.

Hi Guys ,


This blog is about the error " Target container is not a DOM element. " 



 The full error in the console log is as follows :

Invariant Violation: Target container is not a DOM element.
    at invariant (https://react-gartc9.stackblitz.io/turbo_modules/react-dom@16.8.0/cjs/react-dom.development.js:55:15)
    at Object.render (https://react-gartc9.stackblitz.io/turbo_modules/react-dom@16.8.0/cjs/react-dom.development.js:20611:36)
    at Object.eval (https://react-gartc9.stackblitz.io/~/index.js:43:13)
    at eval (https://react-gartc9.stackblitz.io/~/index.js:45:4)
    at eval (https://react-gartc9.stackblitz.io/~/index.js:46:3)
    at eval (<anonymous>)

Lets see the erroneous code .

HTML code

<div id="root"></div>

and javascript :

render(<App />, document.getElementById('app'));

To fix this update the render function and specify the id of the HTML element . The working code is as follows :

render(<App />, document.getElementById('root'));

Hops this helps .
Thanks !