Starting out in React development can feel pretty overwhelming, especially when most guides throw you into the deep end with stuff like Babel and Webpack right from the get-go. These tools are super useful for big projects, but they do add a lot of complexity that can be a bit much when you're just trying to get your head around React development without Babel and Webpack itself.
Going with a simpler setup, where you run React directly in the browser using just an HTML file and a plain JavaScript file, can take a lot of that initial stress away. It’s kind of like learning to cook a basic meal before you start experimenting with fancy kitchen gadgets. You get to focus on the core ingredients—React's concepts and how to use them—without getting distracted by all the setup and configuration.
Simplified React development without Babel and Webpack
This approach is really handy for quick learning and small experiments. It’s super easy to set up; just link to React and ReactDOM from a CDN in your HTML, and you’re good to go. Plus, you get to see the results of your code changes instantly by refreshing your browser, which is great for tinkering and seeing what happens.
So, if you're looking to dip your toes into React without getting bogged down by all the extras, let's get started:
Creating our HTML file
First, create an HTML file, index.html, which will serve as the entry point for our React application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App Without Transpilation</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Creating Our React Component
Create a new file called app.js where we'll write our simplified React component:
'use strict';
const { useState } = React;
function App() {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']); // Initial list of items
function addItem() {
const newItem = `Item ${items.length + 1}`;
setItems([...items, newItem]); // Add new item to the list
}
return (
<div>
<h1>My Items</h1>
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
<button onClick={addItem}>Add Item</button>
</div>
);
}
// Render the App component into the 'root' div
ReactDOM.render(<App />, document.getElementById('root'));
In the above code we're doing the following:
Import React Hooks: We use useState from React to manage the state in our component.
Creating and Updating State: The useState hook initializes the state with an array of items. The addItem function updates the state by adding a new item to the array.
Rendering: We render an unordered list of items. Each item is mapped from the items array. The button, when clicked, triggers the addItem function to update the state.
Running The Application
Open your index.html file in a web browser to see your React application in action.
You should see a list of items and a button that allows you to add new items to the list.
This approach lets you use React in a very straightforward manner without the complexity of modern JavaScript build setups. It's great for learning the basics of React or for small projects where such tools might be unnecessary. For larger scale applications, you might eventually want to adopt a build process to handle JSX, optimize your code, and manage dependencies more effectively.
Comments