Day 66: Introduction to React | Harshil Chovatiya

Harshil Chovatiya - Day 66: Frontend Frameworks - Introduction to React

Introduction to React:

Today marks the beginning of our journey into frontend frameworks, starting with React. React, developed by Facebook, is a powerful and widely adopted library for building user interfaces. Its component-based architecture and virtual DOM make it a popular choice for creating dynamic and interactive web applications. Let's dive into the basics of React and understand its core concepts.

Example:

                
                
// Simple React component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="John" />;
                
            

Creating Components:

Explore the concept of components in React and understand the structure of a basic functional component.

Example:

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

JSX - JavaScript XML:

Learn about JSX, a syntax extension for JavaScript used with React, and understand how it simplifies the creation of React elements.

Example:

                
                
// Using JSX to create a React element
const element = <h1>Hello, React!</h1>;
                
            

State and Lifecycle:

Explore the concept of state in React components and understand how lifecycle methods enable components to respond to different phases.

Example:

                
                
// Class component with state and lifecycle methods
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return <p>Current time: {this.state.date.toLocaleTimeString()}</p>;
  }
}
                
            

Handling Events:

Learn how to handle events in React components and understand the synthetic event system in React.

Example:

                
                
// Handling click events in a React component
class Button extends React.Component {
  handleClick() {
    alert('Button clicked!');
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}
                
            

Conclusion:

Today, you've been introduced to the world of React, a powerful library for building user interfaces. As you continue your exploration, delve deeper into component-based architecture, JSX syntax, state management, and event handling. React's popularity and extensive community support make it an excellent choice for developing scalable and maintainable frontend applications. Stay tuned for further sessions on advanced React concepts and best practices.

Social Media