React Cheat Sheet - Java

React is a widely used JavaScript library for building user interfaces. It allows developers to create components that can be reused across multiple pages, making it a great choice for building large applications. In this cheat sheet, we will cover the basics of React with Java.

Creating a React Component

To create a React component, you will need to define a class that extends React.Component. Here's an example:

import React from 'react';

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

In the example above, we're creating a component called MyApp that renders an <h1> element with the text "Hello, World!". The render() function is required for all React components and must return a JSX element. In this case, we're returning a <div> with the <h1> inside.

Rendering a React Component

Once you've created a component, you can render it in the DOM using ReactDOM. Here's an example:

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

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

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

In the code above, we're rendering the MyApp component inside a div with the id of "root" using the ReactDOM render() method.

Handling Events in React Components

To handle events in React components, you can add event handlers as methods on the component class. Here's an example:

import React from 'react';

class MyButton extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

In the example above, we're creating a component called MyButton that has a handleClick() method that logs "Button clicked!" to the console when the button is clicked. The onClick attribute on the <button> element is set to the handleClick() method.

Using Props in React Components

Props are a way to pass data from a parent component to a child component. Here's an example of how to use props in a component:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.text}</p>
      </div>
    );
  }
}

In the example above, we're creating a component called MyComponent that uses two props: title and text. These props are specified when the component is rendered:

<MyComponent title="My Title" text="Lorem Ipsum" />

When the component is rendered, the title prop will be displayed in an <h1> element and the text prop will be displayed in a <p> element.

Using State in React Components

State is used to manage the internal state of a component. Here's an example of how to use state in a component:

import React from 'react';

class MyCounter extends React.Component {
  state = {
    count: 0
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

In the example above, we're creating a component called MyCounter that has a count property in its state. When the button is clicked, the handleClick() method is executed and the count value is updated using the setState() method. The updated value is then displayed in a <p> element.

Conclusion

React is a powerful library that can make building user interfaces with Java simple and efficient. By using the examples and tips in this cheat sheet, you'll be well on your way to creating great-looking and functional web applications.