Forem: Jayanth

How to Change the Default Port Number in React

Jayanth — Thu, 16 Nov 2023 18:14:11 +0000

Introduction 🌟
When diving into React development, one of the first things you might want to customize is the default port number. React applications, created using create-react-app, typically run on port 3000. However, there might be scenarios where this port is already in use or you need to align with certain deployment environments. This article will guide you through the process of changing the default port number in React. We'll cover steps for different operating systems, ensuring beginners and seasoned developers alike can follow along easily.

Understanding the Default Setting 🔍
By default, React applications created with create-react-app are configured to run on port 3000. This setting is embedded in the underlying scripts that start the development server. To customize this, we need to modify the start-up configuration.

Changing the Port Number in Windows 🪟
On Windows, you can change the port number using environment variables. Here's how:

Open the project folder in your favorite code editor.
Locate the package.json file in the root directory.
In the scripts section, you will find a line similar to "start": "react-scripts start".
Modify this line to set the PORT environment variable. For example, to change the port to 5000, use:

"scripts": {
  "start": "set PORT=5000 && react-scripts start"
}

Save the package.json file.
Run your project using npm start. Your React application should now be running on http://localhost:5000.

Changing the Port Number in macOS/Linux 🐧🍏
The process is similar on macOS and Linux, with a slight change in the syntax for setting environment variables. Follow these steps:
Open your project in a code editor.
In the package.json file, modify the start script like this:

"scripts": {
  "start": "PORT=5000 react-scripts start"
}

Run npm start in your terminal. The application will launch on the new port, such as http://localhost:5000.

Using Environment Configuration Files 📄
Another approach is to use environment-specific configuration files. create-react-app supports .env files for setting environment variables. Here's how you can use them:
In your project root, create a file named .env.
Add the following line to set the port:

PORT=5000

Save the file and run npm start. Your app will start on the specified port.

Conclusion 🎉
Customizing the port number in a React application is straightforward. Whether you're on Windows, macOS, or Linux, you can easily adjust this setting in your package.json file or by using an .env file. This flexibility allows for seamless integration with various development and deployment environments. Happy coding!

5 ways to create an Object in JavaScript

Jayanth — Wed, 15 Nov 2023 16:46:57 +0000

In JavaScript, objects are versatile tools that can be created in various ways, each suitable for different scenarios. Understanding when to use each method is key to writing efficient and maintainable JavaScript code. Let’s explore five common methods for creating objects in JavaScript, detailing the best use case for each.

1. Object Literals

Object literals are the simplest and fastest way to create objects in JavaScript, using curly braces {}. This method is ideal for creating single, standalone objects that don’t require a blueprint or repeated instantiation.

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2021
};

console.log(car);

Use object literals for quick, straightforward objects where you don’t need methods or prototypes. They are perfect for configuration options, storing data, and encapsulating related properties and methods in a straightforward structure.

2. The new Object() Syntax

Creating an object with the new Object() syntax is a more explicit way of object creation in JavaScript programming. This is similar to object literals but can be more readable for those coming from other programming languages.

const person = new Object();
person.name = 'John';
person.age = 30;
person.isEmployed = true;

console.log(person);

This method is beneficial when you want to explicitly demonstrate object creation or when transitioning from a language that heavily uses class-based or constructor-based object creation. It’s also useful when dynamically adding properties based on conditions.

3. Constructor Functions

Constructor functions are used to create multiple instances of a similar object. They act as a blueprint for creating objects of the same type in JavaScript.

function Smartphone(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}

const myPhone = new Smartphone('Apple', 'iPhone 13', 2021);
console.log(myPhone);

Constructor functions are ideal when you need several objects with similar properties and methods. They are great for creating objects like users, products, or other entities that share a common structure but have different values.

4. The Object.create() Method

Object.create() in JavaScript creates a new object with a specified prototype and properties. This method provides more control over object inheritance than other methods.

const animal = {
  type: 'Animal',
  displayType: function() {
    console.log(this.type);
  }
};

const dog = Object.create(animal);
dog.type = 'Dog';
dog.displayType(); // Output: Dog

This method is useful when you need to create an object that directly inherits from another without calling the parent’s constructor. It’s a powerful tool for complex inheritance structures and can be used for behavior delegation, among other advanced patterns.

5. ES6 Class Syntax

ES6 classes offer a more traditional, class-based way to create objects in JavaScript. It’s syntactical sugar over JavaScript’s prototype-based inheritance but provides a clearer and more familiar syntax for those coming from class-based languages.

class Book {
  constructor(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
  }

  getSummary() {
    return `${this.title} was written by ${this.author} in ${this.year}`;
  }
}

const myBook = new Book('1984', 'George Orwell', 1949);
console.log(myBook.getSummary());

Use ES6 classes for more complex applications where the organization, readability, and inheritance structure of your code are important. They are useful for large-scale applications and when working in a team where clear and standardized coding practices are needed.

Which Method is Best and Fastest?

