React is a JavaScript library developed by Facebook for building user interfaces (UIs) and managing the state of UI components. It allows you to create reusable UI components and efficiently update them when data changes. React follows a declarative approach, where you describe what your UI should look like at any given moment, and React takes care of updating the actual UI.

Step 1: Setup

Open your terminal and navigate to the directory where you want to create your project.

Run the following command to create a new React app using create-react-app:

npx create-react-app my-react-app

Change into the newly created app directory:

cd my-react-app

Step 2: Components

React applications are composed of components. Components are reusable building blocks that encapsulate UI elements and their behavior.

React components can be classified into two main types:

Functional Components: These are defined as JavaScript functions and are the simplest way to define components.

Class Components: These are defined as JavaScript classes and can have more advanced features like state and lifecycle methods.

Let's create both types of components.

Open the src folder and create a new file named FunctionalComponent.js.

Inside FunctionalComponent.js, create a functional component:

import React from 'react';

function FunctionalComponent() {
    return (
        <div>
            <h1>Hello from Functional Component!</h1>
        </div>
    );
}

export default FunctionalComponent;

Now, create a class component in a file named ClassComponent.js:

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello from Class Component!</h1>
      </div>
    );
  }
}

export default ClassComponent;

Now, create a class component in a file named ClassComponent.js:

Step 3: Using Components

Let's use these components in the App component:

Open src folder and edit the App.js file.

Replace the existing code with the following:

import React from 'react';
import './App.css';
import FunctionalComponent from './FunctionalComponent';
import ClassComponent from './ClassComponent';

function App() {
  return (
    <div className="App">
      <FunctionalComponent />
      <ClassComponent />
    </div>
  );
}

export default App;

Step 4: State and Props

React components can have two types of data: props and state.

Props (Properties): These are passed to a component and provide a way to pass data from parent to child components.

State: This is an internal data store that allows a component to keep track of data that might change over time.

Let's create a simple counter app to understand state and props better:

Create a new file named Counter.js in the src folder:

import React, { Component } from 'react';

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

  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <h2>Counter: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Use the Counter component in App.js:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

Step 5: Styling

Styling in React can be done using regular CSS, CSS modules, or CSS-in-JS libraries like styled-components. You can create a separate CSS file for each component and import the styles where needed.

Step 6: Lifecycle Methods and Hooks

Class components have lifecycle methods that allow you to perform actions at different stages of a component's life, like when it's created, updated, or unmounted. With the introduction of hooks in React, you can achieve the same effects using functional components.

Some common lifecycle methods/hooks are componentDidMount, componentDidUpdate, componentWillUnmount, and the hook useEffect.

Step 7: Routing

To create multi-page applications in React, you need to implement routing. The popular library for this purpose is react-router-dom. It allows you to define different routes in your application and render different components based on the route.

Step 8: Fetching Data

To fetch data from APIs, you can use the fetch API or libraries like axios. You typically make these requests within lifecycle methods or hooks and update the component's state accordingly.