What is React? A Beginner’s Guide to React.js Framework

What is React JS

by

React.js, commonly referred to as React, is an open-source JavaScript library created by Facebook in 2013. What is React JS? A Beginner’s Guide to React.js Framework Designed for building interactive, dynamic user interfaces (UI), React has since become one of the most popular choices for web development. React enables developers to build scalable, fast, and efficient applications by breaking down complex UIs into reusable components, which can dramatically simplify both the development and maintenance of applications.

Why Choose React?

React is favored by many developers due to its flexibility, speed, and efficiency. Here are a few reasons why React is widely adopted:

  1. Reusable Components: React allows developers to create independent, reusable components that can be used throughout the application. This leads to faster development and consistent user experiences.
  2. Virtual DOM: Unlike traditional DOM manipulation, React uses a virtual DOM that improves performance by minimizing real DOM changes. This optimizes rendering and enhances the speed of the application.
  3. Declarative Syntax: React’s declarative syntax makes code more readable and easier to debug. Developers can describe what the UI should look like, and React efficiently manages the underlying updates.
  4. Large Community and Ecosystem: React has a vibrant community, a vast library of third-party tools, and extensive documentation, making it beginner-friendly while also catering to complex projects.

Setting Up a React Environment

To get started with React, you need Node.js and npm (Node Package Manager) installed on your machine.

  1. Install Node.js:
    • Download and install Node.js from the official website. This will automatically install npm as well.
  2. Create a New React Application:
    • Open your terminal and run the following command:
npx create-react-app my-app
  • Replace my-app with your project name. This command sets up a new React project with all the necessary files and dependencies.

3. Start the Development Server:

Navigate into the project folder:

cd my-app

Run the following command to start the application:

npm start

Your React app will be running locally at http://localhost:3000.

Understanding React Components and What is React JS

React applications are built with components. Components are small, reusable pieces of code that describe part of the UI.

Example: A Simple Functional Component

// Greeting.js
import React from 'react';

function Greeting() {
  return <h1>Hello, Welcome to React!</h1>;
}

export default Greeting;

This Greeting component returns a simple heading. To use it in your main app, you can import and render it as follows:

// App.js
import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

Functional vs Class Components

  • Functional Components: These are simpler and are written as JavaScript functions. They became widely used after React introduced Hooks, allowing for state and lifecycle features.
  • Class Components: Written as ES6 classes, they were originally the only way to handle component state and lifecycle methods before Hooks.

State and Props in React

  1. State: A component’s state is an object that holds dynamic data. When state changes, React re-renders the component to reflect the new state.
import React, { useState } from 'react';

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

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

export default Counter;

2. Props: Props (short for “properties”) allow data to be passed from a parent component to a child component.

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

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

Best Practices in React

  1. Keep Components Small and Focused: Each component should have a single purpose to make code more readable and reusable.
  2. Use Descriptive Names: Name components based on what they represent.
  3. Avoid Direct DOM Manipulation: Use state and props for any updates instead of directly manipulating the DOM.
  4. Utilize Hooks: Make use of React’s built-in Hooks, like useState, useEffect, and useContext, to manage state and lifecycle events in functional components.
  5. Use Key Props in Lists: If rendering lists, always include a unique key prop for each element to enhance performance.
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Practical Example: Building a Simple Todo List in React

In this example, we’ll build a simple Todo List application to demonstrate how to use state and events in React. Follow these steps to set up and understand the project structure. This guide will help you know exactly which files to create and where to paste the code.

Step 1: Set Up Your React Project

  1. Create a New React App:
    Open your terminal and run:
npx create-react-app my-todo-app

Replace my-todo-app with any name for your project. This command will create a new React project folder with the necessary files.

2. Open the Project: Navigate to the project folder:

cd my-todo-app

Start the development server by running:

npm start

This will open the React app at http://localhost:3000

Step 2: Create a New Component for Todo List

  1. Inside the src folder, create a new file called Todo.js. This component will handle the core functionality of our Todo List.
  2. Add the Following Code in Todo.js: This code creates a simple form where users can add new todo items and displays them in a list.
// src/Todo.js
import React, { useState } from 'react';

function Todo() {
  // State to hold the list of todos
  const [todos, setTodos] = useState([]);
  // State to hold the new todo input
  const [newTodo, setNewTodo] = useState('');

  // Function to add a new todo
  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo(''); // Clear the input after adding
    }
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Enter a new task"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default Todo;
  1. Explanation:
    • State Management: We use useState to store the list of todos and the current input for a new todo.
    • Event Handling: The addTodo function adds a new todo to the list when the “Add” button is clicked, and it also clears the input field.

Step 3: Use the Todo Component in App.js

  1. Open App.js in the src folder. By default, App.js is the main file that renders components on the page.
  2. Import and Use the Todo Component: Add the following code in App.js to include the Todo component we created.
// src/App.js
import React from 'react';
import Todo from './Todo'; // Import the Todo component

function App() {
  return (
    <div className="App">
      <h1>My React Todo App</h1>
      <Todo /> {/* Render the Todo component here */}
    </div>
  );
}

export default App;

3. Save and View:
Save the file, and if your development server is still running, your Todo List app should now appear at http://localhost:3000.

You should see a heading “My React Todo App,” an input field, an “Add” button, and an area where todos will be listed.

What is React JS

FAQs

1. What is React used for?
React is used to build interactive, dynamic, and responsive web applications by simplifying UI development with reusable components.

2. Do I need to know JavaScript before learning React?
Yes, a basic understanding of JavaScript is essential, as React relies heavily on JavaScript concepts.

3. What are React Hooks?
Hooks, introduced in React 16.8, are functions like useState and useEffect that let you use state and other React features in functional components.

4. How is React different from Angular?
While both are used for front-end development, React is a library focused solely on the UI, while Angular is a full-fledged framework offering more structure and tools for building applications.

5. Can I use React with backend frameworks like Node.js?
Yes, React works well with backend frameworks like Node.js to handle the server-side logic and API endpoints.

Thank you for reading! If you found this guide helpful and want to stay updated on more React.js content, be sure to follow us for the latest tutorials and insights: JavaDZone React.js Tutorials. Happy coding!

Leave a Comment