๐Ÿš€React Learning Journey โ€“ Day 3: Understanding JSX, Components, Props, Bundlers, and What Happens After `npm run dev`

๐Ÿ“ฐ Dev.to ยท Bismay.exe

Learn React fundamentals by understanding JSX, components, props, bundlers, and the build process

beginner Published 24 Jun 2026
Action Steps
  1. Create a new React project using `npx create-react-app my-app` to set up a basic development environment
  2. Build a simple component using JSX to understand how React renders HTML-like syntax
  3. Pass props to a component to learn how to share data between components
  4. Use a bundler like Webpack to understand how React code is packaged and served
  5. Run `npm run dev` to see how the development server compiles and updates the application
Who Needs to Know This

Frontend developers and designers can benefit from this tutorial to improve their React skills and collaborate more effectively

Key Insight

๐Ÿ’ก Understanding JSX, components, and props is crucial for building robust React applications

Share This
๐Ÿš€ Learn React fundamentals in 5 steps! ๐Ÿ“š๏ธ

Key Takeaways

Learn React fundamentals by understanding JSX, components, props, bundlers, and the build process

Full Article

Title: ๐Ÿš€React Learning Journey โ€“ Day 3: Understanding JSX, Components, Props, Bundlers, and What Happens After `npm run dev`

URL Source: https://dev.to/bismay-exe/react-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8

Published Time: 2026-06-24T22:11:34Z

Markdown Content:
[Skip to content](https://dev.to/bismay-exe/react-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8#main-content)

[![Image 1: DEV Community](https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png)](https://dev.to/)

[Powered by Algolia](https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral)

[Log in](https://dev.to/enter?signup_subforem=1)[Create account](https://dev.to/enter?signup_subforem=1&state=new-user)

## DEV Community

![Image 2](https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg)5 Add reaction

![Image 3](https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg)1 Like ![Image 4](https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg)1 Unicorn ![Image 5](https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg)1 Exploding Head ![Image 6](https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg)1 Raised Hands ![Image 7](https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg)1 Fire

0 Jump to Comments 0 Save Boost

Copy link

Copied to Clipboard

[Share to X](https://twitter.com/intent/tweet?text=%22%F0%9F%9A%80React%20Learning%20Journey%20%E2%80%93%20Day%203%3A%20Understanding%20JSX%2C%20Components%2C%20Props%2C%20Bundlers%2C%20and%20What%20Happens%20After%20%60npm%20run%20dev%60%22%20by%20%40Bismay_exe%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fbismay-exe%2Freact-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8)[Share to LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fbismay-exe%2Freact-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8&title=%F0%9F%9A%80React%20Learning%20Journey%20%E2%80%93%20Day%203%3A%20Understanding%20JSX%2C%20Components%2C%20Props%2C%20Bundlers%2C%20and%20What%20Happens%20After%20%60npm%20run%20dev%60&summary=Three%20days%20ago%2C%20React%20felt%20like%20something%20only%20experienced%20developers%20%F0%9F%93%8C%20Missed%20Day%202%3F%20I%20covered%20how...&source=DEV%20Community)[Share to Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fbismay-exe%2Freact-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8)[Share to Mastodon](https://s2f.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fbismay-exe%2Freact-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8)

[Share Post via...](https://dev.to/bismay-exe/react-learning-journey-day-3-understanding-jsx-components-props-bundlers-and-what-happens-56i8#)[Report Abuse](https://dev.to/report-abuse)

[![Image 8: Cover image for ๐Ÿš€React Learning Journey โ€“ Day 3: Understanding JSX, Components, Props, Bundlers, and What Happens After `npm run dev`](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhew29obo84cj4o50024q.jpg)](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhew29obo84cj4o50024q.jpg)

[![Image 9: Bismay.exe](https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploa
Read full article โ†’ โ† Back to Reads