Full-Stack CMS #7 Text Input – React.js/Express.js + Typescript and Chakra UI

In this tutorial, we will be creating a text input component using React.js and Express.js with the help of Typescript and Chakra UI. This will be part of a Full-Stack CMS (Content Management System) where users can input and manage text data.

Setting Up the Frontend

First, let’s start by setting up the frontend using React.js and Chakra UI for the styling. Create a new React project and install the necessary dependencies:


npx create-react-app my-cms
cd my-cms
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion


Next, create a new file for the text input component, for example, TextInput.tsx, and import the required Chakra UI components:


import { Input } from '@chakra-ui/react';


Then, create a functional component for the text input:


const TextInput = () => {
return (

);
}
export default TextInput;


Setting Up the Backend

Now, let’s move on to setting up the backend using Express.js with Typescript. Create a new Express project and install the necessary dependencies:


npm init -y
npm install express typescript @types/express


Create a new file for the server, for example, server.ts, and import the required Express modules:


import express, { Request, Response } from 'express';
const app = express();
const port = 3000;
app.use(express.json());


Next, create a POST endpoint for saving text data:


app.post('/text', (req: Request, res: Response) => {
const { text } = req.body;
// Save text to database or perform any desired action
res.send('Text saved successfully');
});


Connecting Frontend and Backend

Finally, we need to connect the text input component to the backend server. In the React component, make a POST request to the server when the user inputs text:


import React, { useState } from 'react';
import { Input } from '@chakra-ui/react';
const TextInput = () => {
const [inputText, setInputText] = useState('');
const handleInputChange = (e: React.ChangeEvent) => {
setInputText(e.target.value);
};
const saveText = async () => {
await fetch('http://localhost:3000/text', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: inputText }),
});
};
return (

);
};
export default TextInput;


Conclusion

With the text input component in place, users can now input text and have it saved to the backend server. This is just a small part of building a Full-Stack CMS, but it demonstrates the integration of React.js/Express.js with Typescript and Chakra UI to create a functional text input feature.