React Fundamentals

Introduction to React

React is a JavaScript library for building user interfaces. It allows you to create reusable UI components and manage the state of your application effectively.

import React from 'react';
const HelloWorld = () => {
 return 
Hello, World!
;
};
export default HelloWorld;

Try it yourself:

Components and Props

In React, components are the building blocks of your application. Props are used to pass data from a parent component to a child component.

import React from 'react';
const Greeting = (props) => {
 return 
Hello, {props.name}!
;
};
const App = () => {
 return ;
};

Interactive Example:

State and Lifecycle

State is used to store data that changes within a component. Lifecycle methods are used to perform actions at different stages of a component's life cycle.

import React, { useState } from 'react';
const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 

 
Count: {count}

 
 

 );
};

Try it yourself:

Count: 0

React Hooks

React Hooks allow you to use state and other React features in functional components.

import React, { useState, useEffect } from 'react';
const Timer = () => {
 const [count, setCount] = useState(0);
 useEffect(() => {
 const intervalId = setInterval(() => {
 setCount(count + 1);
 }, 1000);
 return () => clearInterval(intervalId);
 }, [count]);
 return 
Count: {count}
;
};

Try it yourself: