ਤੁਹਾਡੇ ਫਰੰਟ-ਐਂਡ ਹੁਨਰ ਨੂੰ ਨਿਖਾਰਨ ਲਈ 9 ਹੋਰ ਪ੍ਰੋਜੈਕਟ

ਜਾਣ ਪਛਾਣ

ਭਾਵੇਂ ਤੁਸੀਂ ਪ੍ਰੋਗਰਾਮਿੰਗ ਲਈ ਨਵੇਂ ਹੋ ਜਾਂ ਇੱਕ ਤਜਰਬੇਕਾਰ ਡਿਵੈਲਪਰ, ਰੁਝਾਨਾਂ ਨੂੰ ਜਾਰੀ ਰੱਖਣ ਲਈ ਇਸ ਉਦਯੋਗ ਵਿੱਚ ਨਵੀਆਂ ਧਾਰਨਾਵਾਂ ਅਤੇ ਭਾਸ਼ਾਵਾਂ/ਫ੍ਰੇਮਵਰਕ ਸਿੱਖਣਾ ਲਾਜ਼ਮੀ ਹੈ।

ਉਦਾਹਰਨ ਲਈ, React ਨੂੰ ਲਓ, ਜਿਸ ਨੂੰ ਫੇਸਬੁੱਕ ਨੇ ਸਿਰਫ਼ ਚਾਰ ਸਾਲ ਪਹਿਲਾਂ ਓਪਨ-ਸੋਰਸ ਕੀਤਾ ਸੀ ਅਤੇ ਪਹਿਲਾਂ ਹੀ ਦੁਨੀਆ ਭਰ ਦੇ JavaScript ਡਿਵੈਲਪਰਾਂ ਲਈ ਨੰਬਰ ਇੱਕ ਵਿਕਲਪ ਬਣ ਗਿਆ ਹੈ।

Vue ਅਤੇ Angular, ਬੇਸ਼ੱਕ, ਉਹਨਾਂ ਦਾ ਆਪਣਾ ਜਾਇਜ਼ ਪ੍ਰਸ਼ੰਸਕ ਅਧਾਰ ਵੀ ਹੈ। ਅਤੇ ਫਿਰ Svelte ਅਤੇ ਹੋਰ ਯੂਨੀਵਰਸਲ ਫਰੇਮਵਰਕ ਹਨ ਜਿਵੇਂ ਕਿ Next.js ਜਾਂ Nuxt.js। ਅਤੇ ਗੈਟਸਬੀ, ਅਤੇ ਗ੍ਰਿਡਸੋਮ, ਅਤੇ ਕਵਾਸਰ... ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ।

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਇੱਕ ਤਜਰਬੇਕਾਰ JavaScript ਡਿਵੈਲਪਰ ਵਜੋਂ ਸਾਬਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ ਵੱਖ-ਵੱਖ ਫਰੇਮਵਰਕ ਅਤੇ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੇ ਨਾਲ ਘੱਟੋ-ਘੱਟ ਕੁਝ ਅਨੁਭਵ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ - ਚੰਗੇ ਪੁਰਾਣੇ ਜੇ.ਐਸ. ਨਾਲ ਕੰਮ ਕਰਨ ਤੋਂ ਇਲਾਵਾ.

2020 ਵਿੱਚ ਇੱਕ ਫਰੰਟ-ਐਂਡ ਮਾਸਟਰ ਬਣਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ, ਮੈਂ ਨੌਂ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਜੈਕਟ ਇਕੱਠੇ ਰੱਖੇ ਹਨ, ਹਰ ਇੱਕ ਤਕਨੀਕੀ ਸਟੈਕ ਵਜੋਂ ਇੱਕ ਵੱਖਰੇ JavaScript ਫਰੇਮਵਰਕ ਅਤੇ ਲਾਇਬ੍ਰੇਰੀ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਤ ਕਰਦਾ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਪੋਰਟਫੋਲੀਓ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ। ਯਾਦ ਰੱਖੋ ਕਿ ਅਸਲ ਵਿੱਚ ਚੀਜ਼ਾਂ ਬਣਾਉਣ ਤੋਂ ਇਲਾਵਾ ਹੋਰ ਕੋਈ ਵੀ ਚੀਜ਼ ਤੁਹਾਡੀ ਮਦਦ ਨਹੀਂ ਕਰਦੀ, ਇਸ ਲਈ ਅੱਗੇ ਵਧੋ, ਆਪਣੇ ਦਿਮਾਗ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਪੂਰਾ ਕਰੋ

