[Introduction to React] Learn by creating a blog posting app! Fully understand the posting function by inputting forms

programming

I want to create a blog posting function using React, but I don't know how to handle form input or manage posts...
For those who have such concerns, this article will clearly explain "How to create a simple blog posting app with React."
Even for beginners,Form status management, post list display, and reset functionThis will allow you to implement it properly.
We will explain in detail using actual code, so please read to the end.

Build a blog posting app with React

Conclusion: Form input is the basis of state management

With React,Manage input in real timecan.
It is also easy to implement operations such as listing and deleting posted content.
This is the perfect app for learning basic React functions such as "useState" and "map".

What is React? Explained for beginners

Features of React and reasons to choose it

React was developed by MetaJavaScript libraries for building UIis.
Because it is composed of reusable parts (components), it is highly maintainable and has strong characteristics for dynamic apps.

Why React is great for forms apps

- Form input and output are reflected immediately
・Changes in values can be managed by state
・Modification (componentization) makes management easier

Configuring a simple blog posting app

List of required screens and functions

This app uses the following screen layout:

  • Posting form (title and text)
  • Post list display area
  • Delete/Reset button

State management and component decomposition

Give the "App" component a state,
Separate the form, post display, and delete button into separate components.

How to implement an input form

Manage form state with useState

1
);

The state of the title and body text is managed by useState.
When typing, write it like this:

1

Tips for handling input values together

1

How to display a list of posts

How to manage posts with arrays

The posted content is saved as an array.

1

Create a list display using the map function

1
2
3
4
5
6
  >
    
    
  
))}

Implementing post reset/deletion

How to make a reset button

1

To add the delete function

1

Design and Accessibility

Minimal CSS styling and key points

- Maintain form margins
・The post list is easy to read with dividing lines
Buttons should be clearly labeled

Web accessibility as seen through official data

Reference: https://www.soumu.go.jp/menu_news/s-news/01ryutsu02_02000169.html

Common errors and solutions

How to fix the Uncontrolled input error

A warning will be issued if the value and onChange are not set, so always specify a value.

What to do when the status is not updated

Please note that the value after setState is reflected asynchronously, so it will not be reflected immediately.

Practical code: The complete code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
;
 
   });
  
 
  
    
    
  };
 
  
    
     ;
    
     });
  };
 
  
    
    
  };
 
   (
    
      
      
        
          
          
          
          
        />
        
        
          
          
          
          
        />
        
        
         })}>
          
        
      
      
      
        
          
          
          
          
        
      ))}
    
  );
}
 

Summary: Understanding React with Post Forms

React BasicsState Management and Event HandlingPosting apps are very useful for learning.
By learning the entire process from form → posting → list display, you will be able to apply this knowledge to future developments.
As you gain some small successes, try your hand at things like "save functions" and "login functions" next!

Copied title and URL