Master React JS in Just 90 Minutes! A Comprehensive Crash Course for Beginners 👨‍💻

React JS is a popular JavaScript library for building user interfaces. It is maintained by Facebook and a community of developers. React JS allows you to create interactive, dynamic, and fast applications with ease. In this tutorial, I will walk you through the basics of React JS and help you create a simple React application in just 90 minutes.

1. Install Node.js and npm:
   Before we get started with React JS, you will need to have Node.js and npm (Node Package Manager) installed on your system. Node.js comes with npm pre-installed. You can download and install Node.js from the official website.

2. Create a new React project:
   To create a new React project, you can use the create-react-app tool provided by Facebook. Open your terminal and run the following command:

npx create-react-app my-react-app

Replace my-react-app with the name of your project. This command will create a new React project in a directory with the given name.

1. Start the development server:
   Once the project is created, navigate to the project directory by running cd my-react-app and start the development server by running npm start. This will open a new tab in your browser with your React application running.

2. Understand the project structure:
   When you create a new React project using create-react-app, it sets up a basic project structure for you. The src directory contains all your application code, the public directory contains static assets, and the package.json file contains project dependencies and scripts.

3. Explore Components and JSX:
   In React, everything is a component. Components are reusable pieces of code that define how a part of your UI should look and behave. You can create components using either class-based or functional components. JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files.

4. Create your first component:
   Open the App.js file in the src directory and delete the default content. Create a new functional component called App and return some JSX code inside it. For example:

import React from 'react';

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

export default App;

1. Rendering components:
   To render a component in your application, you can import it and use it as a JSX element. Open the index.js file in the src directory and replace the default content with the following code:

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

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

This code will render the App component inside the root element in the public/index.html file.

1. Working with props:
   Props (short for properties) allow you to pass data from a parent component to a child component. You can pass props to a component by adding attributes to the JSX element. Modify the App component in App.js to accept a name prop and display it:

const App = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
}

export default App;

And modify the ReactDOM.render function in index.js to pass a name prop to the App component:

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

1. State and setState:
   In React, state is used to store the dynamic data that can change over time. You can initialize state in a component using the useState hook. Create a new class-based component called Counter in a separate file Counter.js:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Import and render the Counter component in App.js:

import Counter from './Counter';

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

1. Styling components:
   You can style your components using CSS. Create a new CSS file called styles.css in the src directory and write some CSS styles:

h1 {
  color: #333;
}
button {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

Import the CSS file in App.js:

import './styles.css';

1. Fetching data with APIs:
   React makes it easy to fetch data from APIs using built-in hooks like useEffect and useState. Create a new functional component called Posts in a separate file Posts.js:

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

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

export default Posts;

Import and render the Posts component in App.js:

import Posts from './Posts';

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Counter />
      <Posts />
    </div>
  );
}

1. Congratulations, you have successfully completed this crash course on React JS! I hope you found this tutorial helpful in getting started with React and building your first React application. Remember to practice and explore more features of React to enhance your skills further. Happy coding! 👨‍💻🚀