20. Building a Full-Stack Project: Part 2

Lokesh Chaudhari
3 min readJun 28, 2024

--

Developing the Frontend with React

Step 1: Create a New React Application

  1. Open your terminal and create a new React project using Create React App:
npx create-react-app task-manager-client
cd task-manager-client

Step 2: Install Axios for HTTP Requests

  1. Install Axios:
npm install axios

Step 3: Create Components

  1. Create a components folder in the src directory.
  2. Create TaskList.js:
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const TaskList = () => {
const [tasks, setTasks] = useState([]);

useEffect(() => {
axios.get('https://localhost:5001/api/tasks')
.then(response => setTasks(response.data))
.catch(error => console.error(error));
}, []);

return (
<div>
<h1>Task List</h1>
<ul>
{tasks.map(task => (
<li key={task.id}>{task.title}</li>
))}
</ul>
</div>
);
};

export default TaskList;

3. Create TaskForm.js:

import React, { useState } from 'react';
import axios from 'axios';

const TaskForm = () => {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
const newTask = { title, description, isCompleted: false, dueDate: new Date() };

axios.post('https://localhost:5001/api/tasks', newTask)
.then(response => {
console.log(response.data);
setTitle('');
setDescription('');
})
.catch(error => console.error(error));
};

return (
<form onSubmit={handleSubmit}>
<div>
<label>Title:</label>
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
</div>
<div>
<label>Description:</label>
<input type="text" value={description} onChange={(e) => setDescription(e.target.value)} required />
</div>
<button type="submit">Add Task</button>
</form>
);
};

export default TaskForm;

4. Create App.js:

import React from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';

function App() {
return (
<div className="App">
<TaskForm />
<TaskList />
</div>
);
}

export default App;

Step 4: Running the React Application

  1. Start the React Application:
npm start

Step 5: Integrating Frontend and Backend

  1. Run both the React and .NET applications.
  2. Ensure the API is running on https://localhost:5001 and React app on http://localhost:3000.

Conclusion of Part 2

We’ve built a simple full-stack application with a React frontend and a .NET Core backend using MySQL. The React application interacts with the API to create and retrieve tasks, storing them in a MySQL database. This setup covers basic CRUD operations and demonstrates the integration between frontend and backend.

Final Touches and Deployment

  1. Deployment Options:
  • Deploy the React app using services like Netlify or Vercel.
  • Host the .NET API on cloud services like Azure.

2. Configure CI/CD Pipelines to automate the deployment process.

By following these steps, you have a complete guide to building a simple full-stack project using React and .NET Core with MySQL. This guide ensures that the project is well-structured, easy to understand, and covers essential aspects of web development.

More from this Series

This blog is part of my series “Building Dynamic Web Apps: React and .NET Unleashed”. If you found this helpful, be sure to check out the other posts in the series:

--

--