DEV Community: MianFaizanAmir0053

Exploring React: Understanding Props and State in Web Development

MianFaizanAmir0053 — Sun, 26 Mar 2023 18:48:12 +0000

React.js is a popular JavaScript library that is essential for front-end developers to learn. A key aspect of React is understanding the concepts of props and state and their distinctions.

This article will provide a comprehensive explanation of props and state, as well as answering some common questions related to them. Readers will gain an understanding of what props are, how to pass data with props, what state is, how to update a component’s state, what occurs when state changes, and whether state can be utilized in every component. Additionally, the article will outline the differences between props and state.

What are props?

Props is short for properties and they are used to pass data between React components. React’s data flow between components is uni-directional (from parent to child only).

How do you pass data with props?

Here is an example of how data can be passed by using props:

function ParentComponent() {
  return (
    <ChildComponent name="First Child" />
  );
}

const ChildComponent = (props) => {
  return <p>{props.name}</p>;
};

Firstly, we need to define/get some data from the parent component and assign it to a child component’s “prop” attribute.

<ChildComponent name="First Child" />

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re giving an argument to a function:

const ChildComponent = (props) => {
// statements
}

And finally, we use dot notation to access the prop data and render it:

return <p>{props.name}</p>;

What is State?

React provides a special object called state, which enables components to internally create and manage their own data, unlike props that components cannot pass data with. To clarify, components can’t share state data directly with other components, but they can manage it themselves. An example of using state is shown below.

import { useState } from 'react';
function Test() {
const [state, setState] = useState({
id: 1,
name: "test"
});
return (
<div>
<p>{state.id}</p>
<p>{state.name}</p>
</div>
);
}

How do you update a component’s state?

In functional components, you can use the useState hook to create a state variable and its corresponding updater function. You can then use the updater function to modify the state.

import React, { useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

In this example, we use the useState hook to create a state variable called count with an initial value of 0, and its corresponding updater function called setCount.

Inside the handleClick function, we use setCount to update the count state by adding 1 to the current count value.

When the user clicks the “Increment” button, the handleClick function is called, which updates the component's state using setCount(). React then re-renders the component with the new state data, causing the count value to update on the screen.

What Happens When State Changes?

When the state of a React component changes due to user-input or other events, React is immediately notified and re-renders only the component with the updated state. This results in a fast and efficient update to the DOM.

Why Use setState()?

Using the setState function in React ensures that state changes are properly applied, React is aware of state changes, and concerns are separated. Directly manipulating state can lead to unexpected behavior, issues with performance, and hard-to-debug issues.

Can We Use State in Every Component?

Previously, state could only be used in class components. Still, with the introduction of React Hooks, state can now be used in both class and functional components.

Differences Between Props and State

It’s crucial to understand the main differences between props and state to use them effectively in your React components.

Props:

Components receive data from outside with props.
Props are read-only and cannot be modified by the receiving component.
The unidirectional flow of props allows them to be passed only from parent to child.

State:

Components can create and manage their own data with state.
State data can be modified by its own component, but is private and cannot be accessed from outside the component.
Modifying state should happen with the setState() method.
In conclusion, React is a powerful JavaScript library that every front-end developer should be familiar with. Understanding the concepts of props and state is crucial for building efficient and effective React applications.

The Demise of Create React App: Exploring Alternatives for Scalable Applications

MianFaizanAmir0053 — Fri, 24 Mar 2023 01:00:31 +0000

What is CRA?

Create React App (CRA) is a popular tool used to create React applications. It is an excellent choice for beginners and those who want to create a simple application quickly. However, as the project grows, there are some limitations to CRA that developers may encounter. In this blog post, we will discuss those limitations and the solutions provided by other frameworks such as Next.js and Remix.

What are Frameworks?

Frameworks are collections of tools that make it easier to build an application. They help with things like routing, state management and styling.

Expectations from Create React App

CRA provides an easy way to set up a React project with pre-configured settings. It includes a development server, a build system, and a configuration file to manage the project’s settings. With CRA, developers can create a new project within minutes and start coding right away.

Limitations of Create React App

Limited Customization: Although CRA provides a basic
structure to start a project, it is limited in terms of customization. Developers cannot modify the webpack configuration or add additional libraries or frameworks easily. As a result, developers may face difficulties when trying to add new features to their application.
No Server-side Rendering: CRA is only a client-side rendering tool, which means that the entire application is rendered on the client-side. This results in slower loading times and poor SEO performance. Additionally, it can be difficult to implement certain features such as authentication and authorization, as it requires server-side rendering.
Poor Performance: CRA generates a large JavaScript file, which can cause slow loading times, especially on slower devices or with poor network connections. This can result in a poor user experience and negatively impact the application’s performance.
Solutions provided by Other Frameworks

Next.js: Next.js is a framework that builds on top of React and provides server-side rendering out of the box. It also allows for easy customization of the webpack configuration, making it easier to add new features and libraries. Additionally, Next.js has built-in support for static site generation, which can result in faster loading times and better SEO performance.

Run the following commands to get started:

npx create-next-app my-app
cd my-app
npm run dev

This will start the server and launch your app in your default web browser. You can then begin building your React components and pages using the Next.js framework.

For more information and documentation on how to use Next.js for your React projects, you can visit the official Next.js website at https://nextjs.org/docs.

Vite: Vite + React is a faster and more efficient alternative to Create React App (CRA). Vite, built on esbuild, provides superior performance and faster development time. It uses browser-native ESM to parse and compile code on-demand, eliminating the need for a separate build step. Vite also supports absolute imports, environment variables, and extensive plugin compatibility. Our company website was built with Vite + React and we are pleased with its static build + Islands architecture support, allowing for quick deployment to Vercel.

Run the following commands to get started:

npm create vite@latest
After the script finishes, you will be prompted to enter a project name:

? Project name: » vite-project
/* After entering your project name, Vite will prompt you to select a 
framework: */

? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others
/* After selecting the React framework, Vite will prompt you to choose the 
language type. You can use JavaScript or TypeScript to work on your 
project. */

? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC
/* Starting the Development Server */

cd vite-project
yarn
npm run dev

For more information and documentation on how to use Vite for your React projects, you can visit the official Vite website at https://vitejs.dev/guide/

Remix: Remix is another framework that builds on top of React and provides server-side rendering. It also provides a more flexible routing system, making it easier to implement complex routing features. Additionally, Remix has built-in support for code splitting, which can result in faster loading times and better performance.

Run the following commands to get started:

npx create-remix@latest --template remix-run/indie-stack blog-tutorial
? Do you want me to run `npm install`? Yes
npm run dev

For more information and documentation on how to use Remix for your React projects, you can visit the official Vite website at https://remix.run/docs/en/1.14.3/tutorials/blog.

Conclusion

While Create React App is an excellent tool for beginners and small projects, it has its limitations when it comes to scalability and customization. Other frameworks such as Next.js and Remix provide solutions for these limitations, making it easier for developers to create scalable and performant React applications. When choosing a framework, it is important to consider the project’s requirements and choose a framework that provides the necessary features and flexibility to meet those requirements.