ਲੇਖ ਦਾ ਅਨੁਵਾਦ EDISON ਸੌਫਟਵੇਅਰ ਦੇ ਸਮਰਥਨ ਨਾਲ ਕੀਤਾ ਗਿਆ ਸੀ, ਜੋ ਕਿ ਮਲਟੀ-ਬ੍ਰਾਂਡ ਸਟੋਰਾਂ ਲਈ ਵਰਚੁਅਲ ਫਿਟਿੰਗ ਰੂਮ ਬਣਾਉਂਦਾ ਹੈਅਤੇ ਟੈਸਟ ਸਾਫਟਵੇਅਰ.

ਰਿਐਕਟ (ਹੁੱਕਾਂ ਨਾਲ) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਮੂਵੀ ਖੋਜ ਐਪ

ਪਹਿਲੀ ਚੀਜ਼ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਸ਼ੁਰੂਆਤ ਕਰ ਸਕਦੇ ਹੋ ਉਹ ਹੈ ਰੀਐਕਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਮੂਵੀ ਖੋਜ ਐਪ ਬਣਾਉਣਾ। ਹੇਠਾਂ ਇੱਕ ਚਿੱਤਰ ਹੈ ਕਿ ਅੰਤਮ ਐਪਲੀਕੇਸ਼ਨ ਕਿਸ ਤਰ੍ਹਾਂ ਦੀ ਦਿਖਾਈ ਦੇਵੇਗੀ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਸ ਐਪ ਨੂੰ ਬਣਾ ਕੇ, ਤੁਸੀਂ ਮੁਕਾਬਲਤਨ ਨਵੇਂ ਹੁੱਕਸ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰਤੀਕਰਮ ਦੇ ਹੁਨਰ ਨੂੰ ਸੁਧਾਰੋਗੇ। ਉਦਾਹਰਨ ਪ੍ਰੋਜੈਕਟ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟ, ਬਹੁਤ ਸਾਰੇ ਹੁੱਕ, ਇੱਕ ਬਾਹਰੀ API, ਅਤੇ ਬੇਸ਼ਕ ਕੁਝ CSS ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਹੁੱਕਾਂ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ
• ਬਣਾਓ-ਪ੍ਰਤੀਕ੍ਰਿਆ-ਐਪ
• ਜੇਐਸਐਕਸ
• CSS

ਕਿਸੇ ਵੀ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ, ਇਹ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਕਾਰਜਸ਼ੀਲ ਪ੍ਰਤੀਕ੍ਰਿਆ ਵਿੱਚ ਸੰਪੂਰਨ ਪ੍ਰਵੇਸ਼ ਬਿੰਦੂ ਦਿੰਦੇ ਹਨ ਅਤੇ ਯਕੀਨੀ ਤੌਰ 'ਤੇ 2020 ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨਗੇ। ਤੁਸੀਂ ਲੱਭ ਸਕਦੇ ਹੋ ਉਦਾਹਰਨ ਪ੍ਰੋਜੈਕਟ ਇੱਥੇ. ਹਿਦਾਇਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਜਾਂ ਇਸਨੂੰ ਆਪਣਾ ਬਣਾਓ।

