React JS

Introduction

Objectives

  1. Introduction to React
  2. Setting up the Development Environment
  3. Components and JSX
  4. Rendering Elements
  5. Props and State

1. Introduction to React

React is an open-source JavaScript library for building user interfaces. It was developed and is maintained by Facebook and a community of individual developers. 

Why Use React JS

Key Features & Benefits

&

Code Reusability

const UserCard = ({ user }) => {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} className="avatar" />
      <div className="user-details">
        <h2>{user.name}</h2>
        <p>Email: {user.email}</p>
      </div>
    </div>
  );
};

Efficiency and Performance

Components

Modular building blocks for UI

Virtual DOM

Efficiently updates only necessary parts of the UI

Vibrant Community

  • Large developer community
  • Abundance of open-source libraries

Popularity

Widely adopted by major companies and developers worldwide

2. Setting up the Development Environment:

Vite

Vite is a next-generation build tool for frontend development. It focuses on speed and efficiency by leveraging ES Module imports and server-side rendering (SSR) capabilities.

CRA

Create React App is an officially supported way to create single-page React applications. It sets up a new React project with a pre-configured build setup using webpack and Babel.

SWC excels in performance and modern JavaScript/TypeScript support, making it ideal for projects that require fast compilation times and support for the latest ECMAScript features.

Babel, while slightly slower in compilation speed compared to SWC, offers unparalleled flexibility, extensive plugin support, and broad compatibility across different JavaScript environments and syntax versions.

SWC vs Babel

Creating a new React project using Vite

npm create vite@latest

Understanding the project structure

Managing project dependencies with npm

Running commands in the terminal

npm i date-fns
npm run dev

Creating and using components in React

3. Components and JSX:

In React, components are the building blocks of a user interface. They are small, reusable pieces of code that encapsulate the UI logic and can be composed to create complex UIs.

Components

Functional Components

Functional components are JavaScript functions that return JSX (JavaScript XML) to describe what should be rendered on the screen. They are simpler and considered a more modern approach to building components. Functional components are stateless, meaning they don't have internal state or lifecycle methods.

Components

Class Components

Class components are ES6 classes that extend the React.Component class. They can have state and lifecycle methods, making them more suitable for complex logic and interactions. However, with the introduction of React Hooks, functional components can now handle state and side effects effectively, reducing the need for class components in many cases.

What is JSX ?

What is JSX ?

<div>
  	<h1>Hello, {fullName}!</h1>
	<p>Welcome to my React app.</p>
</div>
const fullName="John snow"

Creating Functional Components

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h2>Hello, {props.name}!</h2>
      <p>{props.message}</p>
    </div>
  );
};

Creating Class Components

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

4. Props and states

In React, data is typically passed from a parent component to a child component through props. Props (short for "properties") are read-only and allow data to flow in one direction, from parent to child components.

Properties

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

const ParentComponent = () => {
  const name = 'John Doe';
  return <ChildComponent name={name} />;
};
// ChildComponent.js
import React from 'react';

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

States

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

state and setState

States

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleIncrement = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };
  handleDecrement = () => {
    this.setState((prevState) => ({ count: prevState.count - 1 }));
  };
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
        <button onClick={this.handleDecrement}>Decrement</button>
      </div>
    );
  }
}

setState callback

React JS Introduction

By Youcef Madadi

Made with Slides.com

React JS Introduction

  • 335

More from Youcef Madadi