{"id":44101771,"url":"https://github.com/codemeasandwich/mcms","last_synced_at":"2026-02-08T14:25:07.137Z","repository":{"id":334985805,"uuid":"1142159765","full_name":"codemeasandwich/mcms","owner":"codemeasandwich","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-27T21:51:39.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"step4","last_synced_at":"2026-01-28T09:07:58.984Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codemeasandwich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-26T02:57:22.000Z","updated_at":"2026-01-27T21:38:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/codemeasandwich/mcms","commit_stats":null,"previous_names":["codemeasandwich/mcms"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/codemeasandwich/mcms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemeasandwich%2Fmcms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemeasandwich%2Fmcms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemeasandwich%2Fmcms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemeasandwich%2Fmcms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemeasandwich","download_url":"https://codeload.github.com/codemeasandwich/mcms/tar.gz/refs/heads/step4","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemeasandwich%2Fmcms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29232956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T14:18:14.570Z","status":"ssl_error","status_checked_at":"2026-02-08T14:18:14.071Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-08T14:25:06.537Z","updated_at":"2026-02-08T14:25:07.125Z","avatar_url":"https://github.com/codemeasandwich.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Chat Client\n\nA step-by-step guide to setting up a React chat client from scratch with hot-reloading enabled. By the end of this tutorial, you'll have a working React app that updates instantly when you change code - no page refresh needed.\n\n## What You'll Build\n\nA React chat client application. More importantly, you'll understand:\n- How React applications are structured\n- What Webpack does and why we need it\n- How Babel transforms JSX into browser-compatible JavaScript\n- How hot-reloading works to speed up development\n\n## Prerequisites\n\nBefore starting, make sure you have:\n- **Node.js** (v18 or higher) - [Download here](https://nodejs.org/)\n- **npm** (comes with Node.js)\n- **A code editor** (VS Code recommended)\n- **Basic terminal/command line knowledge**\n\nVerify your installation:\n```bash\nnode --version   # Should show v18.x.x or higher\nnpm --version    # Should show 9.x.x or higher\n```\n\n---\n\n## Step 1: Initialize npm Project\n\nInitialize a new npm project:\n\n```bash\nnpm init -y\n```\n\n**What this does:**\n- Creates a `package.json` file in your project folder\n- The `-y` flag accepts all default settings (you can edit them later)\n\n**What is package.json?**\nThis file is the \"manifest\" of your project. It contains:\n- Project name, version, and description\n- List of dependencies your project needs\n- Scripts to run common tasks (like starting the dev server)\n\n---\n\n## Step 2: Install Dependencies\n\nInstall all the packages we need:\n\n```bash\nnpm install react react-dom\nnpm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader\n```\n\nLet's break down what each package does:\n\n### Runtime Dependencies (needed in production)\n| Package | Purpose |\n|---------|---------|\n| `react` | The core React library for building UI components |\n| `react-dom` | Connects React to the browser's DOM (Document Object Model) |\n\n### Development Dependencies (only needed during development)\n| Package | Purpose |\n|---------|---------|\n| `webpack` | Bundles all your JavaScript files into one optimized file |\n| `webpack-cli` | Allows running Webpack from the command line |\n| `webpack-dev-server` | Development server with hot-reloading support |\n| `html-webpack-plugin` | Automatically injects your bundled JS into HTML |\n| `@babel/core` | The core Babel compiler |\n| `@babel/preset-env` | Converts modern JavaScript to browser-compatible code |\n| `@babel/preset-react` | Converts JSX syntax to regular JavaScript |\n| `babel-loader` | Connects Babel to Webpack |\n\n---\n\n## Step 3: Create Webpack Configuration\n\nCreate a file named `webpack.config.js` in your project root:\n\n```javascript\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  // Entry point: where Webpack starts building the dependency graph\n  // This is the first file that gets executed when your app loads\n  entry: './src/index.js',\n\n  // Output: where Webpack puts the bundled files\n  output: {\n    path: path.resolve(__dirname, 'dist'),  // Output directory (absolute path)\n    filename: 'bundle.js',                   // Name of the bundled file\n    clean: true,                             // Clean the dist folder before each build\n  },\n\n  // Mode: 'development' enables useful dev features like better error messages\n  // Use 'production' when building for deployment (enables minification)\n  mode: 'development',\n\n  // Module rules: tell Webpack how to handle different file types\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/,        // Apply this rule to .js and .jsx files\n        exclude: /node_modules/,    // Don't process files in node_modules\n        use: {\n          loader: 'babel-loader',   // Use Babel to transform these files\n        },\n      },\n    ],\n  },\n\n  // Resolve: configure how Webpack resolves module imports\n  resolve: {\n    extensions: ['.js', '.jsx'],    // Allow importing without file extensions\n  },\n\n  // Plugins: extend Webpack's functionality\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './public/index.html',  // Use our HTML file as a template\n    }),\n  ],\n\n  // DevServer: configuration for the development server\n  devServer: {\n    static: {\n      directory: path.join(__dirname, 'public'),  // Serve static files from public/\n    },\n    port: 3000,           // Run on port 3000\n    open: true,           // Automatically open browser when server starts\n    hot: true,            // Enable Hot Module Replacement (HMR)\n    historyApiFallback: true,  // Support for single-page app routing\n  },\n};\n```\n\n**What is Webpack?**\nThink of Webpack as a factory that takes all your separate JavaScript files, CSS, images, etc., and packages them into optimized bundles that browsers can efficiently load. Without a bundler, you'd have to manually manage dozens of `\u003cscript\u003e` tags in your HTML.\n\n**What is Hot Module Replacement (HMR)?**\nHMR allows modules to be updated in the browser without a full page refresh. When you save a file, only the changed module is replaced, keeping your application state intact. This dramatically speeds up development.\n\n---\n\n## Step 4: Create Babel Configuration\n\nCreate a file named `.babelrc` in your project root:\n\n```json\n{\n  \"presets\": [\n    \"@babel/preset-env\",\n    [\"@babel/preset-react\", { \"runtime\": \"automatic\" }]\n  ]\n}\n```\n\n**What is Babel?**\nBabel is a JavaScript compiler that transforms modern JavaScript and JSX into code that older browsers can understand.\n\n**What are presets?**\nPresets are collections of Babel plugins:\n- `@babel/preset-env`: Transforms modern JavaScript (ES6+) to older syntax\n- `@babel/preset-react`: Transforms JSX syntax to `React.createElement()` calls\n  - `\"runtime\": \"automatic\"` allows you to use JSX without importing React in every file\n\n---\n\n## Step 5: Create HTML Template\n\nCreate the `public` folder and an `index.html` file inside it:\n\n```bash\nmkdir public\n```\n\nCreate `public/index.html`:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eChat Client\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- This div is where React will render your entire application --\u003e\n  \u003c!-- It's called the \"root\" because it's the root of your React component tree --\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\n  \u003c!-- Note: We don't add a \u003cscript\u003e tag here --\u003e\n  \u003c!-- HtmlWebpackPlugin will automatically inject the bundled JavaScript --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Why just one div?**\nReact is a \"single-page application\" (SPA) framework. Your entire application lives inside this single `\u003cdiv id=\"root\"\u003e`. React dynamically updates the content of this div based on your components and state.\n\n---\n\n## Step 6: Create React Entry Point\n\nCreate the `src` folder and the entry point file:\n\n```bash\nmkdir src\n```\n\nCreate `src/index.js`:\n\n```javascript\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\n\n// Get the root DOM element we created in index.html\nconst container = document.getElementById('root');\n\n// Create a React root - this is the entry point for React 18+\nconst root = createRoot(container);\n\n// Render your App component into the root\nroot.render(\u003cApp /\u003e);\n```\n\n**What's happening here?**\n\n1. `import { createRoot }`: We import the function to create a React root (React 18+ API)\n2. `import App`: We import our main App component (we'll create this next)\n3. `document.getElementById('root')`: We find the div we created in our HTML\n4. `createRoot(container)`: We create a React root attached to that div\n5. `root.render(\u003cApp /\u003e)`: We render our App component into the root\n\n**Why createRoot instead of ReactDOM.render?**\n`createRoot` is the new API in React 18 that enables concurrent features. The old `ReactDOM.render` is deprecated.\n\n---\n\n## Step 7: Create Chat Client Component\n\nCreate `src/App.jsx`:\n\n```jsx\nfunction App() {\n  return (\n    \u003cdiv style={{\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100vh',\n      fontFamily: 'Arial, sans-serif',\n      padding: '20px'\n    }}\u003e\n      \u003ch1\u003eChat Client\u003c/h1\u003e\n\n      \u003cdiv style={{\n        flex: 1,\n        border: '1px solid #ccc',\n        borderRadius: '8px',\n        padding: '10px',\n        marginBottom: '10px',\n        overflowY: 'auto'\n      }}\u003e\n        {/* Messages will appear here */}\n      \u003c/div\u003e\n\n      \u003cdiv style={{ display: 'flex', gap: '10px' }}\u003e\n        \u003cinput\n          type=\"text\"\n          placeholder=\"Type a message...\"\n          style={{\n            flex: 1,\n            padding: '10px',\n            borderRadius: '4px',\n            border: '1px solid #ccc'\n          }}\n        /\u003e\n        \u003cbutton style={{\n          padding: '10px 20px',\n          borderRadius: '4px',\n          border: 'none',\n          backgroundColor: '#007bff',\n          color: 'white',\n          cursor: 'pointer'\n        }}\u003e\n          Send\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n**Understanding this component:**\n\n1. **Function Component**: `function App()` creates a React component. Components are reusable pieces of UI.\n\n2. **JSX Return**: The `return` statement contains JSX - a syntax that looks like HTML but is actually JavaScript. Babel transforms this into `React.createElement()` calls.\n\n3. **Inline Styles**: In React, we use the `style` attribute with a JavaScript object (note the double curly braces: `{{ }}`). CSS properties use camelCase (`justifyContent` instead of `justify-content`).\n\n4. **Export**: `export default App` makes this component available for import in other files.\n\n---\n\n## Step 8: Add npm Scripts\n\nOpen `package.json` and add a `scripts` section (or modify the existing one):\n\n```json\n{\n  \"name\": \"react-chat-client\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"start\": \"webpack serve\",\n    \"build\": \"webpack --mode production\"\n  },\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.0\",\n    \"@babel/preset-env\": \"^7.23.0\",\n    \"@babel/preset-react\": \"^7.23.0\",\n    \"babel-loader\": \"^9.1.0\",\n    \"html-webpack-plugin\": \"^5.5.0\",\n    \"webpack\": \"^5.89.0\",\n    \"webpack-cli\": \"^5.1.0\",\n    \"webpack-dev-server\": \"^4.15.0\"\n  }\n}\n```\n\n**Understanding the scripts:**\n\n- `\"start\": \"webpack serve\"`: Runs the Webpack development server with hot-reloading\n- `\"build\": \"webpack --mode production\"`: Creates an optimized production build in the `dist` folder\n\n---\n\n## Step 9: Run the App\n\nStart the development server:\n\n```bash\nnpm start\n```\n\n**What to expect:**\n1. Webpack compiles your code (you'll see output in the terminal)\n2. A browser window opens automatically to `http://localhost:3000`\n3. You should see the chat client interface with a message input and send button\n\nIf the browser doesn't open automatically, manually navigate to `http://localhost:3000`.\n\n---\n\n## Step 10: Test Hot-Reloading\n\nNow for the magic! With the dev server still running:\n\n1. Open `src/App.jsx` in your code editor\n2. Change the title from \"Chat Client\" to \"My Chat App\"\n3. Save the file\n\n**Watch the browser** - the text updates instantly without a full page refresh! This is Hot Module Replacement in action.\n\nTry more changes:\n- Change the button color: modify `backgroundColor` in the button style\n- Change the placeholder text in the input field\n\nEach save should reflect immediately in the browser.\n\n---\n\n## Final Project Structure\n\nYour project should now look like this:\n\n```\nreact-chat-client/\n├── node_modules/        # Installed dependencies (auto-generated)\n├── public/\n│   └── index.html       # HTML template\n├── src/\n│   ├── index.js         # React entry point\n│   └── App.jsx          # Chat client component\n├── .babelrc             # Babel configuration\n├── package.json         # Project manifest\n├── package-lock.json    # Dependency lock file (auto-generated)\n└── webpack.config.js    # Webpack configuration\n```\n\n---\n\n## Troubleshooting\n\n### \"Module not found\" error\n- Make sure all dependencies are installed: `npm install`\n- Check that file paths in imports are correct\n- Verify file extensions (.js vs .jsx)\n\n### Port 3000 already in use\n- Another application is using port 3000\n- Either close that application, or change the port in `webpack.config.js`:\n  ```javascript\n  devServer: {\n    port: 3001,  // Change to a different port\n    // ...\n  }\n  ```\n\n### Changes not appearing in browser\n- Make sure you saved the file\n- Check the terminal for compilation errors\n- Try stopping the server (Ctrl+C) and restarting with `npm start`\n\n### \"React is not defined\" error\n- Make sure `.babelrc` has `\"runtime\": \"automatic\"` in the preset-react config\n- Or add `import React from 'react';` at the top of your JSX files\n\n### Blank page / nothing rendering\n- Open browser dev tools (F12) and check the Console for errors\n- Verify `\u003cdiv id=\"root\"\u003e` exists in `public/index.html`\n- Make sure `src/index.js` is targeting the correct element ID\n\n---\n\n## Next Steps\n\nNow that you have a working React setup, here are some things to explore:\n\n1. **Add more components**: Create new `.jsx` files in `src/` and import them into `App.jsx`\n2. **Add CSS**: Create a CSS file and import it in your JavaScript\n3. **Learn React concepts**: State, props, hooks, and effects\n4. **Add routing**: Use `react-router-dom` for multi-page navigation\n\n---\n\n## Quick Reference\n\n| Command | Description |\n|---------|-------------|\n| `npm start` | Start development server with hot-reload |\n| `npm run build` | Create production build in `dist/` folder |\n\nHappy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemeasandwich%2Fmcms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemeasandwich%2Fmcms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemeasandwich%2Fmcms/lists"}