Advanced Web Development: React, Node.js, and Modern Deployment Strategies

Advanced web development techniques including frameworks, APIs, and deployment strategies. Learn React, Node.js, and modern build tools for professional web application development.

Advanced Web Development

Take your web development skills to the next level with modern frameworks, API integration, and professional deployment practices.

1. React Development

// React functional component with hooks
import React, { useState, useEffect } from "react";

const UserDashboard = () => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetchUsers();
    }, []);

    const fetchUsers = async () => {
        try {
            const response = await fetch("/api/users");
            const data = await response.json();
            setUsers(data);
        } finally {
            setLoading(false);
        }
    };

    if (loading) return <div>Loading...</div>;

    return (
        <div className="dashboard">
            <h1>User Dashboard</h1>
            {users.map(user => (
                <UserCard key={user.id} user={user} />
            ))}
        </div>
    );
};

2. Node.js Backend

// Express.js API server
const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());
app.use(express.json());

// API routes
app.get("/api/users", async (req, res) => {
    try {
        const users = await User.findAll();
        res.json(users);
    } catch (error) {
        res.status(500).json({ error: "Server error" });
    }
});

app.post("/api/users", async (req, res) => {
    try {
        const user = await User.create(req.body);
        res.status(201).json(user);
    } catch (error) {
        res.status(400).json({ error: "Invalid data" });
    }
});

app.listen(3000, () => {
    console.log("Server running on port 3000");
});

3. Build Tools and Webpack

// webpack.config.js
const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
};

4. Deployment and CI/CD

# GitHub Actions deployment
name: Deploy to Production
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - run: npm ci
      - run: npm run build
      - run: npm test
      - name: Deploy to server
        run: rsync -avz dist/ user@server:/var/www/html/

Conclusion

Advanced web development involves mastering modern frameworks, build tools, and deployment strategies. These skills enable creation of scalable, maintainable web applications for production environments.