Vue ਨਾਲ ਚੈਟ ਐਪ

ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਹੋਰ ਵਧੀਆ ਪ੍ਰੋਜੈਕਟ ਮੇਰੀ ਮਨਪਸੰਦ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਚੈਟ ਐਪ ਬਣਾਉਣਾ ਹੈ: VueJS. ਐਪਲੀਕੇਸ਼ਨ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗੀ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ, ਤੁਸੀਂ ਸਕ੍ਰੈਚ ਤੋਂ ਇੱਕ Vue ਐਪ ਬਣਾਉਣਾ ਸਿੱਖੋਗੇ - ਭਾਗ ਬਣਾਉਣਾ, ਸਥਿਤੀ ਨੂੰ ਸੰਭਾਲਣਾ, ਰੂਟ ਬਣਾਉਣਾ, ਤੀਜੀ-ਧਿਰ ਦੀਆਂ ਸੇਵਾਵਾਂ ਨਾਲ ਜੁੜਨਾ, ਅਤੇ ਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਵੀ ਹੈਂਡਲ ਕਰਨਾ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਵੀ
• ਵਯੂਐਕਸ
• Vue ਰਾਊਟਰ
• Vue CLI
• ਪੁਸ਼ਰ
• CSS

Vue ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਜਾਂ 2020 ਵਿੱਚ ਵਿਕਾਸ ਵਿੱਚ ਜਾਣ ਲਈ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਹੁਨਰ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਇਹ ਇੱਕ ਸੱਚਮੁੱਚ ਵਧੀਆ ਪ੍ਰੋਜੈਕਟ ਹੈ। ਤੁਸੀਂ ਲੱਭ ਸਕਦੇ ਹੋ ਇੱਥੇ ਟਿਊਟੋਰਿਅਲ.

ਐਂਗੁਲਰ 8 ਦੇ ਨਾਲ ਸੁੰਦਰ ਮੌਸਮ ਐਪ

ਇਹ ਉਦਾਹਰਣ ਐਂਗੁਲਰ 8 ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸੁੰਦਰ ਮੌਸਮ ਐਪ ਬਣਾਉਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗੀ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਹ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਸਕ੍ਰੈਚ ਤੋਂ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਵਿੱਚ ਕੀਮਤੀ ਹੁਨਰ ਸਿਖਾਏਗਾ - ਡਿਜ਼ਾਇਨ ਤੋਂ ਲੈ ਕੇ ਡਿਵੈਲਪਮੈਂਟ ਤੱਕ, ਇੱਕ ਤੈਨਾਤੀ ਲਈ ਤਿਆਰ ਐਪਲੀਕੇਸ਼ਨ ਤੱਕ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਕੋਣੀ 8
• ਫਾਇਰਬੇਜ
• ਸਰਵਰ ਸਾਈਡ ਰੈਂਡਰਿੰਗ
• ਗਰਿੱਡ ਅਤੇ ਫਲੈਕਸਬਾਕਸ ਦੇ ਨਾਲ CSS
• ਮੋਬਾਈਲ ਦੋਸਤਾਨਾ ਅਤੇ ਅਨੁਕੂਲਤਾ
• ਡਾਰਕ ਮੋਡ
• ਸੁੰਦਰ ਇੰਟਰਫੇਸ

ਇਸ ਸਾਰੇ-ਸਮਝੇ ਪ੍ਰੋਜੈਕਟ ਬਾਰੇ ਮੈਨੂੰ ਸੱਚਮੁੱਚ ਕੀ ਪਸੰਦ ਹੈ ਉਹ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਚੀਜ਼ਾਂ ਦਾ ਅਧਿਐਨ ਅਲੱਗ-ਥਲੱਗ ਨਹੀਂ ਕਰਦੇ ਹੋ। ਇਸ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਡਿਜ਼ਾਇਨ ਤੋਂ ਲੈ ਕੇ ਅੰਤਮ ਤੈਨਾਤੀ ਤੱਕ ਸਾਰੀ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਸਿੱਖਦੇ ਹੋ।

Svelte ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੂ-ਡੂ ਐਪਲੀਕੇਸ਼ਨ

Svelte ਕੰਪੋਨੈਂਟ-ਅਧਾਰਿਤ ਪਹੁੰਚ 'ਤੇ ਨਵੇਂ ਬੱਚੇ ਦੀ ਤਰ੍ਹਾਂ ਹੈ - ਘੱਟੋ ਘੱਟ ਪ੍ਰਤੀਕਿਰਿਆ, Vue ਅਤੇ Angular ਦੇ ਸਮਾਨ ਹੈ। ਅਤੇ ਇਹ 2020 ਲਈ ਸਭ ਤੋਂ ਗਰਮ ਨਵੇਂ ਉਤਪਾਦਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

