React Js

How to start installation

To start a new React project, you can use the Create React App tool, which sets up a new React project with a simple command. You can run the following command in your terminal:

npx create-react-app my-app

This will create a new directory called my-app with all the necessary files and dependencies for a React application. After the installation is complete, you can navigate to the project directory and start the development server with the following commands:

cd my-app
npm start

This will start the development server and open your React application in your default web browser.

Folder structure

The folder structure of a React project created with Create React App typically looks like this:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

The public folder contains the index.html file, which is the entry point for the React application. The src folder contains the JavaScript files for the application, including the main App.js file and the index.js file, which is the entry point for the JavaScript code. The node_modules folder contains all the dependencies for the project, and the package.json file lists the dependencies and scripts for the project.

How to create and nest components

In React, you can create components as functions or classes. To create a component, you can define a function that returns JSX (a syntax extension for JavaScript). For example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

You can then use this component in another component by nesting it. For example:

function MyComponent() {
  return (
    <div>
      <button>Click me</button>
    </div>
  );
}

In this example, the App component nests two Greeting components, passing different names as props. When rendered, it will display "Hello, Alice!" and "Hello, Bob!" on the page.

Add Styles for Components

In React, you can add styles to components using various methods. One common way is to use inline styles, which are defined as an object in JavaScript. For example:

function MyComponent() {
  const styles = {
    color: 'blue',
    fontSize: '20px',
  };
}

In this example, the MyComponent function defines an object called styles that contains CSS properties and values. You can then apply these styles to a JSX element using the style attribute. For example:

function MyComponent() {
  const styles = {
    color: 'blue',
    fontSize: '20px',
  };
}

In this example, the MyComponent function applies the styles defined in the styles object to a div element using the style attribute. The text "This is a styled component." will be displayed in blue with a font size of 20 pixels.

Start ClassNames

In React, you can use the className attribute to apply CSS classes to your components. This is similar to using the class attribute in regular HTML. For example:

function MyComponent() {
  return (
    <div className="my-class">
      This is a component with a class name.
    </div>
  );
}

In this example, the MyComponent function returns a div element with a class name of "my-class". You can then define the styles for this class in your CSS file. For example:

.my-class {
  color: red;
  font-size: 18px;
}

In this example, the .my-class selector in the CSS file defines the styles for the "my-class" class. The text "This is a component with a class name." will be displayed in red with a font size of 18 pixels.

How to use props and state

Props (short for "properties") are used to pass data from a parent component to a child component. State, on the other hand, is used to manage data that can change over time within a component. To use props, you can define them as attributes when using a component. For example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Chokri" />
    </div>
  );
}

In this example, the Greeting component receives a prop called name, which it uses to display a personalized greeting. To use state, you can use the useState hook in a functional component. For example:

import React, { useState } from 'react';

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

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

In this example, the MyComponent uses the useState hook to manage a piece of state called count. The setCount function is used to update the value of count.

Condition Rendering

In React, you can conditionally render components based on certain conditions. This can be done using JavaScript's conditional operators. For example:

function MyComponent(props) {
  return (
    <div>
      {props.isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign up.</h1>
      )}</div>
  );
}

In this example, the MyComponent component conditionally renders a welcome message based on the value of the isLoggedIn prop. If isLoggedIn is true, it displays "Welcome back!"; otherwise, it displays "Please sign up."

Rendering Lists

In React, you can render lists of data using the map() function to iterate over an array and return a component for each item. For example:

function MyComponent() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

In this example, the MyComponent component renders a list of fruits using the map() function.

Note: When rendering lists in React, it's important to provide a unique key for each item to help React identify which items have changed, are added, or are removed. You can do this by adding a key prop to the list items. For example:

function MyComponent() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

In this example, the MyComponent component renders a list of fruits using the map() function and provides a unique key for each item.

Introduction to State

State is a built-in object in React that allows components to manage and update data that can change over time. State is typically used to store information that affects the rendering of a component or its behavior. To use state in a functional component, you can use the useState hook. For example:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React DOM

React DOM is a package that provides DOM-specific methods for rendering React components in the browser. It allows you to render your React components into a specific DOM element. To use React DOM, you can import it from the 'react-dom' package and use the ReactDOM.render() method. For example:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

In this example, the ReactDOM.render() method takes a React element (in this case, an h1 element with the text "Hello, world!") and renders it into the DOM element with the id of 'root'. This is how you can display your React components in the browser.

Hook

Hooks are functions that let you use state and other React features in functional components. They were introduced in React 16.8 to allow developers to use state and lifecycle methods without writing a class component. The most commonly used hooks are useState and useEffect. For example, the useState hook allows you to add state to a functional component:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState Hook

The useState hook is a function that allows you to add state to a functional component. It takes an initial state value as an argument and returns an array with two elements: the current state value and a function to update that state. For example:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}