ReactJS - .JS กับ .JSX

211

Reactมีบางอย่างที่ผมพบว่าทำให้เกิดความสับสนมากเมื่อทำงานในคือ

มีตัวอย่างมากมายบนอินเทอร์เน็ตที่ใช้.jsไฟล์ที่มีการตอบสนอง แต่มีอีกหลายคนที่ใช้.jsxไฟล์

ฉันได้อ่านเกี่ยวกับ.jsxไฟล์และความเข้าใจของผมคือว่าพวกเขาเพียงแค่ให้คุณเขียน HTML javascriptแท็กภายในของคุณ แต่สิ่งเดียวกันสามารถเขียนใน.jsไฟล์ได้เช่นกัน

ดังนั้นสิ่งที่เป็นความแตกต่างที่เกิดขึ้นจริงระหว่างทั้งสองส่วนขยาย.jsและ.jsx?

reactjs jsx

— confusedDeveloper
แหล่งที่มา

172

ไม่มีเมื่อมันมาถึงนามสกุลไฟล์ ตัวรวม / transpiler ของคุณ / สิ่งที่ดูแลแก้ไขประเภทของเนื้อหาไฟล์ที่มี

มี แต่การพิจารณาอื่น ๆ เมื่อตัดสินใจว่าจะใส่ลงไปมี.jsหรือ.jsxประเภทของไฟล์ เนื่องจาก JSX ไม่ใช่ JavaScript มาตรฐานเราจึงสามารถยืนยันได้ว่าสิ่งใดก็ตามที่ไม่ใช่ "ธรรมดา" JavaScript ควรเข้าไปในส่วนขยายของตัวเองเช่น. .jsxสำหรับ JSX และ.tsTypeScript เช่น

มีการอภิปรายที่ดีสำหรับอ่าน

— Henrik Andersson
แหล่งที่มา

6

ลิงค์ที่ดี! สำหรับฉันการสนทนานี้เป็นสิ่งที่น่าสนใจเช่นกัน!

— เฟลิเป้ออกัสโต

1

พูดได้ดี. JSX ไม่ใช่ JS หรือ HTML ดังนั้นการให้นามสกุลเป็นของตัวเองช่วยระบุว่ามันคืออะไร - แม้ว่าการใช้.jsxไม่ใช่ข้อกำหนด

— STW

35

ในกรณีส่วนใหญ่เป็นเพียงความต้องการ transpiler / bundler ซึ่งอาจไม่ได้รับการกำหนดค่าให้ทำงานกับไฟล์ JSX แต่ใช้กับ JS! ดังนั้นคุณถูกบังคับให้ใช้ไฟล์ JS แทน JSX

และเนื่องจากการตอบสนองเป็นเพียงไลบรารีสำหรับ javascript มันไม่ได้สร้างความแตกต่างให้คุณเลือกระหว่าง JSX หรือ JS พวกมันใช้แทนกันได้อย่างสมบูรณ์!

ในบางกรณีผู้ใช้ / นักพัฒนาอาจเลือก JSX มากกว่า JS เนื่องจากการเน้นโค้ด แต่ผู้แก้ไขที่ใหม่กว่าส่วนใหญ่ยังดูไวยากรณ์การตอบสนองอย่างถูกต้องในไฟล์ JS

— marpme
แหล่งที่มา

27

แท็ก JSX ( <Component/>) ไม่ใช่จาวาสคริปต์มาตรฐานที่ชัดเจนและไม่มีความหมายพิเศษหากคุณใส่ไว้ใน<script>แท็กเปล่าเช่น ดังนั้นไฟล์ React ทั้งหมดที่มีมันคือ JSX ไม่ใช่ JS

ตามแบบแผนจุดเข้าใช้งานของแอปพลิเคชัน React มักเป็น. js แทนที่จะเป็น. jsx แม้ว่าจะมีส่วนประกอบ React มันอาจเป็น. jsx ไฟล์ JSX อื่น ๆ มักจะมีนามสกุล. jsx

ในกรณีใด ๆ เหตุผลที่มีความกำกวมก็คือในที่สุดการขยายไม่สำคัญมากนักเนื่องจาก transpiler มีความสุขในการเคี้ยวไฟล์ทุกชนิดตราบใดที่พวกเขาเป็น JSX

คำแนะนำของฉันคือ: ไม่ต้องกังวลกับมัน

— jlaitio
แหล่งที่มา

แม้var elem = <div>Text</div>;จะไม่ได้เป็นองค์ประกอบ HTML มาตรฐาน มันไม่สนับสนุนappendChild, classListและคุณสมบัติอื่น ๆ อาจ HTML หากคุณต้องการแท็ก HTML โดยตรงในจาวาสคริปต์จะดีกว่าการใช้แม่แบบตัวอักษร (backtick `) ร่วมกับหรือinnerHtml outerHtml

— นักคิดกลยุทธ์

7

นอกเหนือจากความจริงที่กล่าวถึงว่าแท็ก JSX ไม่ใช่จาวาสคริปต์มาตรฐานเหตุผลที่ฉันใช้ส่วนขยาย. jsx ก็เพราะมันยังคงทำงานได้ในโปรแกรมแก้ไข - คุณรู้ไหมว่าปลั๊กอินที่มีประโยชน์ที่ขยายโค้ด HTML เช่น ul> li เข้า

<ul>
  <li></li>
</ul>

— Gabriel Vasile
แหล่งที่มา

เป็นไปได้ที่จะใช้ Emmet สำหรับไฟล์. js ใน Visual Studio Code โดยเพิ่มสิ่งต่อไปนี้ใน settings.json ของคุณ: "emmet.includeLanguages": { "javascript": "javascriptreact" }แต่ใช่ฉันยอมรับว่ารหัส JSX ควรใช้นามสกุล. jsx หากเป็นไปได้

— โทมัส Higginbotham

6

ตามที่กล่าวไว้อื่น ๆJSXไม่ใช่ส่วนขยาย Javascript มาตรฐาน มันจะดีกว่าที่จะตั้งชื่อจุดเริ่มต้นของการประยุกต์ใช้บนพื้นฐานและองค์ประกอบส่วนที่เหลือคุณสามารถใช้.js.jsx

ฉันมีเหตุผลสำคัญที่ทำให้ฉันใช้.JSXชื่อไฟล์ของส่วนประกอบทั้งหมด ที่จริงแล้วในโครงการขนาดใหญ่ที่มีโค้ดจำนวนมากถ้าเราตั้งค่า.jsxส่วนขยายของ React ทั้งหมดด้วยส่วนขยายมันจะง่ายขึ้นในขณะที่นำทางไปยังไฟล์จาวาสคริปต์ที่แตกต่างกันในโครงการ (เช่นผู้ช่วยเหลือมิดเดิลแวร์ ฯลฯ ) และคุณรู้ว่า React Component ไม่ใช่ไฟล์ javascript ประเภทอื่น

— Siavash
แหล่งที่มา

4

JSX ไม่ใช่ JavaScript มาตรฐานตามแนวทางของ Airbnb 'eslint' อาจพิจารณารูปแบบนี้ได้

// filename: MyComponent.js
function MyComponent() {
  return <div />;
}

เป็นการเตือนถ้าคุณตั้งชื่อไฟล์ MyComponent.jsx มันจะผ่านเว้นแต่ว่าคุณแก้ไขกฎ eslint คุณสามารถตรวจสอบคู่มือสไตล์ได้ที่นี่

— Majid Eltayeb
แหล่งที่มา