"Getting Comfortable with React through Building a Yoga Pose Library"

Getting Comfortable with React through Building a Yoga Pose Library

I wanted to get more comfortable using React and to understand the basics of its implementation beyond watching YouTube tutorials and reading React documentation, so I decided to build a very simple app and see what happened. My goal was to understand both the big picture of how React works and, more specifically, how to use React components, state, props, and event handling by building a Yoga Pose Library. Here is what I found.

Big Picture: What is React?

React is a JavaScript library that is used to render user interfaces, or UIs. The UI is broken down into smaller independent pieces, called components, that can be used repeatedly. Some commonly used components are buttons and navigation bars. With React, we can manage our components’ state, or data, and we can handle user interactions. My goal with the yoga app was to create a simple yet functional interface that lets users choose yoga poses and read their descriptions and Sanskrit names.

Components: The Building Blocks of React

The first concept I tackled was components. In React, components are the fundamental units that make up an application. They encapsulate both structure (HTML) and behavior (JavaScript).

I started with the main component, App, which renders the title and includes the ChooseYourPose component:

import React from "react"; 
import ChooseYourPose from "./components/ChooseYourPose";

class App extends React.Component { 
  render() { 
    return ( 
      <div>
        <h1>Yoga Pose Library</h1> 
        <ChooseYourPose /> 
      </div> 
    ); 
  } 
} 

export default App;

Next, I created the ChooseYourPose component, which allows users to select a yoga pose. This component also manages its state to track the chosen pose:

class ChooseYourPose extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      chosenPose: null, 
    }; 
  } 

  handleChoosePose(pose) { 
    this.setState({ chosenPose: pose }); 
} 

render() { 
  const poses = ["Child's Pose", "Downward Dog", "Half Pigeon Pose", "Corpse Pose"]; 

  return ( 
    <div> 
      <h2>Choose a Yoga Pose</h2> 
      <ul> 
      {poses.map((pose, index) => ( 
        <li key={index} onClick={() => this.handleChoosePose(pose)}> 
              {pose} 
        </li> 
      ))} 
      </ul> 
        {this.state.chosenPose && ( 
          <PoseDescription pose={this.state.chosenPose} /> 

        )} 
    </div> 
  ); 
 } 
}

Finally, I built the PoseDescription component to display the name and description of the selected pose:

class PoseDescription extends React.Component { 
  render() { 
    const { pose } = this.props; 
    const descriptions = { 
      "Child's Pose": "Balasana - relaxing floor pose, stretches ankles, thighs and hips", 
      "Downward Dog": "Adho Mukha Savasana - resting posture, great for hamstrings and shoulders", // ... };

By breaking down the application into these components, I made it modular and reusable, so that I can maintain and extend it in the future. ## State: Keeping Track of Data Next, I learned about state, which is important for managing dynamic data in React applications. State allows components to respond to user inputs and change their output without needing to reload the entire page. In the ChooseYourPose component, I defined a state variable called chosenPose. When a user clicks on a pose, this state variable updates to reflect the selection. This is how I implemented state management:

 handleChoosePose(pose) { this.setState({ chosenPose: pose }); }

By using state, I was able to conditionally render the PoseDescription component, showing the description only when a pose is chosen. This made the app interactive and user-friendly. ## Event Handling: Responding to User Actions Event handling is another essential aspect of React. It enables components to respond to user actions like clicks, keystrokes, and mouse movements. In my app, I implemented event handling through the onClick handler in the ChooseYourPose component. When a user clicks on a yoga pose, the handleChoosePose function is triggered, updating the state with the selected pose, as you can see in the following code snippet:

<li key={index} onClick={() => this.handleChoosePose(pose)}> {pose} </li>

## Props: Passing Data Between Components Props, or properties, are a vital feature in React that allow for communication between components. They facilitate data flow from a parent component to child components, making them more dynamic and reusable. In my app, the PoseDescription component receives the chosen pose as a prop from ChooseYourPose. This enables PoseDescription to display the appropriate information based on the user’s selection:

<PoseDescription pose={this.state.chosenPose} />

Conclusion: What I Learned

Building the Yoga Pose Library was a big step in my journey to understanding React. Through hands-on experience with using components, state, event handling, and props, I learned how to create a dynamic user interface that responds to user interactions. I now have a solid foundation on which to build more complex applications in the future.

As I continue to develop my skills, I look forward to going deeper into React's capabilities and exploring advanced concepts. This project has sparked my enthusiasm for building React apps and given me the confidence to take on more challenging projects.

Sources - React Documentation - W3Schools - What is React? - GeeksforGeeks - React Tutorial - Pocket Yoga - Yoga Poses