{"id":32911,"date":"2024-11-01T09:12:25","date_gmt":"2024-11-01T09:12:25","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32911"},"modified":"2024-11-01T11:21:30","modified_gmt":"2024-11-01T11:21:30","slug":"react-course-diary-app-example-implementing-the-home-page","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32911\/","title":{"rendered":"React Course: Diary App Example, Implementing the Home Page"},"content":{"rendered":"

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\u2019s component structure, state management, and routing.<\/p>\n

1. Basic Concepts of React<\/h2>\n

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.<\/p>\n

1.1 JSX<\/h3>\n

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.<\/p>\n

const element = <h1>Hello, React!<\/h1>;<\/code><\/pre>\n
1.2 Components<\/h3>\n
The basic building blocks of React are components. Components can be divided into functional components and class components. We will mostly use functional components.<\/p>\n
function Greeting(props) {\n  return <h1>Hello, {props.name}!<\/h1>;\n}<\/code><\/pre>\n
1.3 Props and State<\/h3>\n
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.<\/p>\n
class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  render() {\n    return <h1>Current Count: {this.state.count}<\/h1>;\n  }\n}<\/code><\/pre>\n
1.4 Lifecycle<\/h3>\n
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.<\/p>\n
2. Designing the Diary App<\/h2>\n
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.<\/p>\n
2.1 App Structure<\/h3>\n
The diary app can be divided into the following components:<\/p>\n
    \n
  • Home: A screen that includes the diary list and a button to add a new entry<\/li>\n
  • DiaryEntry: A component that displays each diary item<\/li>\n
  • AddEntry: A component that includes a form to write a new diary<\/li>\n<\/ul>\n
    3. Implementing the Home Page<\/h2>\n
    Now let\u2019s 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.<\/p>\n
    3.1 Home Component<\/h3>\n
    import React, { useState } from 'react';\nimport DiaryEntry from '.\/DiaryEntry';\nimport AddEntry from '.\/AddEntry';\n\nfunction Home() {\n  const [entries, setEntries] = useState([]);\n\n  const addEntry = (entry) => {\n    setEntries([...entries, entry]);\n  };\n\n  return (\n    <div>\n      <h1>My Diary<\/h1>\n      <AddEntry onAdd={addEntry} \/>\n      <ul>\n        {entries.map((entry, index) => (\n          <DiaryEntry key={index} entry={entry} \/>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default Home;<\/code><\/pre>\n
    3.2 DiaryEntry Component<\/h3>\n
    import React from 'react';\n\nfunction DiaryEntry({ entry }) {\n  return (\n    <li>\n      <h2>{entry.title}<\/h2>\n      <p>{entry.content}<\/p>\n    <\/li>\n  );\n}\n\nexport default DiaryEntry;<\/code><\/pre>\n
    3.3 AddEntry Component<\/h3>\n
    import React, { useState } from 'react';\n\nfunction AddEntry({ onAdd }) {\n  const [title, setTitle] = useState('');\n  const [content, setContent] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    onAdd({ title, content });\n    setTitle('');\n    setContent('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input \n        type=\"text\" \n        value={title} \n        onChange={(e) => setTitle(e.target.value)} \n        placeholder=\"Title\" \n      \/>\n      <textarea \n        value={content} \n        onChange={(e) => setContent(e.target.value)} \n        placeholder=\"Diary Content\" \n      \/>\n      <button type=\"submit\">Add Diary<\/button>\n    <\/form>\n  );\n}\n\nexport default AddEntry;<\/code><\/pre>\n
    4. Complete App Code<\/h2>\n
    Now, let\u2019s assemble all the components to build the complete app. We will create an index.js file under the src directory.<\/p>\n
    import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport Home from '.\/Home';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<Home \/>);<\/code><\/pre>\n
    5. Conclusion<\/h2>\n
    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!<\/p>\n
    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!<\/p>\n