Today in this article we shall see how to use the Sonar Lint IDE extension for VSCode and manage Code Quality of Angular, React, and Vue applications with Sonar Qube.

Most of us understand the importance of code quality.

Good coding practices are language agnostic and help an organization deliver clean, highly reliable, secure, and maintainable code.

Today in this article, we shall cover the below aspects,

Software code quality and its maintenance is like a big fat elephant and often eat away a big chunk of project budget allocation. Re-engineering and refactoring of buggy code cost organization time, cost, and quality.

These small-looking coding issues become bigger problems in the future and potentially affect the complete architecture and design of your application.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand”  -Martin Fowler

“Code is maintained more often than it is written”

SonarLint is an IDE extension that helps to detect and fix code quality issues as you type the code in IDE.

SonarLint extension combines all the best of the linting process and supports multiple analyzers and multiple languages.

• Typescript – Sonar TS analyzer

• JavaScript, React, Vue – SonarJS, ESLint analyzer

SonarLint IDE extension is currently supported by the below IDE overall,

Sonar defines coding issues in the below categories,

• Bug
• Code Smell
• Vulnerability

Each above categories can be further classified based on severity as below,

• Blocker
• Critical
• Major
• Minor
• Info

Let’s look into SonarLint VS Code plugin extension setup and configuration details.

Getting started – Code Quality of Angular, React, and Vue applications with Sonar

Prerequisites and Configuration:

Java Run time (JRE) 8

Once Java run time is installed, please verify using the version using the below command,

Further verification can be done by checking the below folder on your Windows machine,

Install Sonar Lint extension in VSCode

Setting.json update

Click on Settings ->Edit in Settings.Json

User Settings Sonar Qube – connected mode

These settings will be global and will be applied at the VSCode IDE level and will be effective for all projects.

{
"sonarlint.ls.javaHome": "C:\Program Files\Java\jdk1.8.0_201"
}

If connecting your Organization enterprise Sonar Server please add the below setting within “sonarlint.connectedMode.servers”

Note:

SonarLint uses the same rule set as configured on the SonarQube server thereby streamlining the code analysis and avoiding any ambiguity of issues reported on server vs desktop.

If not connected to the Sonar Server default ruleset ( which comes with plugin installation) will be used.

Connected Mode in User Settings

"sonarlint.connectedMode.servers": [
 {
"serverId": "your server id if any",
"serverUrl": "https://your-org/server",//Your Organization server URL
"organizationKey": "my_organization",// Organization Key
"token": "V2VkIE1…" //Organization Auth token
 }
]

Workspace settings Sonar – connected mode

This setting will be specific to an individual project. This setting can be checked in along with your source project to SCM.

{
"sonarlint.ls.javaHome": "C:\Program Files\Java\jre1.8.0_201"
}

Connected Mode in Workspace Settings

If connecting to your organization’s Sonar Server additionally add below within workspace settings.

"sonarlint.connectedMode.project": {
  "serverId": "your server id if any",
  "projectKey": "your project name in sonar server"
}

Once done with the above settings, you shall be all set to use Sonar linting. The output windows will display that SonarTS Server and the engine have started successfully.

If not connected to the server, Sonar Lint will launch the Sonar server( with different analyzers) locally by opening a local port and will use the default rule set in such a case.

If using Sonar Server in “Connected” mode kindly run the below command from the Command pallet,

Update SonarLint binding to SonarQube/SonarCloud 

As you type your code you shall be able to see the best recommendation from Sonar lint based on configured rules.

As we mentioned above Sonar lint uses the same rules set as configured on the SonarQube server and streamlines the code analysis by avoiding any ambiguity of reports on server vs desktop.

For server-side reporting SonarQube need to be used which is a licensed and enterprise version.

Sonar scan can be configured as part build and deploy process for the CI-CD pipeline.

SonarQube provides the overall health of the portfolio within the organization with nice dashboards detailing code health.

Happy coding !!

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

References:

• Continuous Code Quality using NDepend

• Code Quality of .NET Application using Sonar

Summary :

Today we learned about Sonar lint setup and configuration for Visual Studio Code IDE. Good coding practices are language agnostics and help the organization to deliver clean, highly reliable, secure, and maintainable projects. Buggy code slipping through the cracks has the potential to cost a company an entire business. Organizations can address these problems by following best practices of software development like continuous code quality and continuous code review processes.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published (2025) best practices and guidelines for software design and development.

The post Sonar Qube – Code Quality of Angular, React, and Vue applications first appeared on TheCodeBuzz.

Today in this article we shall learn how to perform component interactions in React UI framework application. You may find a need to Pass Data From One Component to another Component including React – Pass Data From One Component to Other Component with Child to Parent Component from parent to child communication

We shall cover below basic aspects in today’s article,

Before we get started I am assuming you already have a basic understanding of React applications.

If not, kindly go through a series of articles on React,

• Getting started with React

• Understanding Component with State and Props

Getting Started

Let’s get started step by step from basics to advanced topics.

What is Props System

Props are actually a short form of Properties. It’s a mechanism of passing the data from Parent components to child components. Using Props data must flow uni-directionally.

Using Props data must flow uni-directionally i.e Parent to Child only

This data transfer happens in two stages. In the first stage, we provide information from the parent to the child components.

So let’s first focus on how we provide information from the parent to the child and then in the second stage we will see how the Child Component consumes or makes use of that information.

I shall be using very basic two components defined as below,

• Parent Component – UserComponent
• Child Component – MovieComponent

Create Parent Component – UserComponent

Let’s create a simple Parent Component – UserComponent as below,

class UserComponent extends React.Component {

  render() {
    return (
      <div className="content">
        Hi There, UserComponent
      </div>
    );
  }
}

export default UserComponent;

Create Child Component – MovieComponent

Similarly, Let’s create a simple Child Component – MovieComponent as below,

class MovieComponent extends React.Component {
  render() {

    return (
      <div className="content">
        Hi There, MovieComponent
      </div>
    );
  }
}

export default MovieComponent;

Now, these components are currently independent and there is no parent-child relationship so far,

Below is index.json referencing them individually,

ReactDOM.render(
  <React.StrictMode>

    <UserComponent/>
    <MovieComponent/>

  </React.StrictMode>,
  document.getElementById('root')
);

Once you launch the app, you shall see both components execute and produce the below result,

So far so good !!

Let’s now define the relationship which Parent to Child relationship!

Naming Pattern for Props

Before doing that let’s understand the naming convention and patterns that needs to be used while using props in the component.

Lets’ see a few examples,

Example,

<ChildComponent  userName ="TheCodeBuzz"/>

<MovieComponent movieName ="Animators"/>

React Parent to Child Component using Props

Let’s update the above-discussed component for Parent to Child communication. Our goal here would be to transfer data from Parent Component UserComponent to the Child component i.e MovieComponent

Update code on Parent as below,

class UserComponent extends React.Component {

  render() {
    return (
      <div className="content">

        <div> Hi There, UserComponent</div>

        <MovieComponent movie="Animators" />

      </div>
    );
  }
}

export default UserComponent;

So what we did above as below,

• Above we have defined our Props name as movie to pass the data to the child component.

• UserComponent should be able to pass the movie object which has a value of “Animators” defined using the expression MovieComponent movie=”Animators”

Similarly, we shall be retrieving the same Props i.e movie in the Child component as below,

class MovieComponent extends React.Component {
  render() {

    return (
      <div className="content">
        <div>Hi There, MovieComponent</div>

        Movie selected by User: {this.props.movie}

      </div>
    );
  }
}

export default MovieComponent;

So what we did above as below,

• Child consumes or makes use of Parent information using Props

• Retrieves the same Props i.e movie in the Child component

Once executed, the app shall below result on the UI,

That’s All!

I have discussed Child to Parent communication in the below article,

References

• React- Child to Parent communication

I shall be covering Redux Architecture and its usage in my next article! Until then stay tuned!

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

Summary

Today in this article we understood how Component interacts in React programming. We understood the prop system and understood the naming pattern and used it for passing data from Parent to Child.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published (2025) best practices and guidelines for software design and development.

The post React – Pass Data From One Component to Other Component first appeared on TheCodeBuzz.

Today in this article we shall learn how to perform component interactions in the react application where we shall see React – Child To Parent Component communication and passing data from the Parent component to the Child Component.

In our last article on Passing Data From Parent to Child Component, we already learned how to pass data using the Props system from a Parent Component to Child Component easily.

We shall cover below basic aspects in today’s article,

Before we get started, I am assuming you already have a basic understanding of React applications.

If not, kindly go through a series of articles on React,

