2. Using Snoowrap (Reddit API Wrapper)
bashnpm install snoowrap
javascriptconst snoowrap = require('snoowrap');

const reddit = new snoowrap({
  userAgent: 'YourApp/1.0.0',
  clientId: process.env.REDDIT_CLIENT_ID,
  clientSecret: process.env.REDDIT_CLIENT_SECRET,
  username: process.env.REDDIT_USERNAME,
  password: process.env.REDDIT_PASSWORD
});

app.get('/api/reddit/user/:username/posts', async (req, res) => {
  try {
    const { username } = req.params;
    const user = reddit.getUser(username);
    const submissions = await user.getSubmissions({ limit: 40 });
    res.json(submissions);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch posts' });
  }
});
React Hook for Reddit Posts
javascript// hooks/useRedditPosts.js
import { useState, useEffect } from 'react';

export const useRedditPosts = (username, limit = 40) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!username) return;

    const fetchPosts = async () => {
      setLoading(true);
      setError(null);
      
      try {
        // Call your backend API
        const response = await fetch(`/api/reddit/user/${username}/posts`);
        if (!response.ok) throw new Error('Failed to fetch');
        
        const data = await response.json();
        setPosts(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, [username, limit]);

  return { posts, loading, error };
};
CORS Considerations
If calling Reddit's API directly from React, you might encounter CORS issues. Solutions:
1. Proxy in package.json (Development)
json{
  "name": "your-app",
  "proxy": "https://www.reddit.com",
  "dependencies": {
    // ...
  }
}
2. Backend Proxy (Recommended for Production)
Use your Node.js backend as a proxy to avoid CORS issues and add your own rate limiting/caching.
Complete Example Component
javascript// components/RedditPosts.jsx
import React from 'react';
import { useRedditPosts } from '../hooks/useRedditPosts';

const RedditPosts = ({ username }) => {
  const { posts, loading, error } = useRedditPosts(username);

  if (loading) return <div>Loading posts...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h2>Latest Posts from u/{username}</h2>
      {posts.map(post => (
        <div key={post.id} className="post">
          <h3>{post.title}</h3>
          <p>Score: {post.score} | Comments: {post.num_comments}</p>
          <p>Subreddit: r/{post.subreddit}</p>
          <a href={`https://reddit.com${post.permalink}`} target="_blank" rel="noopener noreferrer">
            View on Reddit
          </a>
        </div>
      ))}
    </div>
  );
};

export default RedditPosts;
Environment Variables
bash# .env
REDDIT_CLIENT_ID=your_client_id
REDDIT_CLIENT_SECRET=your_client_secret
REDDIT_USERNAME=your_bot_username
REDDIT_PASSWORD=your_bot_password
Recommended Approach
For a Node/React app, I recommend:

Backend proxy approach for production (better rate limiting, caching, error handling)
Direct frontend calls for development/prototyping
Snoowrap if you need authenticated features or better error handling

The backend proxy approach gives you more control and avoids CORS issues while keeping your API keys secure.