React Course: Diary App Example, Implementing the Home Page

React is a library widely used for building dynamic user interfaces. In this course, we will explore the basic concepts of React by creating a diary app. Along the way, we will also implement the Home page. The Home page will be the main screen where users can access the diary and write new entries. In this article, you will learn various techniques, including React’s component structure, state management, and routing.

1. Basic Concepts of React

React is a component-based library with user-defined components. Components are independent pieces of the UI, and each component can have state and props. In this course, we will cover key concepts of React, including JSX, components, props, state, and lifecycle.

1.1 JSX

JSX stands for JavaScript XML and allows you to include HTML-like syntax within your JavaScript code. Using JSX makes it intuitive to write UI components. JSX is converted to JavaScript objects during compilation.

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

1.2 Components

The basic building blocks of React are components. Components can be divided into functional components and class components. We will mostly use functional components.

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

1.3 Props and State

Props are read-only data passed to components. On the other hand, state is mutable data managed within a component, directly affecting the UI when it changes.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <h1>Current Count: {this.state.count}</h1>;
  }
}

1.4 Lifecycle

React components have a lifecycle, and through this lifecycle, you can manage the creation, updating, and removal of components. Key lifecycle methods include componentDidMount, componentDidUpdate, and componentWillUnmount.

2. Designing the Diary App

Now, let’s start designing the diary app. The diary app should have features that allow users to write, edit, and delete diary entries. Additionally, users should be able to view their entries in a list format.

2.1 App Structure

The diary app can be divided into the following components:

• Home: A screen that includes the diary list and a button to add a new entry
• DiaryEntry: A component that displays each diary item
• AddEntry: A component that includes a form to write a new diary

3. Implementing the Home Page

Now let’s implement the Home page. The Home page will include the diary list and a button to add a new diary entry. For this, we will create two components: the Home component and the DiaryEntry component.

3.1 Home Component

import React, { useState } from 'react';
import DiaryEntry from './DiaryEntry';
import AddEntry from './AddEntry';

function Home() {
  const [entries, setEntries] = useState([]);

  const addEntry = (entry) => {
    setEntries([...entries, entry]);
  };

  return (
    <div>
      <h1>My Diary</h1>
      <AddEntry onAdd={addEntry} />
      <ul>
        {entries.map((entry, index) => (
          <DiaryEntry key={index} entry={entry} />
        ))}
      </ul>
    </div>
  );
}

export default Home;

3.2 DiaryEntry Component

import React from 'react';

function DiaryEntry({ entry }) {
  return (
    <li>
      <h2>{entry.title}</h2>
      <p>{entry.content}</p>
    </li>
  );
}

export default DiaryEntry;

3.3 AddEntry Component

import React, { useState } from 'react';

function AddEntry({ onAdd }) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd({ title, content });
    setTitle('');
    setContent('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={title} 
        onChange={(e) => setTitle(e.target.value)} 
        placeholder="Title" 
      />
      <textarea 
        value={content} 
        onChange={(e) => setContent(e.target.value)} 
        placeholder="Diary Content" 
      />
      <button type="submit">Add Diary</button>
    </form>
  );
}

export default AddEntry;

4. Complete App Code

Now, let’s assemble all the components to build the complete app. We will create an index.js file under the src directory.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Home from './Home';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

5. Conclusion

In this React course, we learned the basic concepts of React and component-based design through the diary app. By implementing the Home page, we also gained an understanding of state management and how to pass props. Remember that React allows you to easily create user-friendly UIs!

Continue to explore advanced concepts of React by adding more features. Incorporating functionalities such as routing to other pages and saving/loading data will create a more complete app. Thank you!