Master React JS in 2 Hours | Beginner’s Guide to React JS 2024 | Latest React JS Version 18+ | Get PDF Notes

React JS is a popular JavaScript library for building user interfaces. It was created by Facebook and is widely used by developers around the world. This tutorial aims to teach you the basics of React JS in just 2 hours, making it perfect for beginners who want to start learning this powerful library.

In this tutorial, we will cover the following topics:

1. What is React JS?
2. Setting up your development environment
3. Creating a basic React component
4. Interacting with components using props and state
5. Handling events in React
6. Working with lists and keys
7. Conditionally rendering components
8. Using React Router for navigation
9. Fetching data from an API
10. Deploying your React app

Before we get started, make sure you have Node.js and npm installed on your computer. You can download them from the official website at https://nodejs.org/. Once you have Node.js and npm installed, you can create a new React project by running the following command in your terminal:

npx create-react-app my-react-app

This will create a new directory called my-react-app with all the necessary files for a basic React project. You can navigate to this directory by running cd my-react-app in your terminal.

Now that we have our React project set up, let’s start by creating a basic React component. Open the src directory in your project and create a new file called App.js. Inside this file, add the following code:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

In this code, we have created a simple functional component called App that returns a div element with an h1 heading. We have also exported this component so it can be used in other parts of our project.

Next, let’s update the index.js file in the src directory to render our App component. Open the index.js file and replace its contents with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

This code imports the App component we created earlier and renders it inside the root element in the HTML file. Now, when you start your React app by running npm start in your terminal, you should see the text "Hello, React!" displayed on the screen.

Now that we have created a basic React component, let’s learn how to pass data to components using props. Props allow us to pass data from a parent component to a child component. Update the App.js file with the following code:

import React from 'react';

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

function App() {
  return <Greeting name="React" />;
}

export default App;

In this code, we have created a new functional component called Greeting that takes a name prop and displays a personalized greeting. We then render the Greeting component inside the App component and pass the name prop as "React".

To handle user interactions in React, we can use state. State allows us to store and update data within a component. Update the App.js file with the following code to see an example of using state:

import React, { useState } from 'react';

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

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

function App() {
  return <Counter />;
}

export default App;

In this code, we have created a new functional component called Counter that uses the useState hook to create a count state variable. We then render the Counter component inside the App component with a button that increments the count when clicked.

React also allows us to work with lists of data using the map function. Update the App.js file with the following code to see an example of rendering a list of items:

import React from 'react';

function List() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

function App() {
  return <List />;
}

export default App;

In this code, we have created a new functional component called List that renders a list of items using the map function. Each item in the list is rendered as an li element with a unique key attribute.

React also allows us to conditionally render components based on certain conditions. Update the App.js file with the following code to see an example of conditional rendering:

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <p>Welcome, User!</p> : <button onClick={() => setIsLoggedIn(true)}>Log In</button>}
    </div>
  );
}

export default App;

In this code, we have created a new functional component called App that conditionally renders a welcome message if the user is logged in. If the user is not logged in, a button is displayed that, when clicked, sets the isLoggedIn state to true.

React Router is a popular library for handling navigation in React apps. To use React Router in your project, you can install it by running the following command in your terminal:

npm install react-router-dom

Once React Router is installed, you can create a simple routing setup in your app. Update the App.js file with the following code to see an example of using React Router for navigation:

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

function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

In this code, we have created two new functional components called Home and About that represent different pages in our app. We then set up routing in the App component using the Router, Route, and Link components provided by React Router.

To fetch data from an API in React, you can use the fetch method or libraries like axios. Update the App.js file with the following code to see an example of fetching data from an API:

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default App;

In this code, we have used the useEffect hook to fetch data from the JSONPlaceholder API when the component mounts. We then render a list of posts from the API response using the map function.

Finally, to deploy your React app, you can use services like Vercel, Netlify, or GitHub Pages. These services allow you to easily deploy your app and share it with others. You can follow the deployment instructions provided by the service you choose to host your React app.

This tutorial has covered the basics of React JS, including creating components, working with props and state, handling events, using lists and keys, conditional rendering, navigation with React Router, fetching data from an API, and deploying your app. By following these steps and practicing your skills, you can become proficient in React JS in no time.

For a more in-depth understanding of React JS, I recommend checking out the official React documentation at https://reactjs.org/docs/getting-started.html. You can also explore online tutorials, courses, and books to further enhance your knowledge of React JS.

I hope this tutorial has provided you with a solid foundation in React JS and that you are now ready to start building your own React apps. Happy coding!