Pagelyze ਬਣਾਉਣ ਨੇ ਮੈਨੂੰ React ਬਾਰੇ ਕੀ ਸਿਖਾਇਆ

Pagelyze ਬਣਾਉਣ ਨੇ React ਬਾਰੇ ਮੇਰਾ ਨਜ਼ਰੀਆ ਬਦਲ ਦਿੱਤਾ। ਮੈਂ ਸਿਧਾਂਤ (theory) ਦੇਖਣਾ ਛੱਡ ਦਿੱਤਾ ਅਤੇ ਪ੍ਰੋਡਕਟ ਆਰਕੀਟੈਕਚਰ (product architecture) ਵੱਲ ਦੇਖਣਾ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤਾ।

Pagelyze ਇੱਕ ਵੈੱਬਸਾਈਟ ਆਡਿਟ ਟੂਲ ਹੈ। ਇਹ ਕੋਈ ਛੋਟੀ ਪ੍ਰੈਕਟਿਸ ਐਪ ਨਹੀਂ ਹੈ। ਇਹ ਆਡਿਟ ਰਿਪੋਰਟਾਂ, ਸਕੋਰਿੰਗ ਲੌਜਿਕ ਅਤੇ ਡੈਸ਼ਬੋਰਡਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ। ਇਸ ਕਰਕੇ, ਮੈਨੂੰ ਇੱਕ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦੇਣਾ ਪਿਆ:

ਕੀ ਇਹ ਕੋਡ ਪ੍ਰੋਡਕਟ ਦੇ ਵਧਣ ਦੇ ਨਾਲ ਸਾਫ਼-ਸੁਥਰਾ ਰਹੇਗਾ?

useState ਜਾਂ useEffect ਵਰਗੇ Hooks ਮਹੱਤਵਪੂਰਨ ਹਨ। ਪਰ ਇਹ ਸਾਰੀ ਕਹਾਣੀ ਨਹੀਂ ਹਨ। ਤੁਸੀਂ ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ (modern syntax) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਫਿਰ ਵੀ ਤੁਹਾਨੂੰ ਇੱਕ ਖ਼ਰਾਬ ਕੋਡ (mess) ਨੂੰ ਸੰਭਾਲਣਾ ਪੈ ਸਕਦਾ ਹੈ। ਸਮੱਸਿਆ ਆਮ ਤੌਰ 'ਤੇ ਜ਼ਿੰਮੇਵਾਰੀ (responsibility) ਦੀ ਹੁੰਦੀ ਹੈ।

ਇੱਕ ਮਾੜੇ ਸੈੱਟਅੱਪ ਵਿੱਚ, ਇੱਕ ਹੀ ਫਾਈਲ ਡੇਟਾ ਲੋਡ ਕਰਨ ਤੋਂ ਲੈ ਕੇ ਨਤੀਜੇ ਦਿਖਾਉਣ ਤੱਕ ਸਭ ਕੁਝ ਸੰਭਾਲਦੀ ਹੈ। ਜਿਵੇਂ-ਜਿਵੇਂ ਤੁਸੀਂ ਇਸ ਨੂੰ ਵਧਾਉਂਦੇ ਹੋ (scale), ਇਹ ਫੇਲ੍ਹ ਹੋ ਜਾਂਦੀ ਹੈ।

ਇੱਕ ਬਿਹਤਰ ਤਰੀਕਾ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਉਹਨਾਂ ਦੇ ਉਦੇਸ਼ ਅਨੁਸਾਰ ਵੰਡਣਾ ਹੈ:

• AuditSummary
• LeadCheckPanel
• EvidenceList
• ServiceRecommendationCard
• ReportActions

ਹਰ ਹਿੱਸੇ ਦਾ ਇੱਕ ਹੀ ਕੰਮ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ ਡੇਟਾ ਲੌਜਿਕ ਨੂੰ ਖਰਾਬ ਕੀਤੇ ਬਿਨਾਂ ਕਾਰਡ ਡਿਜ਼ਾਈਨ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ।

ਇਹ ਪੁੱਛਣਾ ਬੰਦ ਕਰੋ ਕਿ ਕੀ ਤੁਹਾਨੂੰ Redux ਜਾਂ Context ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਇਹ ਪੁੱਛੋ ਕਿ ਸਟੇਟ (state) ਦੀ ਲੋੜ ਕਿਸ ਨੂੰ ਹੈ।

