Simple React JS and MySQL Integration -- CRUD App (Frontend)

#react #database #beginners

So, here we are creating the frontend part of our React JS and MySQL Integration -- CRUD App and we will begin by creating a new react app by typing in npx create-react-app myappname in the terminal.

This will create a new react app with the default template and now we need to do a little cleanup i-e remove the test files and also remove everything from App.js file and write our own code.

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

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

The other route is going to be /createpost route which we will define as:

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

In order to navigate to the above mentioned links, we need to import react-router in our App.js file as follows:

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

Also, we need to define the router paths in a tag.
The complete structure of our App.js file will look like this now:

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;

Now, we'll define the Main Page route in 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) by using map method over the already created Posts and using the Axios library to get the posts and also like the posts. To store the posts list, we will take help from the useState hook of react and display the posts using the useEffect hook, the overall code of 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 move on to creating a post, this we will do in the CreatePost.js file in the pages folder.Since, we have three input fields i-e userName, title and text so we will define three useState hooks to store the data, the code structure will look like this:

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

Here, we come to the conclusion of 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 will help you diversify your knowledge.
Below is the link of github repo where you can find complete code:
https://github.com/NasreenKhalid/React-nd-MySQL-CRUD-App

Also, below is the link where you can find the backend part of this app:
https://dev.to/nasreenkhalid/simple-react-js-and-mysql-integration-crud-app-backend-5aom

Happy coding guys and have a great day!