There’s no one-size-fits-all answer to the best and fastest way to create objects as it largely depends on the specific requirements and context of your application. However, in terms of simplicity and speed, object literals are the fastest and easiest way to create objects, especially for simple, single-use objects. For more complex and structured applications, ES6 classes provide a balance of readability, traditional syntax, and performance, although they may have a slight overhead compared to constructor functions.

Conclusion

Choosing the right method to create objects in JavaScript depends on the context of your application and specific requirements. Whether it’s a simple one-off object or a complex structure requiring inheritance, understanding these five methods enables you to write more effective and maintainable JavaScript code.

Happy Coding!

Integrating GraphQL in React.js: Simplifying Data Fetching

Jayanth — Thu, 09 Nov 2023 18:45:50 +0000

GraphQL has revolutionized the way developers interact with APIs. Unlike REST APIs, GraphQL allows clients to request exactly the data they need, no more, no less. In React.js, integrating GraphQL enhances the component's data-fetching capabilities by making the data retrieval process more efficient and precise. In this blog, we'll walk through the steps to integrate a GraphQL API with a React.js application using Apollo Client.

What is GraphQL?
GraphQL is a query language for your API, and a server-side runtime for executing those queries by parsing your data. It isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

To integrate GraphQL into a React.js application, we will use Apollo Client, a popular, feature-rich GraphQL client that provides a comprehensive approach to data management in modern web applications.

Setting Up Apollo Client
To integrate Apollo Client into your React app, you'll first need to install it:

npm install @apollo/client graphql

Next, you’ll need to set up ApolloClientand the ApolloProvider. This provider component uses React's Context API to make a client instance available throughout the component tree.

For demonstration purposes, we'll use the SpaceX GraphQL API, which is a public API that provides data about SpaceX launches.

Here's how you configure Apollo Client with this real GraphQL endpoint:

With this configuration, your React application is now ready to query the SpaceX API and render the data in your UI. You can use the provided useQuery, useMutation, and useSubscriptionhooks to interact with the API according to your application's needs.

Fetching Data in the Dashboard Component
Within the Dashboard component, you can now make use of Apollo Client's useQueryhook to fetch data from the SpaceX API. The useQueryhook leverages React's Hooks API to fetch and load data from GraphQL queries.

Here's an example of how to use useQuery to retrieve a list of SpaceX launches:

In this code, we are creating a simple UI that maps over the array of past launches returned by the GET_LAUNCHESquery. Each launch is displayed in its own div with details such as mission name, launch date.

Advanced Data Fetching Techniques with Apollo Client
As you become more comfortable with the basics of fetching data using Apollo Client, you'll soon run into scenarios that require more advanced techniques. Let's delve into some of these techniques to enhance your React applications.

Using variables in your GraphQL queries allows you to write dynamic and reusable queries that can adapt based on user interaction or component state changes. Let's walk through an example where users can filter a list of launches by a mission name that they input into a search field.

First, we define our GraphQL query to accept a variable for the mission name:

// Define the GraphQL query with a variable
const GET_LAUNCHES_BY_MISSION_NAME = gql`
  query GetLaunchesByMissionName($missionName: String!) {
    launchesPast(find: { mission_name: $missionName }) {
      mission_name
      launch_date_local
    }
  }
`;

Next, we'll create a React component with a search field where users can type in a mission name. We'll use Apollo Client's useQueryhook to fetch the launches based on the mission nameprovided.

Here's a concise example of how that might look in your React component:

In the LaunchesSearchcomponent, we are maintaining the state for missionNamewhich is updated whenever the input field changes. The useQueryhook then uses this state as a variable for the GraphQL query, which will refetch the data whenever the missionNamechanges. The skip option is used to avoid executing the query before the user has entered a search term.

This pattern is highly effective for creating interactive and responsive interfaces that provide feedback to the user as they search or filter data.

The complete working code example you can found here.
https://codesandbox.io/s/react-js-with-graphql-forked-tcmz2v?file=/src/App.js

Conclusion

We've seen how to integrate a GraphQL API into a React.js application using Apollo Client, from setting up Apollo Client and configuring it to use a real GraphQL endpoint, to fetching data and displaying it with a styled component. GraphQL’s power lies in its ability to allow clients to request exactly what they need, and Apollo Client makes it easy to fetch, cache, and manage that data in a React.js application.

Remember, the SpaceX API used in this example is a real public API, which makes it an excellent resource for practicing GraphQL queries and mutations.

Integrating GraphQL with React.js can significantly improve the performance and user experience of your application by avoiding over-fetching or under-fetching of data. With tools like Apollo Client, it becomes relatively straightforward to manage your data and keep your UI in sync with the state of your data in the backend.

I hope this guide has been helpful to get you started with GraphQL in React.js applications. With the basic setup done, you're now ready to explore more advanced features of Apollo Client such as local state management, error handling, and subscriptions for real-time updates.

Keep coding, and may your queries always return exactly what you expect!