• Local UI state: tabs ਅਤੇ modals
• Form state: URLs ਅਤੇ validation
• Server state: reports ਅਤੇ scans
• Global state: user profile ਅਤੇ permissions

Custom hooks ਨੂੰ ਵਿਵਹਾਰ (behavior) ਨੂੰ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ ਖ਼ਰਾਬ ਕੋਡ ਨੂੰ ਦੂਜੀ ਫਾਈਲ ਵਿੱਚ ਨਹੀਂ ਭੇਜਣਾ ਚਾਹੀਦਾ। ਇੱਕ ਚੰਗਾ hook ਡੇਟਾ ਫੈਚ (fetch) ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਪੇਜ ਕੰਪੋਨੈਂਟ ਸਿਰਫ਼ ਸਕ੍ਰੀਨ ਨੂੰ ਕੋਆਰਡੀਨੇਟ (coordinate) ਕਰ ਸਕੇ।

ਆਪਣੇ ਫੋਲਡਰਾਂ ਨੂੰ ਫੀਚਰ (feature) ਦੇ ਅਨੁਸਾਰ ਸੰਗਠਿਤ ਕਰੋ:

• features/audit-report/
• features/lead-rescue/
• features/dashboard/

Routing ਸਿਰਫ਼ URLs ਤੋਂ ਕਿਤੇ ਵੱਧ ਹੈ। ਇਹ ਯੂਜ਼ਰ ਦੀ ਯਾਤਰਾ (user journey) ਹੈ। ਇੱਕ ਯੂਜ਼ਰ ਲੈਂਡਿੰਗ ਪੇਜ ਤੋਂ ਮੁਫ਼ਤ ਆਡਿਟ ਤੱਕ ਜਾਂਦਾ ਹੈ, ਫਿਰ ਰਿਪੋਰਟ ਤੱਕ, ਅਤੇ ਅੰਤ ਵਿੱਚ ਸਰਵਿਸ ਇਨਕੁਆਰੀ (service inquiry) ਤੱਕ। ਚੰਗੀ routing ਉਹਨਾਂ ਨੂੰ ਅਗਲੇ ਕਦਮ ਵੱਲ ਲੈ ਕੇ ਜਾਂਦੀ ਹੈ।

ਸਪੱਸ਼ਟਤਾ ਨਾਲ ਬਣਾਓ। ਰੁਕਾਵਟ (bottleneck) ਲੱਭੋ। ਉਸ ਖਾਸ ਹਿੱਸੇ ਨੂੰ ਠੀਕ ਕਰੋ।

React best practices ਫੈਸਲਿਆਂ ਬਾਰੇ ਹਨ। ਤੁਸੀਂ ਤੈਅ ਕਰਦੇ ਹੋ ਕਿ ਇੱਕ ਕੰਪੋਨੈਂਟ ਦਾ ਮਾਲਕ ਕੌਣ ਹੈ। ਤੁਸੀਂ ਤੈਅ ਕਰਦੇ ਹੋ ਕਿ ਸਟੇਟ ਕਿੱਥੇ ਰਹੇਗੀ। ਤੁਸੀਂ ਤੈਅ ਕਰਦੇ ਹੋ ਕਿ ਕੀ ਕੋਈ ਰੂਟ ਯੂਜ਼ਰ ਦੀ ਮਦਦ ਕਰਦਾ ਹੈ।

Pagelyze ਮੇਰਾ ਟੈਸਟ ਹੈ। ਮੈਂ ਇਹ ਟੈਸਟ ਨਹੀਂ ਕਰ ਰਿਹਾ ਕਿ ਕੀ ਮੈਂ ਇੱਕ ਸਕ੍ਰੀਨ ਬਣਾ ਸਕਦਾ ਹਾਂ। ਮੈਂ ਇਹ ਟੈਸਟ ਕਰ ਰਿਹਾ ਹਾਂ ਕਿ ਕੀ ਮੈਂ ਪ੍ਰੋਡਕਟ ਦੇ ਵਧਣ ਦੇ ਨਾਲ ਉਸਨੂੰ ਸਾਫ਼-ਸੁਥਰਾ ਰੱਖ ਸਕਦਾ ਹਾਂ।

ਸਰੋਤ: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb