20. Building a Full-Stack Project: Part 2
Developing the Frontend with React
Step 1: Create a New React Application
- 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
- Install Axios:
npm install axios
Step 3: Create Components
- Create a
components
folder in thesrc
directory. - 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
- Start the React Application:
npm start
Step 5: Integrating Frontend and Backend
- Run both the React and .NET applications.
- Ensure the API is running on
https://localhost:5001
and React app onhttp://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
- 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: