---
title: "Learn React 18: Separating JavaScript and JSX"
url: https://daily.dev/posts/learn-react-18-separating-javascript-and-jsx-tvmx1pzux
source_url: https://code.tutsplus.com/tutorials/react-fundamentals-separating-javascript-and-jsx--cms-42018
type: article
source: "Tuts+"
published: 2022-09-23T23:41:52.648Z
updated: 2022-09-23T23:41:52.647Z
tags: ["react", "javascript", "jsx"]
reading_time: 4
upvotes: 26
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Learn React 18: Separating JavaScript and JSX

**[Tuts\+](https://daily.dev/sources/tuts_plus)** · 4 min read · 26 upvotes · 1 comments

## Summary

React 18: Separating JavaScript and JSX lets you write cleaner components with more complex data processing and logic. In this tutorial, we see how using JSX to write the structure of our component results in cleaner, shorter and easier to understand code than using vanilla JavaScript. So far, we have only created our components using We will use the map() method to create our list.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://code.tutsplus.com/tutorials/react-fundamentals-separating-javascript-and-jsx--cms-42018>

## Community discussion

Top comments from developers on daily.dev.

**@sebahondarza** · 0 upvotes

> great article! :D

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#react](https://daily.dev/tags/react), [#javascript](https://daily.dev/tags/javascript), [#jsx](https://daily.dev/tags/jsx)

[View this post on daily.dev](https://daily.dev/posts/learn-react-18-separating-javascript-and-jsx-tvmx1pzux)