ਟੂ-ਡੂ ਐਪਸ ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਗਰਮ ਵਿਸ਼ਾ ਨਹੀਂ ਹਨ, ਪਰ ਇਹ ਅਸਲ ਵਿੱਚ ਤੁਹਾਡੇ ਸਵੇਲਟ ਹੁਨਰ ਨੂੰ ਨਿਖਾਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰੇਗਾ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਹ ਟਿਊਟੋਰਿਅਲ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ Svelte 3 ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸ਼ੁਰੂ ਤੋਂ ਲੈ ਕੇ ਅੰਤ ਤੱਕ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈ ਜਾਵੇ। ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ, ਸਟਾਈਲਿੰਗ ਅਤੇ ਇਵੈਂਟ ਹੈਂਡਲਰ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• Svelte 3
• ਕੰਪੋਨੈਂਟਸ
• CSS ਨਾਲ ਸਟਾਈਲਿੰਗ
• ES 6 ਸੰਟੈਕਸ

ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਚੰਗੇ Svelte ਸਟਾਰਟਰ ਪ੍ਰੋਜੈਕਟ ਨਹੀਂ ਹਨ, ਇਸਲਈ ਮੈਨੂੰ ਮਿਲਿਆ ਇਹ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ ਵਧੀਆ ਵਿਕਲਪ ਹੈ.

Next.js ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਈ-ਕਾਮਰਸ ਐਪ

Next.js ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਫਰੇਮਵਰਕ ਹੈ ਜੋ ਬਾਕਸ ਦੇ ਬਾਹਰ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ।

ਇਹ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ ਇੱਕ ਈ-ਕਾਮਰਸ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈਏ ਜੋ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ
ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ Next.js ਨਾਲ ਕਿਵੇਂ ਵਿਕਸਿਤ ਕਰਨਾ ਹੈ—ਨਵੇਂ ਪੰਨੇ ਅਤੇ ਭਾਗ ਬਣਾਓ, ਡੇਟਾ ਐਕਸਟਰੈਕਟ ਕਰੋ, ਅਤੇ ਸਟਾਈਲ ਕਰੋ ਅਤੇ ਅਗਲੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਲਾਗੂ ਕਰੋ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• Next.js
• ਭਾਗ ਅਤੇ ਪੰਨੇ
• ਡਾਟਾ ਨਮੂਨਾ
• ਸਟਾਈਲਾਈਜ਼ੇਸ਼ਨ
• ਪ੍ਰੋਜੈਕਟ ਤੈਨਾਤੀ
• SSR ਅਤੇ SPA

ਕੁਝ ਨਵਾਂ ਸਿੱਖਣ ਲਈ ਇੱਕ ਈ-ਕਾਮਰਸ ਐਪ ਵਰਗੀ ਅਸਲ-ਸੰਸਾਰ ਉਦਾਹਰਨ ਰੱਖਣਾ ਹਮੇਸ਼ਾ ਵਧੀਆ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਕਰ ਸੱਕਦੇ ਹੋ ਇੱਥੇ ਟਿਊਟੋਰਿਅਲ ਲੱਭੋ.

Nuxt.js ਦੇ ਨਾਲ ਪੂਰਾ ਬਹੁ-ਭਾਸ਼ਾਈ ਬਲੌਗ

Nuxt.js Vue ਲਈ ਹੈ, Next.js ਕੀ ਹੈ React ਲਈ: ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਅਤੇ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੀ ਸ਼ਕਤੀ ਨੂੰ ਜੋੜਨ ਲਈ ਇੱਕ ਵਧੀਆ ਫਰੇਮਵਰਕ
ਅੰਤਿਮ ਐਪਲੀਕੇਸ਼ਨ ਜੋ ਤੁਸੀਂ ਬਣਾ ਸਕਦੇ ਹੋ ਉਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗੀ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

