0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Spring Boot + Reactでアプリを作成してみた【Social Networking App】

Last updated at Posted at 2024-05-31

Technologies used

  • React
  • Axios
  • Redux
  • PostgreSQL
  • SpringBoot

Creating new Spring Boot Project

①プロジェクトを作成する

Maven

Group: codingtechniques
Artifact: social_app
Name : social_app
Description: Social Networking App
Package name: condigtechniques

jar
Java 17

MySQL Driver
Spring Boot Dev Tools
Spring Data JPA
Spring Web

②src/main/java/condigtechniquesにmodelフォルダとPost.javaを作成する

③src/main/java/condigtechniques.modelにComment.javaを作成する

④src/main/java/condigtechniquesにrepositoryフォルダと
PostRepository.javaを作成する

⑤src/main/java/condigtechniquesにcontrollerフォルダとSocialAppController.javaを作成する

⑥src/main/resources/application.propertiesを編集する

Creating new React App for Social Networking Application
Creating First Component Post and PostBox
Setting Redux for Our Application
Making Rest API Call with Axios (Fetching and Displaying data from database to our PostBox)
Adding Create Post Component
Storing Create Post Data to Redux Store and MySQL Database
Creating Reaction Component (Like, Unlike and Comment)
Rest API for Post Like and Unlike
Front end Implementation for post Like
Front end Implementation for post Unlike
Adding onClick event to our like and unlike and displaying counter (update)
Using React Router to navigate around Post
Single Post Implementation (Post and Reactions)
Adding Create Comment and Comment Component
Rest API for Comment and Displaying Comment

参考サイト

Spring Boot and React JS Social Networking App Full Course [NEW]

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?