How to implement a frontend for ReactJS and MySQL application

Here, we are creating the frontend part of our React JS and MySQL Integration – CRUD App. We will begin by creating a new react app. To do so, type the following in the terminal:

npx create-react-app myappname

This will create a new React app with the default template. We need to do a little cleanup, i.e., remove the test files and everything from the App.js file, and write our own code.

In the App.js file, we will create a div with className="navbar" and another div with className="links". In the div links , we will define the two routes where we want our app to navigate. The default route or homepage is defined as:

<a href="/">Main Page</a>

The other route is going to be the /createpost route. We will define this as:

<a href="/createpost">Create Post</a>

To navigate to the above-mentioned links, we need to import react-router in our App.js file, as shown below:

import {BrowserRouter as Router, Route} from "react-router-dom"

We also need to define the router paths in a tag. The complete structure of our App.js file will look like this:

import React from 'react'
import {BrowserRouter as Router, Route} from "react-router-dom";
import './App.css'
import CreatePost from './pages/CreatePost';
import MainPage from './pages/MainPage';
import Post from './pages/Post'

const App = () => {
  return (
   <div>
     <div className="navbar">
      <div className="links"> 
      <a href="/">Main Page</a>
      <a href="/createpost">Create Post</a>
      </div>
      </div>
   <Router>
   <Route path="/" exact render={(props) => <MainPage />} />
   <Route path="/createpost" render={(props)=> <CreatePost />} />
   <Route path="/post/:postId" render={(props)=> <Post />}/>
     </Router>
    </div>
  )}
export default App;

We’ll define the Main Page route in the pages folder in the src folder --> MainPage.js file. Here, we’ll first display all the blog posts (since this is a simple blog app) using the map() method over the already created Posts. We will then use the Axios library to get and like the posts. To store the posts list, we will take help from the useState hook of React. We can then display the posts using the useEffect hook. The overall code of the MainPage.js file looks like this:

import React,{useState,useEffect} from 'react'
import Axios from 'axios'
import {useHistory} from 'react-router-dom'
import '../App.css'

function MainPage() {

const [postList,setPostList]=useState([]);

let history = useHistory();

useEffect(()=>{
Axios.get("http://localhost:3002/api/get").then((data)=>{
setPostList(data.data)
});
},[])

const LikePost = (id) => {
Axios.post(`http://localhost:3002/api/like/${id}`).then((response)=>{
alert("you liked a post")
})
}
return (

 <div className="MainPage">
     <div className="PostContainer">
       {postList.map((val,key)=>{
         return (
          <div className="Post" >
           <h1 className="post-title" onClick={()=>(history.push(`/post/${val.id}`))}>{val.title}</h1>
            <p>{val.post_text.length > 300 ? val.post_text.substring(0,300)+ " ..." : val.post_text}</p>
            <h4>{val.user_name}</h4>
<button className="like_btn" onClick={(() => LikePost(val.id))}>Like</button>

           <h5>Likes: {val.likes}</h5>
            </div>
           )  })}  
          </div>
        </div>
    )}

export default MainPage

Now, we can move on to creating a post. We will do this in the CreatePost.js file in the pages folder. Since we have three input fields, i.e., userName, title, and text, we will define three useState hooks to store the data. The code structure will look as shown below:

import React,{useState, useEffect} from 'react';
import Axios from 'axios'
import '../App.css'

function CreatePost() {

const [userName,setUserName] = useState("");
const [title,setTitle] = useState("");
const [text,setText] = useState("");

const submitPost = () => {
Axios.post('http://localhost:3002/api/create', {userName: userName, title: title, text:text})
}

    return (
        <div className="CreatePost">
            <div className="uploadPost">
                <label>Username: </label>
                <input type="text" onChange={(e)=> {
                    setUserName(e.target.value)
                }}/>
                <label>Title: </label>
                <input type="text" onChange={(e)=>{
                    setTitle(e.target.value)}}/>
       <label>Post Text</label>
       <textarea onChange={(e)=>{
           setText(e.target.value}}></textarea>
<button onClick={submitPost}>Submit Post</button>
         </div>
        </div>
    )}

export default CreatePost

We are now concluding our CRUD App. I know it’s been a little long, but I am sure it will teach you a great deal about React and help you diversify your knowledge. Below is the link to the GitHub repo where you can find the complete code: Github

Also, below is the link where you can find the backend part of this app: link

Happy coding, guys and have a great day!