แน่นอนว่าสมัยนี้หลายๆ คนคงรู้จักพลังของ Node JS และเริ่มใช้งาน MEAN Stack ในการทำระบบเว็บแอพพลิเคชั่นกันบ้างแล้ว และส่วนประกอบหนึ่งของ MEAN Stack ฝั่งหน้าเว็บ หรือที่เรียกกันว่า Front-end ก็คือ Angular นั่นเองครับ ทีนี้เรื่องมันมีอยู่ว่า โลกยังมี Framework อีกตัวหนึ่งที่ชื่อว่า React (ริเริ่มโดย Facebook) ซึ่งได้รับการยอมรับในเรื่องประสิทธิภาพฝั่ง Front-end ที่แจ่มแจ๋วมากๆ แต่ถ้าเราอยากพัฒนาระบบเว็บแอพพลิเคชั่นด้วย MEAN Stack แต่ไม่อยากใช้ Angular อยากใช้ React แทนจะเป็นไปได้ไหม มีตัวเลือกหนึ่งครับ คือแทนที่เราจะใช้ MEAN เราก็ใช้ "เมิน" (MERN) ซะเลย! ปล.
017 ms - 305 POST /user 201 0. 849 ms - 362 PUT /user 200 0. 816 ms - 367 DELETE /user/1 200 0. 510 ms - 304 GET /user 200 0. 178 ms - 304 และนี่ก็เป็นตัวอย่างในการสร้าง Restful API เบื้องต้นด้วย โดยที่เรายังไม่ได้เชื่อมต่อข้อมูลกับฐานข้อมูลใดๆทั้งสิ้น (ก็ใช้ไฟล์ นี่เนอะ 55+) ก็หวังว่ายังไงอาจจะได้ความรู้จากบทความนี้ไม่มากก็น้อย หากมีคำแนะนำหรือติชมในส่วนใดจะเป็นพระคุณอย่างสูงเพื่อให้บทความต่อได้ปรับปรุงให้ดีมากยิ่งขึ้น ขอบคุณครับ ปล. ทิ้งไว้ตั้งนาน Postman รูปแรกเป็นสีดำพอได้มาเขียนต่อ กลายเป็นสีขาวไปซะงั้น เกือบลืม Dowload Project ไปดูได้ ที่นี่
คุณจะแก้ไขปริศนานี้ที่ใช้เวลาส่วนใหญ่ของคุณได้อย่างไร?
PERN Stack Stack นี้ประกอบไปด้วย PostgreSQL, Express, React และ เมื่อรวม Technologies เหล่านี้เข้าด้วยกัน คุณสามารถสร้าง Full-Stack Web Application ที่มีการทำงานของ CRUD (Create, Read, Update, Delete) ได้เช่นกัน PostgreSQL 5.
ใครที่รักและชอบการใช้ MVC ไม่ควรพลาดเลยครับ แต่การก้าวเข้าไปสู่โลกของ backbonejs ก็ต้องมีความพยายามศึกษานิดหนึ่งนะครับ อาจจะยังไม่เหมาะกับมือใหม่มากนะครับผม^^ ส่วน Hot hits!! Front-end Framework อย่าง อันนี้ดูตามความชอบนะในส่วนเบื้องต้นและตามมาด้วย Performance ว่าเหมาะกับ Web app ที่เราพัฒนาหรือไม่อย่างไร สุดท้าย Learning Curve หรือ ระยะเวลาที่ใช้ในการศึกษาครับ ตรงนี้อยากให้ดูความสบายใจเพราะเราจะมีคามสุขกับมันมากจริงๆครับถ้าเราได้ใช้ตัวที่เราชอบและรู้สึกดีไปกับมัน โอกาสหน้าจะจับคู่ชนให้เห็นกันจะๆครับว่าคู่ไหนเป็นอย่างไร ครั้งนี้ขอลาไปก่อนครับ Ada,
ขั้นแรก: ติดตั้ง MERN เปิด Command Prompt (เครื่อง Windows) หรือ Terminal (เครื่อง Mac) ขึ้นมาแล้วสั่งคำสั่งต่อไปนี้เพื่อติดตั้งระบบ MERN-CLI npm install -g mern-cli 2. สร้างโปรเจคด้วย MERN จากนั้นให้ลองใช้คำสั่งในการสร้างโปรเจคเว็บแอพพลิเคชั่นดังนี้ mern NextflowMern 3. ติดตั้ง Node Package หลังจาก MERN สร้างโปรเจคให้เราเสร็จแล้ว ก็เข้าไปติดตั้ง Node Package อื่นๆ cd NextflowMern npm install 4. เริ่มการทำงานของเว็บแอพ ใช้คำส่ังต่อไปนี้ เริ่มรัน server ของเว็บแอพพลิเคชั่นครับ npm start สรุป นั่นคือ เมิน (MERN) คล้ายๆ กับ express-generator ที่เอาไว้สร้างโปรเจคเว็บแอพ สำหรับใช้แบบ MEAN Stack ล่ะ ใครชอบ React + Redux และสร้างเว็บแอพพลิเคชั่นด้วยโครงสร้างของ MEAN Stack แทน ก็เลือกไปใช้ได้เลย อ้างอิง – Related
สอน ReactJS สร้างระบบ CRUD ด้วย MERN Stack 👨💻⚛️💯 - YouTube
log ( " cleanup "); clearInterval ( id);};}, []); return < h1 > { count} < /h1>;} Enter fullscreen mode Exit fullscreen mode code ด้านบนมันควรจะแสดง 1, 2, 3, 4, 5, 6... (นาทีที่ 7. 40) แต่มันแสดงแค่ 1 การทำงานมันคือ useEffect ทำงานแค่ครั้งเดียวแม้ว่า count จะเปลี่ยนก็ตาม ที่นี้ลองใส่ count clearInterval ( id);};}, [ count]); Type dependency array const [ params, setParams] = useState ({ params: " test "}); return ( < div > < p > { count} < /p > < button onClick = {() => setCount ( count + 1)} > increase count < /button > < Child query = {[ params]} / > < /div >);} function Child ({ query}) { console. log ( " I should see this once! ", query);}, [ query]); // return null;} เมื่อกดปุ่ม increse cout แล้ว function Child มันดันทำงานด้วยเพราะ ทุกการ re-render คือการสร้าง object param:"test" ขึ้นมาใหม่ และ referrence ไม่เหมือนกัน จะแก้ยังไง? กลับไปใช้ useCompareEffect ### เจอแบบ Object มาแล้วถ้าเป็น function ละ < Child query = {{ params: " test "}} / > const useDeepCompareCallback = () => {} function fetchData (){ console.
MERN Stack คืออะไร