• Passing data from Parent to Child Componentusing Props

• Understanding Component with State and Props -React Best Practices

Getting Started

Let’s get started step by step to perform data transfer from the Child to the Parent component

So initially we shall be focussing on how we provide information from the Child to the Parent.

Then In the second stage, we shall see how to consume data from the Parent components.

I shall be using very basic two components defined as below

• Parent Component – LoginUserComponent
• Child Component – SelectMovieComponent

Create Parent Component – LoginUserComponent

Let’s create a simple Parent Component – UserComponent as below,

class LoginUserComponent extends React.Component {
  onSearchSubmit(movie) {
    console.log('Input received in Parent Component');
    console.log(movie);
  }
  render() {
    return (
      <div className="ui container">
        <SelectMovieComponent onSubmit= { this.onSearchSubmit } />
      </div>
    );
  }
}
export default LoginUserComponent;

Above we have used the SelectMovieComponent using a naming pattern as we discussed in our last article on Props system,

React Create Child Component – SelectMovieComponent

Similarly, Let’s create a simple Child Component – SelectMovieComponent as below,

class SelectMovieComponent extends React.Component {

  state = { movieSelected: '' };

  onMoveSelected = (event) => {
    event.preventDefault();
    this.props.onSubmit(this.state.movieSelected);
    console.log(this.state.movieSelected);
  }
  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onMoveSelected} className="ui form">
          <div className="field">
            <label>Movie Search</label>
            <input
              type="text"
              onChange={e => this.setState({ movieSelected: e.target.value })}
              value={this.state.movieSelected}
            />
            <div>
              Movie selected by User: {this.state.movieSelected}
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default SelectMovieComponent;

Above in Child Component – SelectMovieComponent we performed the following,

• Create a Class-Based component SelectMovieComponent
• Create a State object movieSelected
• Update State object movieSelected in the OnChange event with the current value
• Submit the Form by calling onMovieSelected
• Update the props with the same name as indicated in the Parent i.e using this.props.onSubmit(this.state.movieSelected);

Once you launch the app, you shall see both the components execute and produces the below result on the UI,

Above we console printed the result from the Child into the Parent component.

Let’s now enhance and use the data in Parent as a state object.

Update Parent State object with Child data

Please update the Parent code to receive Child data into the state object of the Parent component as below,

class LoginUserComponent extends React.Component {

  state = { movieReceived: '' };

  onSearchSubmit(movie) {
    console.log('Input received in Parent Component');
    console.log(movie);
    this.setState({movieReceived:movie})
  }
  render() {
    return (
      <div className="ui segment">
        <div className="ui container">
          <SelectMovieComponent onSubmit={this.onSearchSubmit.bind(this)} />
        </div>
        <div>
          Movie received by User(parent): {this.state.movieReceived}
        </div>
      </div>
    );
  }
}

Kindly note call-back method is updated with the bind(this) object.

Once you execute you shall see the result in the browser as below,

That’s All!

What is Redux and what use cases around its usage?

Once we go beyond and master component communication, you might need to think of proper state management in your application (especially if dealing with large enterprise applications).

I shall be covering Redux usage and when to use it and when not in my next article! Until then please stay tuned!

References:

• React Passing Data From Parent to Child Component

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

Summary

Today in this article we understood further Component communication where we performed Child to Parent communication in React programming. We understood the props system and understood the naming pattern and also used the State object and callback event for passing data from Child to Parent easily.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published (2025) best practices and guidelines for software design and development.

The post React – Child To Parent Component Communication first appeared on TheCodeBuzz.

In this article, we shall see how to write React – POST request with easy to understand examples.

Below are the high-level steps which can be performed to be able to use Http services in React application,

• Create a React Component – Function-based and Class-based
• Fetch POST API using State
• Fetch POST API using StateHooks
• Performing POST operation

Before we get started I am assuming you already have a basic understanding of React application.

If not, kindly go through a series of articles on React,

• Getting started with React
• Understanding Component with State and Props
• React -Fetch HTTP GET example

We shall see both approaches like using Function-based Component and Class-based component

Getting Started

Lets create your new React.js Application.

As we saw in our last article Getting started with React , we used a function-based component where we rendered the UI with ‘Hello World’.

Here is below example of class based Component,

Fetch POST example – Using State Object

Let’s add new CustomHttpRequestPost as below. CustomHttpRequestPostHooks is a class-based component and works with Sate objects easily.