ਇਸ ਨਮੂਨਾ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਸ਼ੁਰੂਆਤੀ ਸੈੱਟਅੱਪ ਤੋਂ ਲੈ ਕੇ ਅੰਤਮ ਤੈਨਾਤੀ ਤੱਕ, Nuxt.js ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪੂਰੀ ਵੈਬਸਾਈਟ ਕਿਵੇਂ ਬਣਾਈ ਜਾਵੇ।

ਇਹ ਬਹੁਤ ਸਾਰੀਆਂ ਸ਼ਾਨਦਾਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਫਾਇਦਾ ਉਠਾਉਂਦਾ ਹੈ ਜੋ Nuxt ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ ਪੰਨੇ ਅਤੇ ਭਾਗ, ਅਤੇ SCSS ਨਾਲ ਸਟਾਈਲਿੰਗ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਨੈਕਸਟ.ਜਸ
• ਭਾਗ ਅਤੇ ਪੰਨੇ
• ਸਟੋਰੀਬਲਾਕ ਮੋਡੀਊਲ
• ਹੈਗਫਿਸ਼
• ਰਾਜ ਪ੍ਰਬੰਧਨ ਲਈ Vuex
• ਸਟਾਈਲਿੰਗ ਲਈ SCSS
• ਨਕਸਟ ਮਿਡਲਵੇਅਰ

ਇਹ ਇੱਕ ਸੱਚਮੁੱਚ ਸ਼ਾਨਦਾਰ ਪ੍ਰੋਜੈਕਟ ਹੈ, ਜਿਸ ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਸ਼ਾਨਦਾਰ Nuxt.js ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ। ਮੈਨੂੰ ਨਿੱਜੀ ਤੌਰ 'ਤੇ Nuxt ਨਾਲ ਕੰਮ ਕਰਨਾ ਪਸੰਦ ਹੈ ਇਸਲਈ ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਅਜ਼ਮਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਵਧੀਆ Vue ਡਿਵੈਲਪਰ ਵੀ ਬਣਾ ਦੇਵੇਗਾ।

ਗੈਟਸਬੀ ਨਾਲ ਬਲੌਗ

Gatsby React ਅਤੇ GraphQL ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਹੈ। ਇਹ ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਤੀਜਾ ਹੈ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

ਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ, ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਇੱਕ ਬਲੌਗ ਬਣਾਉਣ ਲਈ ਗਟਸਬੀ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਜਿਸਦੀ ਵਰਤੋਂ ਤੁਸੀਂ React ਅਤੇ GraphQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਖੁਦ ਦੇ ਲੇਖ ਲਿਖਣ ਲਈ ਕਰੋਗੇ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਗੈਟਸਬੀ
• ਪ੍ਰਤੀਕਿਰਿਆ
• ਗ੍ਰਾਫਕੁਅਲ
• ਪਲੱਗਇਨ ਅਤੇ ਥੀਮ
• MDX/ਮਾਰਕਡਾਊਨ
• ਬੂਟਸਟਰੈਪ CSS
• ਪੈਟਰਨ

ਜੇਕਰ ਤੁਸੀਂ ਕਦੇ ਬਲੌਗ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਇਹ ਇੱਕ ਵਧੀਆ ਉਦਾਹਰਣ ਹੈ React ਅਤੇ GraphQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ।

ਮੈਂ ਇਹ ਨਹੀਂ ਕਹਿ ਰਿਹਾ ਕਿ ਵਰਡਪਰੈਸ ਇੱਕ ਬੁਰਾ ਵਿਕਲਪ ਹੈ, ਪਰ ਗੈਟਸਬੀ ਨਾਲ ਤੁਸੀਂ ਰੀਐਕਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ ਵਾਲੀਆਂ ਵੈਬਸਾਈਟਾਂ ਬਣਾ ਸਕਦੇ ਹੋ - ਜੋ ਕਿ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸੁਮੇਲ ਹੈ.

Gridsome ਨਾਲ ਬਲੌਗ

