M メモ

Understanding the Basics of React

React is a popular JavaScript library for building user interfaces. It allows developers to create large web applications that can update and render efficiently in response to data changes.

Why Choose React?

React’s component-based architecture makes it easy to create reusable UI components. This is especially useful for large-scale applications where maintainability and scalability are crucial.

Component Structure

React components are the building blocks of any React application. They can be functional or class-based, and they manage their own state and lifecycle.

Here is an example of a simple React component:

      <div>
        <h1>Hello, world!</h1>
      </div>
    

JSX Syntax

JSX is a syntax extension for JavaScript that looks similar to HTML. It is used with React to describe what the UI should look like.

For example, the following JSX code renders a heading and a paragraph:

      const element = (
        <div>
          <h2>Welcome to React</h2>
          <p>This is a JSX example.</p>
        </div>
      );
    

State and Props

State and props are the two main concepts in React for managing data within components. State is managed within the component, while props are passed from parent to child components.

Using State

State allows a component to manage its own data. For example, you can use state to keep track of user input:

      class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          this.state = { inputValue: '' };
        }
        handleChange = (event) => {
          this.setState({ inputValue: event.target.value });
        }
        render() {
          return (
            <div>
              <input type="text" onChange={this.handleChange} />
              <p>You typed: {this.state.inputValue}</p>
            </div>
          );
        }
      }
    

Passing Props

Props are used to pass data from a parent component to a child component. Here’s an example:

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

In the above example, the Greeting component receives a prop called name and uses it to display a greeting message.