import React from 'react';
import logo from './logo.svg';
import './App.css';

class CustomHttpRequestPost extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      date: new Date(),
      name: null,
      id: null,
    }
  }

  render() {
    const { name } = this.state;
    const { id } = this.state;
    return (
      <div className="App">/
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Hello, TheCodeBuzz Community }
          </p>
          <div className="card-body">
            <p>Name: {name}</p>
            <p>Id: {id} </p>
          </div>
        </header>
      </div>
    );
  }
}

export default CustomHttpRequestPost;

In the above example, we shall be updating the State objects like name and id using HTTP GET API response.

We shall be using componentDidMount to call fetch API and we shall re-render the UI with latest values.

Lets define FETCH for POST in componentDidMount a life cycle method,

componentDidMount() {

      fetch('https://localhost:5001/api/values', {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: '123', name : 'qweq' }) 
        // body data type must match "Content-Type" header
      })
      .then(response => response.json())
      .then(data => this.setState({ name: data.name, id: data.id }))
  }

componentDidMount will get called immediately after component is mounted.

Fetch Post example – Using Hooks

Let’s add new CustomHttpRequestPostHooks component. CustomHttpRequestPostHooks is function based component and works with Hooks.

function CustomHttpRequestPostUsingHooks(){

  const [name, setData] = useState(null);
  const [id, setId] = useState(null);

  useEffect(() => {

    fetch('https://localhost:5001/api/values', {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
          'Content-Type': 'application/json'
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: JSON.stringify({ id: '123', name : 'qweq' }) // body data type must match "Content-Type" header
      })
      .then(response => response.json())
      .then(data => 
        {
          setData(data.name);
          setId(data.id)
        })
  },[]);
  
    return (
      <div className="App">/
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Hello, TheCodeBuzz Community ! 
          </p>
          <div className="card-body">
            <p>Name: {name}</p>
            <p>Id: {id} </p>
          </div>
        </header>
      </div>
    );
  
}

export default CustomHttpRequestPostUsingHooks;

Above we are making use of useEffect method for putting the Fetch method call as example.

Service POST API returning JSON

Let assume you are getting below HTTP JSON response from Server(Node.js or ASP.NET Core or Spring )

Sample JSON,

{
    "id": "d95c1c74-f1c7-480d-8ea1-621327197980",
    "name": "TheCodeBuzz"
}

componentDidMount will get called immediately after component is mounted.

Data will be mapped to Fetch result as define in the State or Hooks,

Connecting API/Service endpoint

You are now ready to connect to any REST API endpoint.

I already have below API endpoint which we shall be returning as Employee model (which we have defined as Observable above in getEmployees())

I am using the ASP.NET Core service below. However, as we know REST APIs are language agnostic, you can use Spring, Node.js, Java or Python-based services, etc.

We are connecting to below Service method defined,

  
        [HttpPost]
        public ActionResult<Employee> Post([FromBody] Employee value)
        {
            //Add Employee to Database
            listDBEmployee.Add(value);
            value.Id = "Post:"+ Guid.NewGuid().ToString();
            value.Name = "TheCodebuzz";

            return Ok(value);
        }

CORS on Server-side

Please note your Server should allow CORS request from your React UI domain.

Please visit for more details: How to Enable CORS in ASP.NET Core REST API

Once the CORS is enabled on your server-side, you shall see the post method hits your API and gives you required response.

Finally , you could see the result in the browser,

I shall be covering more PUT and Delete methods in my next article.

Kindly stay tuned!!

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

Summary

Today in this article we learned how to write simple React– Fetch POST method using State and Hooks using easy to understand examples.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published (2025) best practices and guidelines for software design and development.

The post React – Using Fetch HTTP POST Request Examples first appeared on TheCodeBuzz.

Today in this article we shall learn React Components Lifecycle with State and Props and we shall see easy-to-follow Best Practices.

Before we jump on to the main topics, I shall talk about the Class-based component, its usage, and its benefits.

In React Programming creating class-based components provides a lot of benefits and it is a preferred way of creating and initializing the components.

A few benefits of using class base components are listed below,

• Easy code Maintainance
• Easy to handle input and events
• Easy life cycle event management
• Easy data initialization
• Allows to use of ‘State’ (usable in Class-based component)
• Easy way to manage asynchronous API

