یکی از مهمترین قسمتهایی که میتواند در مدیریت پروژههای بزرگ و نگداری آنها خیلی موثر باشد، تقسیم پروژه به قسمتهای کوچکتر است که مزایای زیادی دارد. از جمله اینکه میتوان قسمتهای مختلف را در جاهای زیادی مجددا استفاده کرد. همچنین توسعه و رفع باگ این قسمتهای کوچک خیلی سادهتر از یک فایل حجیم با چندین هزار خط کد است. به این منظور، میتوان از کامپوننتها استفاده کرد. کامپوننت را میتوان در سادهترین حالت یک تابع در نظر گرفت که یک مقدار از نوع JSX را به ما برمیگرداند. سپس میتوان از این کامپوننتها در جاهای مختلف پروژه استفاده کرده و آنها را با هم تجمیع کرد و نهایتا درون فایل index.js در قسمت تابع render استفاده کرد. کامپوننتها بصورت ماژول در نظر گرفته میشوند.
در قسمتهای قبل دیدیم که ماژولها میتوانند با هم تجمیع شوند و توسط وب پک تبدیل یه یک یا چند فایل شوند. در ادامه، پسوند فایلهای از نوع کامپونت را بررسی میکنیم و میبینیم که میتوانیم از هر دو پسوند js و jsx استفاده کنیم. معمولا، زمانیکه فایل ما یک کامپوننت باشد، از پسوند jsx استفاده میشود و زمانیکه فقط توابع جاوااسکریپتی باشد از پسوند js استفاده میکنیم. البته استفاده از js برای کامپوننت هم مشکلی ندارد.