Vue ਲਈ Gridsome... ਠੀਕ ਹੈ, ਸਾਡੇ ਕੋਲ ਇਹ ਪਹਿਲਾਂ ਹੀ Next/Nuxt ਨਾਲ ਸੀ।
ਪਰ ਗ੍ਰਿਡਸੋਮ ਅਤੇ ਗੈਟਸਬੀ ਲਈ ਵੀ ਇਹੀ ਸੱਚ ਹੈ। ਦੋਵੇਂ ਗ੍ਰਾਫ਼ਕਿਊਐਲ ਨੂੰ ਆਪਣੀ ਡੇਟਾ ਲੇਅਰ ਵਜੋਂ ਵਰਤਦੇ ਹਨ, ਪਰ ਗ੍ਰਿਡਸੋਮ VueJS ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਵੀ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਵਧੀਆ ਬਲੌਗ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

ਇਹ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਸਿਖਾਏਗਾ ਕਿ Gridsome, GraphQL ਅਤੇ Markdown ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ ਇੱਕ ਸਧਾਰਨ ਬਲੌਗ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ। ਇਸ ਵਿੱਚ ਇਹ ਵੀ ਸ਼ਾਮਲ ਹੈ ਕਿ Netlify ਦੁਆਰਾ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਤੈਨਾਤ ਕਰਨਾ ਹੈ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਗਰੀਡਸਮ
• ਵੀ
• ਗ੍ਰਾਫਕੁਅਲ
• ਮਾਰਕਡਾਊਨ
• ਨੈੱਟਲੀਫਾਈ

ਇਹ ਨਿਸ਼ਚਿਤ ਤੌਰ 'ਤੇ ਸਭ ਤੋਂ ਵਿਆਪਕ ਟਿਊਟੋਰਿਅਲ ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਗ੍ਰਿਡਸੋਮ ਦੀਆਂ ਬੁਨਿਆਦੀ ਧਾਰਨਾਵਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ ਅਤੇ ਮਾਰਕਡਾਉਨ ਇੱਕ ਵਧੀਆ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਹੋ ਸਕਦਾ ਹੈ.

Quasar ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ SoundCloud-ਵਰਗੇ ਆਡੀਓ ਪਲੇਅਰ

Quasar ਇੱਕ ਹੋਰ Vue ਫਰੇਮਵਰਕ ਹੈ ਜਿਸਦੀ ਵਰਤੋਂ ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਤੁਸੀਂ ਇੱਕ ਆਡੀਓ ਪਲੇਅਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਗੇ, ਉਦਾਹਰਨ ਲਈ:

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ

ਜਦੋਂ ਕਿ ਦੂਜੇ ਪ੍ਰੋਜੈਕਟ ਮੁੱਖ ਤੌਰ 'ਤੇ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ 'ਤੇ ਕੇਂਦ੍ਰਤ ਕਰਦੇ ਹਨ, ਇਹ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ Vue ਅਤੇ Quasar ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨ ਕਿਵੇਂ ਬਣਾਈ ਜਾਵੇ।
ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਐਂਡਰੌਇਡ ਸਟੂਡੀਓ/ਐਕਸਕੋਡ ਕੌਂਫਿਗਰ ਕੀਤਾ ਹੋਇਆ ਕੋਰਡੋਵਾ ਚੱਲ ਰਿਹਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਜੇਕਰ ਨਹੀਂ, ਤਾਂ ਮੈਨੂਅਲ ਵਿੱਚ Quasar ਵੈੱਬਸਾਈਟ ਦਾ ਲਿੰਕ ਹੈ ਜਿੱਥੇ ਉਹ ਤੁਹਾਨੂੰ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਹਰ ਚੀਜ਼ ਨੂੰ ਕਿਵੇਂ ਸੈੱਟ ਕਰਨਾ ਹੈ।

ਤਕਨੀਕੀ ਸਟੈਕ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਕਵਾਸਰ
• ਵੀ
• ਕੋਰਡੋੋਵਾ
• ਵੇਵਸਰਫਰ
• UI ਭਾਗ

ਛੋਟਾ ਪ੍ਰੋਜੈਕਟ, ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ Quasar ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨਾ।

ਸਰੋਤ: www.habr.com