React JS Tutorial - Basic to Advance (2023)

Introduction

This tutorial is designed to guide you through the fundamental concepts of React.js, a powerful JavaScript library used for building user interfaces. By following these steps, you'll learn how to create dynamic and interactive web applications using React. Whether you're a beginner or looking to refine your skills, this guide will provide you with the essential knowledge to build scalable and maintainable applications.

Step 1: Setting Up Your Development Environment

To start working with React, you need to set up your development environment.

• Install Node.js: Ensure you have Node.js installed on your computer. You can download it from Node.js official website.
• Create a React App:
  • Open your terminal or command prompt.
  • Run the following command to create a new React application:

    npx create-react-app my-app
    

  • Navigate to your project directory:

    cd my-app
    

• Open in Visual Studio Code:
  • Launch Visual Studio Code (VSCode).
  • Open your project folder by going to File > Open Folder and selecting your project.

Step 2: Understanding React Components

React applications are built using components, which are reusable pieces of UI.

• Creating a Component:
  • In the src folder, create a new file called MyComponent.js.
  • Define a simple component:

    import React from 'react';
    
    function MyComponent() {
        return <h1>Hello, React!</h1>;
    }
    
    export default MyComponent;
    

• Using Your Component:
  • Import and use this component in App.js:

    import MyComponent from './MyComponent';
    
    function App() {
        return (
            <div>
                <MyComponent />
            </div>
        );
    }
    
    export default App;
    

Step 3: Styling Components

Styling is crucial for enhancing the user interface.

• CSS Modules:
  • Create a CSS file MyComponent.module.css to style your component.
  • Import the CSS module in your component:

    import styles from './MyComponent.module.css';
    
    function MyComponent() {
        return <h1 className={styles.title}>Hello, React!</h1>;
    }
    

• Inline Styles:
  • You can also apply styles directly in your JSX:

    const titleStyle = {
        color: 'blue',
        fontSize: '20px'
    };
    
    return <h1 style={titleStyle}>Hello, React!</h1>;
    

Step 4: Handling Events

React allows you to handle user interactions easily.

• Adding Events:
  • Define a function to handle events:

    function handleClick() {
        alert('Button clicked!');
    }
    
    return <button onClick={handleClick}>Click Me</button>;
    

Step 5: Managing State

State management is essential for dynamic applications.

• Using useState Hook:
  • Import the useState hook from React:

    import React, { useState } from 'react';
    
    function MyComponent() {
        const [count, setCount] = useState(0);
    
        return (
            <div>
                <p>You clicked {count} times</p>
                <button onClick={() => setCount(count + 1)}>Click me</button>
            </div>
        );
    }
    

Step 6: Passing Props

Props allow you to pass data between components.

• Defining Props:

  • Modify your component to accept props:

    function MyComponent({ title }) {
        return <h1>{title}</h1>;
    }
    

• Passing Props:

  • Use the component and pass a title:

    <MyComponent title="Hello, React!" />
    

Step 7: Routing with React Router

For multi-page applications, React Router is essential.

• Installing React Router:
  • Install React Router:

    npm install react-router-dom
    

• Setting Up Routes:
  • In your App.js, import necessary components:

    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    import Home from './Home';
    import About from './About';
    
    function App() {
        return (
            <Router>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about" component={About} />
                </Switch>
            </Router>
        );
    }
    

Conclusion

By following these steps, you have learned the basics of React.js, including setting up your environment, creating and styling components, handling events, managing state, passing props, and implementing routing. You can now continue exploring more advanced topics such as React Hooks and Context API to further enhance your applications. Start building your first React app, and don't hesitate to reach out to the community for support and resources!