Introduction to React JS

React is a JavaScript library developed by Facebook for building user interfaces. It is used to create dynamic and responsive web applications efficiently. React focuses on building reusable UI components that manage their own state.

Why Use React?

React offers several advantages for developers:

  • Component-based architecture makes it easy to reuse and manage code.
  • Virtual DOM improves performance by updating only the necessary parts of the real DOM.
  • Rich ecosystem with numerous libraries and tools.
  • Seamless integration with other frameworks and libraries.

Creating Your First React Component

To get started with React, you need Node.js and npm installed on your machine. Once set up, you can create a simple React component. Below is an example:

    

// Importing React
import React from 'react';
import ReactDOM from 'react-dom';
// Creating a functional component
function Welcome() {
   return <h1>Hello, React!</h1>;
}
// Rendering the component to the DOM
ReactDOM.render(<Welcome />, document.getElementById('root'));

Here is what each part of the code does:

  • import React: This imports the React library, which is essential for creating React components.
  • import ReactDOM: This imports ReactDOM, which is used to render React components to the DOM.
  • function Welcome(): This defines a functional component named Welcome. It returns a simple h1 element.
  • ReactDOM.render(): This method renders the Welcome component into the DOM element with the ID root.

Using Props in React

Props are short for "properties" and allow you to pass data to components. Here's an example:

          

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(<Greeting name="Alice" />, document.getElementById('root'));

In this example:

  • props.name: This accesses the name property passed to the Greeting component.
  • The component renders a personalized greeting message based on the name prop.

Managing State in React

State in React is used to manage data that changes over time. The useState hook is commonly used for this purpose:

          

import React, { useState } from 'react';
function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Current count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
            <button onClick={() => setCount(count - 1)}>Decrease</button>
        </div>
    );
}
ReactDOM.render(<Counter />, document.getElementById('root'));

Explanation:

  • useState(0): Initializes the state variable count with a value of 0.
  • setCount: A function used to update the state variable.
  • onClick: Event handlers are used to update the state when buttons are clicked.

Conclusion

React JS is a powerful tool for building modern web applications. Its component-based architecture and features like props and state management make it an excellent choice for developers looking to create dynamic and interactive user interfaces.




Advertisement