Class-Based Components should be created using Javascript classes. Javascript classes were introduced in 2015 following ECMA standards

Getting started

As we saw in our last article Getting started with React, we used a function-based component where we rendered the UI with ‘Hello World’.

Here is an example of a function based Component,

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

export default App;

Thing to consider while creating a class-based Component,

• The class should be extended from React.Component class
• Every class created should define a render method that returns JSX. One can use a constructor or super method additionally to initialize the data.

We shall now use Class based component and simply replace that as below,

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Hello, World!
        </p>
        </header>
      </div>
    );
  }
}

The above code can easily be migrated to the class-based component as below,

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Hello, World!
        </p>
        </header>
      </div>
    );
  }
}

Below are high-level changes from Function-based to Class-based Component

So overall, we have followed the below steps to create a class-based component,

• Create an ES6 class App, extending React.Component.
• We must add the render() method as reacting expects it.
• We moved the body of the function into the render() method.

State in React Component

Let’s start using the state in our React component.

Using State with function-based React component is tricky. However, The State works very nicely with a class-based React component.

What is State:

State is a Javascript object which can hold the data for the given Component.

We shall initialize the state in the React component as below.

The state can be declared using the below conventions.

This assignment to state can only be done in the Constructor i.e just once when components get created

You must never assign a State object directly. You must use the SetState() function to assign or update the State object anytime.

Lifecycle methods in React Component

Let’s now understand the overall life cycle methods that get invoked in the React component.

We shall be updating the above code for state objects and trying to understand the life cycle methods,

class App extends React.Component {

  constructor(props){
    super(props)
    this.state = { date:new Date()}
 }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Hello, World!  Current Time : { this.state.date.toLocaleDateString() }
        </p>
        </header>
      </div>
    );
  }
}

In the above code below is the sequence of methods that get called,

If you have any useful Life Cycle methods like componentDidmount or componentDidUpdate or componentWillunMount then such methods will get executed too right after render and just before UI is displayed.

As shown above in the diagram, please see a brief description of each stage

Constructor

Constructors get called first when the Component life cycle starts.

It is the best place to initialize the data.

Render

Right after the Constructor Render method gets called.

Its sole responsibility is to return JSX only.

Please note that Render should not do anything apart from rendering the JSX. Please do not write any business logic or fetch any details or update state in Render method

componentDidmount

componentDidmount method gets called once for the given components. componentDidmount method is a good location to do initial data loading.

It’s recommended to use componentDidmount for initial data loading. You may use it to call Example: Fetch GET methods or for calling a custom function with business logic.

componentDidUpdate

componentDidUpdate is a good location to do data loading when a data update happens on the component. Please make sure to use conditional updates to the selected resources (to avoid any recursive calls).

componentWillunMount

Use componentWillunMount for performing clean-up activities.

If using any external libraries like vendor components etc. in your application, it’s your responsibility to unload/unmount it after its usage.

Best Practices for State in React components

Lets now learn a few Best Practices for the state in React components.

Do not modify the State object directly

The example below state object date is modified using the direct assignment as below which is wrong.

Always use SetState to modify the State object

You must use setState to modify, update modify the State objects.

In the example below date, State object is modified to use a new Date object using setState function.

Asynchronous State update by React

Considering performance React may update multiple setState calls into a single update.

Do not directly rely on this state object as the code may fail to get the latest state objects when accessed asynchronously.

Instead, use setState() accepting a function as shown below rather than using actual objects.

Each State object is managed independently

Each State object is independent of the other but when called with the setState React merges those objects to the current state.

In the below example State objects like date, amount, and accounts can be independently updated and retrieved as required.

State objects data is owned by the Component only

State objects are owned by a component only and can never be treated as State objects outside of that component. However one can send State objects to other child components as props. Such data flow if needed can should be uni-directional i.e should always flow from the origin to its child component.

Understanding Props Systems and Component Communication

Please refer below article for more details on the Props system,

• Understanding React Component Communication and Props system

Other references:

• Getting Started with React

Summary

In React Programming class-based components provide a lot of benefits and it is a preferred way of creating and initializing the components. Today in this article we learned how to create a class-based component and then we understood how to leverage State and Props in React components and also learned a few best practices for managing them in the application.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published (2025) best practices and guidelines for software design and development.

The post React Components Lifecycle with State and Props – Best Practices first appeared on TheCodeBuzz.