Starting with React 18

Introduction

Completed Javascript language, Now Let's dive into the JavaScript library ReactJS. React 18 is the latest and most popular version of this JavaScript library, widely used for developing front-end applications. It provides a wide range of tools that greatly simplify writing application logic compared to plain JavaScript.React 18 includes various performance optimizations, such as faster server-side rendering, reduced bundle sizes, and improved memory usage. These optimizations result in faster load times and better overall performance for React applications. It also offers improved integration with React Router, a popular routing library for React applications. This integration simplifies the process of creating complex navigation and routing structures within React applications.

How to Create React-App

1. Install Node.js: Ensure that you have Node.js installed on your computer. You can download it from the official website (nodejs.org) and follow the installation instructions.

2. Choose a Package Manager: React apps can be created using either npm or Yarn. Both are popular choices, so choose the one you prefer.

3. Using npx Run the following command to create a new React app using Create React App.

npx create-react-app YourAppName

If you're using Yarn as your package manager, run the following command

yarn create react-app my-app

Once the app is created, navigate into the app's directory

cd my-app

Then, start the development server by running the following command

//you are using npm:
npm start
OR
//you are using yarn:
yarn start

This will start the development server and open your app in a web browser. You can now begin building your React app by modifying the code in the src directory.

Now let's understand the basic of React.

React Components:

React components are fundamental to developing applications with React. Components are the building blocks of React applications, representing reusable and modular pieces of the user interface. One of the components is Functional components are simple JavaScript functions that return JSX (JavaScript XML) to define the component's structure and content. They are the most commonly used type of component in React.

import React from 'react';

function MyComponent() {
  return 
    <div>Hello World!</div>;
    <h1>Welcome to My React APP</h1>
}

export default MyComponent;

Props in React:

Props are a way to pass data from a parent component to a child component. They are read-only and help components communicate and share information.Let's consider an example.

ParentComponent.js

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const firstname = 'John';
  const lastname= 'Cena';
  const email= 'johncena69@gmail.com'

  return <ChildComponent 
            firstname={firstname} 
            lastname={lastname}
            email={email} />;
}

export default ParentComponent;

ChildComponent.js

import React from 'react';

function ChildComponent(props) {
  return (
    <>
      <h2>Name: {props.firstname}</h2>
      <h2>Age: {props.lastname}</h2>
      <h2>Age: {props.email}</h2>
    </>
  );
}

export default ChildComponent;

Or We can use destructuring the props object in the function signature, you can directly use the individual prop values.

import React from 'react';

function ChildComponent({firstname,lastname,email}) {
  return (
    <>
      <h2>Name: {firstname}</h2>
      <h2>Age: {lastname}</h2>
      <h2>Age: {email}</h2>
    </>
  );
}

export default ChildComponent;

In this example, the ParentComponent passes the three props firstname,lastname and email to the ChildComponent. The ChildComponent receives these props and accesses them using the props object. It then displays the values of firstname,lastname and email within the JSX structure.

React UseState Management:

UseState is a built-in React hook that allows functional components to manage state. It provides a way to declare and update state within a functional component.

To use UseState, you need to import it from the 'react' package:

import React, { useState } from 'react';

Within the functional component, use the UseState hook to declare state and initialize its initial value.

const [state, setState] = useState(initialValue);

In the above code, state represents the current value of the state, and setState is a function that can be used to update the state. The initialValue is the initial value assigned to the state.

Now let us understand through an example.

import React, { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(prevState => !prevState);
  };

  return (
    <div>
      <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>
    </div>
  );
}

In this example, the ToggleButton component manages the state of a toggle button using useState . The initial value of the isOn state is set to false. The toggle function is called when the button is clicked and uses the setIsOn. function to toggle the value of isOn between true and false.

The text displayed on the button changes based on the value of isOn . If isOn is true, the button displays 'ON', and if isOn is false, the button displays 'OFF'. Clicking the button triggers the toggle function, which updates the state and causes a re-render of the component.

Conclusion

When starting with React, understanding the fundamental concepts covered so far is a good foundation. However, there are several other important concepts in React that you can explore as you progress in your learning journey. These concepts will help you build more advanced and robust React applications. Here are some of the key concepts you can dive into React Router, React Hooks, React Forms, React Context. As you continue your learning journey, keep exploring these concepts, and stay updated with new features and updates in the React ecosystem.