Artificial Intelligence (AI) has emerged as a transformative tool across industries. From automating repetitive tasks to generating creative content, it has become an ally to many. However, like any tool, its value lies in how we use it. When misapplied—particularly in areas like localized content creation—it can lead to inaccuracies, cultural insensitivity, and poorly tailored results.
Also in programming, the use of open-source libraries, frameworks and rapidly changing code conventions that are constantly in development. Framework dependencies as upgrades happen soon turn out to cause issues in program development.
Awhile ago when i was trying to unbundle webpack as a newbie in React.js. i found a video that took me on a course on React and React-router using Webpack.
Before i realized that the video was outdated, i ran into error from getting up the webpack structure.
I noticed that their code was working but each time i try it out the, code does not give me the expected result.
I took the error message to Gemini and the response was based on the outdated library i was using.
It was when I rephrased and asked
"Is the current webpack library i was using outdated and is there a
new convention in implementing this code to resolve these errors, also
sending my package.json."
This new query was the beginning of the resolution of the error-bug.
Old Webpack Configuration (Pre-Version 4)
// webpack.config.js (Outdated)
const path = require('path');
module.exports = {
entry: './src/index.js', // Entry point
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js', // Output bundle
},
module: {
rules: [
{
test: /\.js$/, // Handling JavaScript files
exclude: /node_modules/,
loader: 'babel-loader', // Transpile ES6+ to ES5
},
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'), // Serve static files
port: 8080,
},
};
Modern Webpack Configuration (Version 4 and Beyond)
// webpack.config.js (Modern)
const path = require('path');
module.exports = {
mode: 'development', // Mode: "development" or "production"
entry: './src/index.js', // Entry point
output: {
filename: 'main.js', // Default: "main.js" if not specified
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/, // Handle JavaScript files
exclude: /node_modules/,
use: 'babel-loader', // Simplified syntax for loaders
},
],
},
devServer: {
static: './dist', // Serve static files (simplified from contentBase)
port: 3000, // Optional: Default port is 8080
},
};
Modern tools like create-react-app and Vite have revolutionized how React applications are built by abstracting away complex Webpack configurations. With just a single command, these tools scaffold a fully functional React app with sensible defaults, making them ideal for beginners or developers who want to focus more on coding than configuration.
For example, create-react-app and its TypeScript counterpart (create-react-app-template-typescript) provide a zero-config setup with Webpack under the hood.
On the other hand, Vite, a newer alternative, offers a lightweight and faster development experience by leveraging native ES modules and modern build tools like Rollup.
However, for developers who want to understand the inner workings of their build tools or customize their setup, starting from scratch with npm init -y and manually configuring Webpack is still a valuable exercise. Below, I’ll show how these tools compare to a manual Webpack setup.
Using create-react-app With create-react-app, setting up a React app
is as simple as running:
npx create-react-app my-app
cd my-app
npm start
To add TypeScript support, use:
npx create-react-app my-app --template typescript
This generates a React app with Webpack preconfigured and ready to go. You don’t need to touch webpack.config.js unless you eject the app (which is rarely necessary). The simplicity makes it perfect for most use cases.
Using Vite to Create a React App Vite provides an even faster and more
modern approach:
npm create vite@latest my-app
cd my-app
npm install
npm run dev
You can also specify React and TypeScript templates during setup:
npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template react-ts
Vite eliminates the need for Webpack entirely, offering faster builds and hot module replacement (HMR).
Manual Webpack Setup For a manual setup, follow these steps:
1. Initialize a new project:
mkdir my-app
cd my-app
npm init -y
2. Install Webpack and React dependencies:
npm install react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev
3. Create a webpack.config.js file to configure Webpack.
Below is a sample Webpack configuration for a React app:
> // webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', // Switch to "production" for production builds
entry: './src/index.js', // Main entry point
output: {
path: path.resolve(__dirname, 'dist'), // Output directory
filename: 'bundle.js', // Output bundle name
clean: true, // Cleans 'dist' folder before each build
},
module: {
rules: [
{
test: /\.js$/, // Handle JavaScript files
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'], // Transpile modern JavaScript and React JSX
},
},
},
{
test: /\.css$/, // Handle CSS files
use: ['style-loader', 'css-loader'], // Inject styles into DOM
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // Template HTML file
}),
],
devServer: {
static: path.resolve(__dirname, 'dist'), // Serve static files from 'dist'
port: 3000, // Development server port
hot: true, // Enable hot module replacement
},
resolve: {
extensions: ['.js', '.jsx'], // Resolve these extensions in imports
},
};
4. Create the project structure:
my-app/
├── src/
│├── index.js
│├── App.js
├── public/
│ ├── index.html
├── webpack.config.js
├── package.json
5. Add the following scripts to your package.json:
json
"scripts": {
"start": "webpack serve --open",
"build": "webpack"
}
6. Run the app:
npm start
Issues that arise in open-source library dependent framework
React as a Project has been on version 18 which there have been crash courses out there and documentations. Ai which uses the Large Language Model (LLM) from either google or any backbone server and data warehouse feed on the outdated information which is used to train this AI.
Most of the documentations are not being updated which lead to outdated response when the current libraries of React have depreciated because react 19 is out.
An example of this is the new way "use" is used to fetch data from an api instate of the joint work of the useEffect and storing state with useStates.
Outdated Approach: Data Fetching Using useEffect and useState
function OldUserProfile() {
const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://api.example.com/user')
.then(res => res.json())
.then(data => {
setUserData(data);
setLoading(false);
});
}, []);
if (loading) return <div>Loading...</div>;
return (
<div className="p-4">
<h1 className="text-xl font-bold">User Profile</h1>
<p>Name: {userData.name}</p>
<p>Email: {userData.email}</p>
</div>
);
}
Modern Approach: Data Fetching Using the use() Hook
// Modern approach - app/root.jsx or similar
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { use } from 'react';
// Example of modern data fetching with 'use'
function UserProfile() {
// The new 'use' approach for data fetching
const userData = use(fetch('https://api.example.com/user')
.then(res => res.json()));
return (
<div className="p-4">
<h1 className="text-xl font-bold">User Profile</h1>
<p>Name: {userData.name}</p>
<p>Email: {userData.email}</p>
</div>
);
}
Key Improvements:
The use() hook eliminates the need for useEffect and useState when fetching data.
Data fetching is more declarative and less verbose.
This works seamlessly with React's server components, aligning well with modern rendering patterns.
Also React-router initially wrap the provider tag in the index.js file, then wrap the file in the app.js using the browser router as router, routes and nav links and the new use of links instead
> Outdated React Router Conventions
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
// App.js
import React from 'react';
import { Route, Switch, NavLink } from 'react-router-dom';
function App() {
return (
<div>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
</nav>
<Switch>
<Route path="/" exact>
<h1>Home Page</h1>
</Route>
<Route path="/about">
<h1>About Page</h1>
</Route>
</Switch>
</div>
);
}
export default App;
Modern React Router Conventions
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
children: [
{
path: "user",
element: <UserProfile />,
// You can also use loaders for data fetching
loader: async () => {
return fetch('https://api.example.com/user');
}
},
{
path: "review-booking",
element: <ReviewBooking />,
},
// ... other routes
],
},
]);
// Root component
function Root() {
return (
<div>
<nav>
{/* Modern Link usage */}
<Link to="/user">User Profile</Link>
<Link to="/review-booking">Review Booking</Link>
</nav>
<Outlet />
</div>
);
}
// App component
export default function App() {
return <RouterProvider router={router} />;
}
The Right Way to Use AI
Localized Content Creation
AI has immense potential to assist in creating localized content. It can help translate, adapt styles, and even suggest culturally relevant expressions. However, the key here is collaboration, not replacement. AI can provide a starting point, but the human touch ensures that the content resonates with the intended audience. Nuances in language, cultural references, and local idioms are often things AI struggles to fully grasp.
Code Writing Assistance
AI has become a programmer’s best friend, especially when it comes to generating boilerplate code or debugging complex problems. Tools like GitHub Copilot and ChatGPT can suggest solutions, optimize algorithms, and even generate entire functions. But relying on AI blindly can result in brittle, unoptimized, or even insecure code. Always review and test the generated code thoroughly. AI should complement your skills, not replace them.
Feedback in Article Journaling
When writing articles or journaling, AI can act as a brainstorming partner. Whether you’re stuck on an introduction or need help refining a paragraph, AI tools can offer suggestions. However, their outputs should be critically assessed. AI doesn’t understand your voice or your audience’s expectations—it generates content based on patterns, not emotions or intent.
The Wrong Way to Use AI
Misusing AI in Localized Content
One of the most common pitfalls is treating AI as a "one-size-fits-all" solution. For example, using AI to directly translate content for different regions without a human review can result in awkward phrasing or offensive translations. Localization isn’t just about language—it’s about context, tone, and cultural relevance. Ignoring this can alienate your audience rather than engaging them.
Blindly Trusting AI-Generated Code
AI-generated code can often appear perfect at first glance, but it may contain subtle bugs, inefficiencies, or security vulnerabilities. Copy-pasting code without understanding it risks introducing issues into your project. Always review the code, test extensively, and adapt it to fit your specific requirements.
Overreliance on AI for Creativity
While AI can assist with creativity, it’s not a replacement for human originality. Overusing AI for journaling or content creation can lead to generic, uninspired results. The magic of writing comes from your personal insights, emotions, and unique perspective—something AI cannot replicate.
