Youcef Madadi
Web and game development teacher
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.
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>
);
};
Modular building blocks for UI
Efficiently updates only necessary parts of the UI
Widely adopted by major companies and developers worldwide
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.
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.
npm create vite@latest
npm i date-fns
npm run dev
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.
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.
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.
<div>
<h1>Hello, {fullName}!</h1>
<p>Welcome to my React app.</p>
</div>
const fullName="John snow"
import React from 'react';
const MyComponent = (props) => {
return (
<div>
<h2>Hello, {props.name}!</h2>
<p>{props.message}</p>
</div>
);
};
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>
);
}
}
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.
// 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>;
};
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>
);
}
}
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>
);
}
}
By Youcef Madadi