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

<\/p>\n

\n
\n

Author: [Author Name] | Date: [Date]<\/p>\n<\/header>\n

\n

Introduction<\/h2>\n

React is a JavaScript library for building user interfaces. In this tutorial, we will cover the process of creating a diary app using React. We will implement the app’s “New” page, where users can create and save a new diary entry. This tutorial will provide detailed explanations of the basic concepts of React, including component design, state management, and event handling.<\/p>\n<\/section>\n

\n

Prerequisites<\/h2>\n

To follow this tutorial, you will need the following prior knowledge:<\/p>\n

    \n
  • Basic understanding of HTML and CSS<\/li>\n
  • Basic syntax of JavaScript<\/li>\n
  • Basic concepts of React (components, props, state, etc.)<\/li>\n<\/ul>\n

    Additionally, you must have Node.js and npm installed, and know how to start a project using create-react-app.<\/p>\n<\/section>\n

    \n

    Setting Up the Project<\/h2>\n

    First, create a new React project. Open your terminal and enter the following command to create a project using create-react-app:<\/p>\n

    npx create-react-app diary-app<\/code><\/pre>\n
    Once the project is created, navigate to the folder and run the development server:<\/p>\n
    cd diary-app\nnpm start<\/code><\/pre>\n
    Your basic React app should now be running. Next, we will install the necessary dependencies. Since we will be using React Router, enter the following command to install it:<\/p>\n
    npm install react-router-dom<\/code><\/pre>\n<\/section>\n
    \n
    Setting Up the Router<\/h2>\n
    To set up the router, open the src\/App.js<\/code> file and add the following code:<\/p>\n
    import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport NewEntry from '.\/components\/NewEntry';\n\nfunction App() {\n    return (\n        \n            \n                <\/Route>\n                <\/Route>\n            <\/Switch>\n        <\/Router>\n    );\n}\n\nexport default App;<\/code><\/pre>\n
    In the code above, we defined two routes. The Home<\/code> component is rendered at the ‘\/’ path, and the NewEntry<\/code> component is rendered at the ‘\/new’ path.<\/p>\n<\/section>\n
    \n
    Creating the NewEntry Component<\/h2>\n
    Now, to implement the page for writing a new diary entry, create the src\/components\/NewEntry.js<\/code> file and write the following code:<\/p>\n
    import React, { useState } from 'react';\n\nfunction NewEntry() {\n    const [title, setTitle] = useState('');\n    const [content, setContent] = useState('');\n\n    const handleSubmit = (e) => {\n        e.preventDefault();\n        \/\/ Add diary saving logic here\n        console.log('Title:', title);\n        console.log('Content:', content);\n    };\n\n    return (\n        
    \n            
    Create New Diary Entry<\/h2>\n            
    \n                
    \n