Components are the building blocks of React applications. They are self-contained units of code that encapsulate UI logic and data. Components can be reused throughout your application, promoting modularity and code organization.

Figure 2: React Component Tree

Props (short for properties) are used to pass data from a parent component to a child component. They allow you to customize the behavior and appearance of child components.

1. State

State is used to manage data that is specific to a component and can change over time. When the state changes, React automatically re-renders the component to reflect the new data.


import React, { useState } from 'react';

const Counter = () => {
const [count, setCount] = useState(0);

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

};

export default Counter;

1. Hooks

Hooks are functions that let you "hook into" React features, such as state and lifecycle methods, without writing class components. Some popular hooks include:

• useState : For managing state within a functional component.
• useEffect : For handling side effects, such as data fetching or DOM manipulation.
• useContext : For accessing data from the context API.

Lifecycle Methods

Lifecycle methods are functions that are automatically called at different stages of a component's life cycle, such as when it mounts, updates, or unmounts. They allow you to perform actions at specific points in the component's lifecycle.


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

componentDidMount() {
console.log('Component mounted!');
}

componentDidUpdate() {
console.log('Component updated!');
}

componentWillUnmount() {
console.log('Component unmounted!');
}

render() {
return (

Count: {this.state.count}

this.setState({ count: this.state.count + 1 })}>Increment

);
}
}

Events

React supports handling user events, such as clicks, mouseovers, and form submissions. You can attach event handlers to components to respond to user interactions.



const handleClick = () => {

console.log('Button clicked!');

};

return (

Click Me

);

1. Routing

React Router is a popular library for handling navigation and routing in React applications. It allows you to define different routes for different pages or views in your application.


import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const App = () => (




} />


} />


);

1. Data Fetching

You can fetch data from external APIs or databases using the fetch API or third-party libraries like Axios. Data fetching is often handled within a component's useEffect hook.


import React, { useState, useEffect } from 'react';

const MyComponent = () => {
const [data, setData] = useState([]);

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

return (
<div>
 {data.map(item =&gt; (
 <div key="{item.id}">
  {/* Render item data */}
 </div>
 ))}
</div>
);

};

Building a Simple React App

Let's build a simple React app that displays a list of items with a counter.

1. Project Setup

Create a new React project using Create React App:

Create two components:



ItemList



and



Counter



.

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

Import and use the components in

App.js

.



import React, { useState } from 'react';

import ItemList from './ItemList';

import Counter from './Counter';

const App = () => {
const [items, setItems] = useState([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]);

return (
<div>
 <h1>
  My React App
 </h1>
 <itemlist items="{items}">
 </itemlist>
 <counter>
 </counter>
</div>
);

};

export default App;

Start the development server and view the app in your browser.



npm start



Conclusion

This 12-minute guide has equipped you with the fundamental concepts of React. You've learned about JSX, components, props, state, hooks, lifecycle methods, events, routing, and data fetching. This knowledge provides a solid foundation for building sophisticated React applications.

Remember, practice is key to mastering React. Experiment with different components, explore the vast React ecosystem, and leverage its power to create stunning web applications.