Querying Elements in React JS 🎯

Welcome to our comprehensive guide on Querying Elements in React JS! This tutorial is designed for beginners and intermediates, so let's get started.

Understanding the Basics 📝

React JS is a popular JavaScript library for building user interfaces. One of the key features of React is its ability to manipulate the DOM (Document Object Model) efficiently. In this lesson, we'll learn how to query and manipulate React elements.

What are React Elements?

In React, everything is a component, and components return React elements. A React element describes what the UI should look like. It's a simple JavaScript object that describes a component and its current properties.

javascript

const element = <h1>Hello, World!</h1>;

Querying React Elements 💡

Now that we understand what React elements are, let's learn how to query them. We'll use the ReactDOM and React libraries to interact with the DOM.

The `ReactDOM` Library

ReactDOM is a library that allows us to render React elements to the DOM. It provides a method called ReactDOM.findDOMNode() to query a React element.

javascript

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node);
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

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

In the above example, we're using componentDidMount() lifecycle method to find the DOM node of the component after it has been mounted to the DOM.

The `React` Library

Besides ReactDOM, we can also use the React library to query React elements. It provides a method called React.findAllByType() that returns all the React elements of a certain type.

javascript

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <MyOtherComponent />
      </div>
    );
  }
}

class MyOtherComponent extends React.Component {
  // ...
}

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

// Query all MyOtherComponent elements
const myOtherComponents = React.findAllByType(document.getElementById('root'), MyOtherComponent);
console.log(myOtherComponents);

In this example, we're using React.findAllByType() to find all instances of MyOtherComponent in the root DOM element.

Practical Example 💡

Let's create a simple example where we query a form and update its value.

javascript

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleInputChange = (event) => {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={this.handleInputChange} />
      </form>
    );
  }
}

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

// Query the form
const form = document.querySelector('form');

// Update the input value
form.querySelector('input').value = 'New Value';

In this example, we're creating a simple form with a single input field. We're using the useState hook to manage the form's value. After rendering the form, we're querying it using document.querySelector(). Finally, we're updating the input value directly in the DOM.

Quiz 💡

That's it for this lesson on Querying Elements in React JS! In the next lesson, we'll learn about managing state in React.

Stay tuned and happy coding! 🎉

Querying Elements in React JS 🎯

Querying Elements in React JS 🎯

Understanding the Basics 📝

What are React Elements?

Querying React Elements 💡

The ReactDOM Library

The React Library

Practical Example 💡

Quiz 💡

The `ReactDOM` Library

The `React` Library