# React Hello World: Manual Babel and Webpack Setup

> Published 2026-10-26T00:41:56.710Z on https://youblog.app/p/react-hello-world-manual-babel-and-webpack-setup/
> Source video: https://www.youtube.com/watch?v=AKXpOUo10k0

A React hello world needs three pieces: Babel to translate JSX, webpack to bundle the entry file, and a dev server to serve the result. This manual setup was demonstrated in a 2019 Portuguese-language tutorial by Gustavo Dev Doido on the Dev Doido channel, and the underlying tools still work the same way in 2026.

## Turning a walkthrough into a written reference

A video walkthrough is fast to watch once and slow to consult later. Writing down the config files, the exact package names and the dev server port turns a one-time lesson into a reference you can reopen when a build breaks. The goal is not a transcript but a lookup table: every command, version and file path captured where search can find it.

That is the shortest path from tutorial to documentation: the same steps, the same order, with the commands written where you can search them. A written reference also survives the video: when a package moves on, you can diff the old instructions against the new ones instead of scrubbing a timeline.

What a reference needs that a video does not:

- The exact package names and versions installed, not just the folder that appeared.
- The full contents of each config file at the moment it worked.
- The dev server port and the URL it prints on start.
- The error messages you hit, and the fix for each one.

Skala blog turns a YouTube URL into a transcribed, structured draft you can edit before publishing.

Paste a YouTube URL into [Skala Blog](https://skalablog.com), let it transcribe the video, and generate an article you can review and adapt.

### Checking setup instructions before you trust them

Drafts start from a spoken walkthrough, so verify the specifics against the primary docs before publishing. For Babel, confirm the preset names in the [Babel presets documentation](https://babeljs.io/docs/presets); for bundling, check the [webpack configuration guide](https://webpack.js.org/configuration/); and for the project scaffolding itself, the [Create React App getting-started page](https://create-react-app.dev/docs/getting-started/) is the usual starting point. Where the video and the docs disagree, the docs win and the video becomes a note.

### Frequently asked questions

- **Why write the steps down if the video already exists?** Video is linear and unsearchable; a written page lets you jump to the config line that broke.
- **Should the article include the full config files?** Yes. A reference that omits the file contents sends you back to the video.
- **How much editing does a generated draft need?** Enough to check package names, versions and ports against the official docs before publishing.
- **Where should the source video be linked?** Keep it at the end, so readers can watch the original after following the written steps.

[Source video](https://www.youtube.com/watch?v=AKXpOUo10k0)