To create a new React project and connect it to the provided API, follow the steps below: ## 1. Create a New React Project You can use create-react-app for this: ``` npx create-react-app rapidapi-demo cd rapidapi-demo ``` ## 2. Install Axios Axios is a great choice for making HTTP requests, so you'll need to install it: ``` npm install axios ``` ## 3. Create an API Utility Function You can create a utility function in a separate file to handle API requests. For this example, let's create a file named api.js inside the src folder: ``` src/api.js: import axios from 'axios'; export const moderateText = async (text) => { const options = { method: 'POST', url: 'https://text-moderation-api.p.rapidapi.com/text/moderation/2e7b23d3eb7fd3a4e6060184298673a5', headers: { 'content-type': 'application/json', 'X-RapidAPI-Key': 'YOUR_API_KEY_HERE', 'X-RapidAPI-Host': 'text-moderation-api.p.rapidapi.com' }, data: { text: text, language: 'en' } }; try { const response = await axios.request(options); return response.data; } catch (error) { console.error("API error:", error); throw error; } }; ``` Note: Always avoid hardcoding API keys directly in your source code. Consider storing them in environment variables or some secure way to keep them secret. ## 4. Connect with React Now, let's use the API utility function in a React component. ``` src/App.js: import React, { useState } from 'react'; import { moderateText } from './api'; function App() { const [text, setText] = useState(''); const [result, setResult] = useState(null); const handleTextChange = (event) => { setText(event.target.value); } const handleSubmit = async () => { try { const moderationResult = await moderateText(text); setResult(moderationResult); } catch (error) { console.error("Failed to moderate text:", error); } } return (

Text Moderation with RapidAPI

<textarea value={text} onChange={handleTextChange}></textarea> <button onClick={handleSubmit}>Moderate Text</button> {result && (

Result:

{JSON.stringify(result, null, 2)}

)}

); } export default App; ``` This basic example allows users to input some text, sends it for moderation, and then displays the result. ## 5. Start the React App Now you can run your app: ``` npm start ``` Open your browser to http://localhost:3000/, and you should see your new React app connected to the RapidAPI endpoint. Remember always to handle your API keys securely and avoid sharing them openly. In a production app, you'd also want to add error handling, loading indicators, and perhaps user feedback. ## 6. Let's make a better design Let's improve the user interface by displaying the results in a more user-friendly format. We'll display each item label along with its likelihood in a styled component. Styling: Let's add some styles. You can place these styles at the top of your App.js file or in a separate CSS file. ``` .results-container { padding: 20px; border: 1px solid #ddd; border-radius: 5px; margin-top: 20px; } .result-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; } .result-label { font-weight: bold; } .result-likelihood { font-style: italic; } ``` Displaying Results: Update the way you display results in the component. Here's a modification to the App component in src/App.js: ``` // ... (other imports) import './App.css'; // If you placed the CSS in App.css function App() { // ... (other useState and functions) return (

Text Moderation with RapidAPI

<textarea value={text} onChange={handleTextChange}></textarea> <button onClick={handleSubmit}>Moderate Text</button> {result && (

Moderation Results:

{result.microsoft.items.map((item, index) => (

{item.label} Likelihood: {item.likelihood}

))}

)}

); } export default App; ``` Now, instead of displaying raw JSON, the application will show each label and its likelihood in a structured and styled manner. This should be more appealing and user-friendly. You can further enhance the design by adding colors, icons, or other visual cues to represent different levels of likelihood, etc.