Back to Question Center
0

ਕੋਨੀਅਰ ਡਿਲੇਜਨਸ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ            ਕੋਨੀਅਰ ਡਿਵੈਲਪਰਸ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲਿਤ ਸਮਾਲਟ: npmAPIsReactAngularJSES6 ਹੋਰ ... ਪ੍ਰਾਯੋਜਕ

1 answers:
ਕੋਨੀਅਰ ਡਿਵੈਲਪਰਜ਼ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆ

ਰੀਐਕਟੇਸ਼ਨ ਦੀ ਉੱਚ-ਗੁਣਵੱਤਾ, ਡੂੰਘਾਈ ਨਾਲ ਜਾਣ ਪਛਾਣ ਲਈ, ਤੁਸੀਂ ਕੈਨੇਡਾ ਦੇ ਪੂਰੇ ਸਟੈਕ ਡਿਵੈਲਪਰ ਵੇਸ ਬੋਸ ਤੋਂ ਪਹਿਲਾਂ ਨਹੀਂ ਜਾ ਸਕਦੇ. ਇੱਥੇ ਆਪਣੇ ਕੋਰਸ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਅਤੇ ਕੋਡ SITEPOINT ਨੂੰ 25% ਬੰਦ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਅਤੇ ਸਾਈਟਪੌਰਟ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਸਹਾਇਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਇਹ ਲੇਖ ਡਿਵੈਲਪਰ ਲਈ ਹੈ ਜੋ ਕੋਣੀਰ 1 - battery efest 18650.x ਤੋਂ ਜਾਣੂ ਹਨ ਅਤੇ ਸਮਾਲਟ ਬਾਰੇ ਹੋਰ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹਨ. ਅਸੀਂ ਅਮੀਰ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ, ਓਵਰਲਾਪਿੰਗ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸੈਮਟ ਨੂੰ ਭਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਨਹੀਂ ਕਰਦੇ ਵਿੱਥਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਵੱਖਰੇ ਵੱਖਰੇ ਪਹੁੰਚਾਂ ਨੂੰ ਦੇਖਾਂਗੇ.

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

ਫਰੇਮਵਰਕ ਬਨਾਮ ਲਾਇਬਰੇਰੀਆਂ

ਕੋਨੀਅਰ ਇਕ ਫਰੇਮਵਰਕ ਹੈ, ਜਦੋਂ ਕਿ ਰੀਕੈਕਟ ਇੱਕ ਲਾਇਬਰੇਰੀ ਸਿਰਫ ਵਿਊ ਲੇਅਰ ਤੇ ਹੈ. ਫਰੇਮਵਰਕ ਅਤੇ ਹੌਲੀ-ਹੌਲੀ ਮਿਲਦੀਆਂ ਲਾਇਬਰੇਰੀਆਂ ਦੇ ਸੰਗ੍ਰਹਿ ਦਾ ਇਸਤੇਮਾਲ ਕਰਕੇ ਦੋਵਾਂ ਨਾਲ ਸੰਬੰਧਿਤ ਖ਼ਰਚੇ ਅਤੇ ਲਾਭ ਹਨ.

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

ਛੋਟਾ ਏਪੀਆਈ ਨਾਲ ਛੋਟੇ ਜਿਹੇ ਜੁੜੇ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੇ ਸੰਗ੍ਰਹਿ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਸਿੱਖਣਾ ਅਤੇ ਮਾਸਟਰ ਕਰਨਾ ਸੌਖਾ ਹੈ, ਪਰ ਇਸ ਦਾ ਭਾਵ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਸਮੱਸਿਆਵਾਂ ਵਿੱਚ ਚਲੇ ਜਾਂਦੇ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਹੋਰ ਕੋਡ ਦੇ ਨਾਲ ਹੱਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ ਜਾਂ ਲੋੜੀਂਦੀਆਂ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚ ਖਿੱਚ ਲਵੇਗੀ. ਇਸਦਾ ਆਮ ਤੌਰ ਤੇ ਤੁਹਾਡੇ ਵਿੱਚ ਲਿਖਣ ਆਪਣੀ ਖੁਦ ਦੀ ਫਰੇਮਵਰਕ ਹੈ ਜੋ ਬਾਇਲਰਪਲੇਟ ਘਟਾਉਣ ਲਈ ਹੈ.

ਸਿਫਾਰਸ਼ੀ ਕੋਰਸ

ਬਾਕਸ ਦੇ ਬਾਹਰ

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

  • ਡਬਲ curlies ਵਿੱਚ ਡਾਇਨਾਮਿਕ ਅਹਿਸਾਸ ਨਾਲ HTML ਖਾਕੇ {{}}
  • ਐਨ.ਜੀ.-ਮਾਡਲ , ਐਨਜੀ-ਰੀਵੋਟ ਅਤੇ ਐਨਜੀ-ਕਲਾਸ ਦੀ ਸਮਰੱਥਾ ਵਧਾਉਣ ਲਈ HTML ਦੀ ਸਮਰੱਥਾ ਵਧਾਉਣ ਲਈ ਬਣਾਇਆ ਗਿਆ ਡਾਇਰੈਕਟਿਵ
  • ਤਰਕ ਵੰਡਣ ਅਤੇ ਵੇਖਣ ਲਈ ਡੇਟਾ ਪਾਸ ਕਰਨ ਲਈ ਕੰਟਰੋਲਰ
  • ਦੋ-ਤਰੀਕੇ ਨਾਲ ਆਪਣੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਅਤੇ ਕੰਟਰੋਲਰ ਨੂੰ ਸਮਕਾਲੀ ਰੱਖਣ ਦੇ ਸਧਾਰਨ ਤਰੀਕੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬਾਈਡਿੰਗ
  • ਮੋਡਿਊਲਾਂ ਦੀ ਇੱਕ ਵੱਡਾ ਸੰਗ੍ਰਹਿ ਜਿਵੇਂ ਕਿ ਸਰਵਰ ਨਾਲ ਸੰਚਾਰ ਲਈ $ http ਅਤੇ ਰੂਟਿੰਗ ਲਈ ਨਗਰੂਟ
  • ਆਪਣੀ ਖੁਦ ਦੀ HTML ਸੰਟੈਕਸ ਤਿਆਰ ਕਰਨ ਲਈ ਕਸਟਮ ਨਿਰਦੇਸ਼
  • ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਖਾਸ ਭਾਗਾਂ ਲਈ ਆਬਜੈਕਟ ਦੇ ਐਕਸਪੋਜਰ ਨੂੰ ਸੀਮਿਤ ਕਰਨ ਲਈ ਨਿਰਭਰਤਾ ਦਾ ਟੀਕਾ
  • ਸਾਂਝੇ ਕਾਰੋਬਾਰੀ ਤਰਕ ਲਈ ਸੇਵਾਵਾਂ
  • ਝਲਕ ਫਾਰਮੈਟਿੰਗ ਹੈਲਪਰਾਂ ਲਈ ਫਿਲਟਰ

ਦੂਜੇ ਪਾਸੇ ਮੀਲਟ, ਤੁਹਾਨੂੰ ਦਿੰਦਾ ਹੈ:

  • ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਮੀਕਰਣ ਨਾਲ ਖਾਕੇ ਦੇ ਲਈ JSX ਸੰਟੈਕਸ ਸਿੰਗਲ ਕੜੀ ਵਿੱਚ {}
  • ਹਿੱਸੇ, ਜੋ ਕਿ ਕੋਣੀ ਦੇ ਤੱਤ ਨਿਰਦੇਸ਼ਾਂ ਵਰਗੇ ਹਨ.

ਜਦੋਂ ਇਹ ਤੁਹਾਡੀ ਅਰਜ਼ੀ ਢਾਂਚੇ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਤੇ ਆਉਂਦਾ ਹੈ ਤਾਂ ਇਸਦਾ ਕੋਈ ਪ੍ਰਤੀਕਿਰਿਆ ਨਹੀਂ ਹੈ ਅਤੇ ਇਹ ਫਰੇਮਵਰਕ ਐਬਸਟਰੈਕਸ਼ਨਾਂ ਤੋਂ ਵੱਧ ਮਿਆਰੀ ਸਮਾਲ API ਵਰਤਣ ਦੀ ਪ੍ਰੇਰਣਾ ਦਿੰਦਾ ਹੈ. ਸਰਵਰ ਸੰਚਾਰ ਲਈ $ http ਦੀ ਤਰਾਂ ਇੱਕ ਰੈਪਰ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇਸਦੀ ਬਜਾਏ fetch ਵਰਤ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਸਰਵਿਸਾਂ ਅਤੇ ਫਿਲਟਰਾਂ ਵਰਗੇ ਬਣਤਰਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਲਈ ਆਜ਼ਾਦ ਹੋ, ਪਰ ਉਹਨਾਂ ਲਈ ਰਿਐਕਟੇਸ਼ਨ ਐਬਸਟਰੈਕਸ਼ਨ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰੇਗੀ. ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਸਿਮਟੈਲ ਮੌਡਿਊਲਾਂ ਵਿੱਚ ਪਾ ਸਕਦੇ ਹੋ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ ਜ਼ਰੂਰਤ ਦੇ ਸਕਦੇ ਹੋ.

ਇਸ ਲਈ, ਜਦੋਂ ਕਿ ਕੋਨੀਅਰ ਤੁਹਾਨੂੰ ਆਮ ਕੰਮਾਂ ਲਈ ਬਹੁਤ ਜ਼ਿਆਦਾ ਐਬਸਟਰੈਕਸ਼ਨ ਦਿੰਦਾ ਹੈ, ਜਾਣਬੁੱਝ ਕੇ ਇਸ ਤੋਂ ਬਚਿਆ ਜਾ ਸਕਦਾ ਹੈ ਤਾਂ ਕਿ ਤੁਹਾਨੂੰ ਸਟੈਂਡਰਡ ਸਿਮਟ ਨੂੰ ਜ਼ਿਆਦਾਤਰ ਲਿਖਣ ਲਈ ਅਤੇ ਬਾਕੀ ਸਭ ਕੁਝ ਲਈ ਬਾਹਰੀ ਨਿਰਦੇਸ਼ਨ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨ.

ਸਿਫਾਰਸ਼ੀ ਕੋਰਸ

ਬੂਟਸਪੇਪਿੰਗ

Semalt ਐਪਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਇੱਕ ਮੋਡੀਊਲ, ਨਿਰਭਰਤਾ ਦੀ ਇੱਕ ਸੂਚੀ ਅਤੇ ਇੱਕ ਰੂਟ ਐਲੀਮੈਂਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ.

     ਐਪ = ਕੋਣੀ. ਸਵਾਲ-ਚੋਣਕਾਰ ('# ਰੂਟ');ਕੋਣੀ ਤੱਤ (ਰੂਟ) ਤਿਆਰ (ਫੰਕਸ਼ਨ)    {ਕੋਣੀ ਬੂਟਸਟਰੈਪ (ਰੂਟ, ['ਐਪ']);});    

ਰੀਐਕਟ ਲਈ ਐਂਟਰੀ ਪੁਆਇੰਟ ਰੂਟ ਨੋਡ ਵਿਚ ਇਕ ਭਾਗ ਪੇਸ਼ ਕਰਨਾ ਹੈ. ਕਈ ਰੂਟ ਭਾਗ ਵੀ ਹੋਣ ਯੋਗ ਹੋ ਸਕਦੇ ਹਨ:

     ਰੂਟ = ਦਸਤਾਵੇਜ਼ ਦਿਉ. ਸਵਾਲ-ਚੋਣਕਾਰ ('# ਰੂਟ');ਪ੍ਰਤੀਕਰਮ ਰੈਂਡਰ (, ਰੂਟ)    

ਨਮੂਨੇ

ਕੋਨਲਰ ਵਿਊ ਦਾ ਅੰਗ ਵਿਗਿਆਨ ਜਟਿਲ ਹੈ ਅਤੇ ਉਸ ਦੀਆਂ ਕਈ ਜ਼ਿੰਮੇਵਾਰੀਆਂ ਹਨ. ਤੁਹਾਡੇ HTML ਟੈਮਪਲੇਟਾਂ ਵਿੱਚ ਨਿਰਦੇਸ਼ਾਂ ਅਤੇ ਪ੍ਰਗਟਾਵਾਂ ਦੇ ਇੱਕ ਮਿਸ਼ਰਤ ਹੁੰਦੇ ਹਨ, ਜੋ ਦ੍ਰਿਸ਼ ਅਤੇ ਸਬੰਧਿਤ ਨਿਯੰਤਰਕਾਂ ਨੂੰ ਇਕੱਠੇ ਮਿਲਦੇ ਹਨ. ਡਾਟਾ $ ਸਕੋਪ ਦੁਆਰਾ ਕਈ ਵੱਖੋ-ਵੱਖਰੇ ਪ੍ਰਸੰਗਾਂ ਵਿਚ ਡਾਟਾ ਵਹਿੰਦਾ ਹੈ.

ਰਿਐਕਟੇਡ ਵਿਚ, ਇਹ ਸਾਰੇ ਹਿੱਸੇ ਸਾਰੇ ਤਰੀਕੇ ਨਾਲ ਥੱਲੇ ਹਨ, ਡੇਟਾ ਟਰੀ ਦੇ ਉੱਪਰਲੇ ਹਿੱਸੇ ਤੋਂ ਇਕ ਦਿਸ਼ਾ ਵਿਚ ਪੱਤੀ ਦੇ ਨੋਡਾਂ ਤਕ ਜਾਂਦੇ ਹਨ. JSX ਕੰਪੋਨੈਂਟਸ ਲਿਖਣ ਲਈ ਸਭ ਤੋਂ ਅਨੋਖਾ ਉਦਾਹਰਣ ਹੈ, ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇੱਕ ਜਾਣੂ XML ਢਾਂਚੇ ਨੂੰ ਬਦਲਣਾ. ਜਦ ਕਿ ਇਹ ਕਰਦਾ ਹੈ ਇੱਕ ਖਾਕਾ ਸੰਟੈਕਸ, ਇਹ ਨੈਸਟਡ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ.

     const ਐਪ = ਪ੍ਰਤੀਕਿਰਿਆ createClass ({ਰੈਂਡਰ: ਫੰਕਸ਼ਨ    {ਵਾਪਸੀ (<ਕੰਪੋਨੈਂਟ> 
{2 + 1}
<ਕੰਪੋਨੈਂਟ ਸਪੋਰਟ = "ਵੈਲਯੂ" /><ਕੰਪੋਨੈਂਟ ਟਾਈਮ = {ਨਵੀਂ ਤਾਰੀਖ} getTime }><ਕੰਪੋਨੈਂਟ />)}})

ਹੇਠਾਂ ਕੰਪਾਇਲ ਕੀਤੇ ਗਏ ਕੋਡ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ ਕਿ ਮੈਪ ਤੋਂ ਉੱਪਰਲੇ JSX ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਕਿਵੇਂ ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਕੰਪੋਨੈਂਟ, ਪਰੋਪ, ਬੱਚੇ) ਫੰਕਸ਼ਨ ਕਾਲ:

     var ਐਪ = ਰੀਐਕਟ. createClass ({ਰੈਂਡਰ: ਫੰਕਸ਼ਨ ਰੈਂਡਰ    {ਵਾਪਸੀ ਰਿਐਕਟ createElement (ਕੰਪੋਨੈਂਟ,ਨੱਲ,ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ createElement ("div", null, 2 + 1),ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ ਬਣਾਓ ਐਲੇਮੈਂਟ (ਕੰਪੋਨੈਂਟ, {prop: "value"}),ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ createElement (ਕੰਪੋਨੈਂਟ,{ਸਮਾਂ: ਨਵੀਂ ਤਾਰੀਖ    GetTime   },ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ createElement (ਕੰਪੋਨੈਂਟ, ਨੱਲ)));}});    

ਟੇਪਲੇਟ ਡਾਇਰੈਕਟਿਵ

ਆਓ ਦੇਖੀਏ ਕਿ ਕੋਨਵਾਈਰ ਦੇ ਸਭ ਤੋਂ ਵੱਧ ਵਰਤੇ ਜਾਂਦੇ ਟੈਮਪਲੇਟ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਰਿਐਕਟੇਡ ਕੰਪੋਨੈਂਟਸ ਵਿਚ ਕਿਵੇਂ ਲਿਖਿਆ ਜਾਵੇਗਾ. ਹੁਣ, ਰੀਟੇਕ ਕੋਲ ਟੈਮਪਲੇਟਸ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਇਹ ਉਦਾਹਰਨਾਂ JSX ਕੋਡ ਹਨ ਜੋ ਇੱਕ ਕੰਪੋਨੈਂਟ ਦੇ ਰੈਂਡਰ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਬੈਠ ਸਕਦੀਆਂ ਹਨ. ਉਦਾਹਰਣ ਵਜੋਂ:

     ਕਲਾਸ ਮਾਈਕੰਪੇਂਨਟ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਧਾਉਂਦੀ ਹੈ. ਕੰਪੋਨੈਂਟ {ਦੇਣਾ ਹੈ   {ਵਾਪਸੀ (// ਜੇ.ਐਸ.ਐੱਸ. ਇੱਥੇ ਰਹਿੰਦਾ ਹੈ)}}    

ng- ਦੁਹਰਾਓ

      
  • {ਸ਼ਬਦ}

ਅਸੀਂ ਮਿਆਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲੂਪਿੰਗ ਢੰਗਾਂ ਜਿਵੇਂ ਕਿ ਮੈਪ ਨੂੰ JSX ਵਿਚਲੇ ਐਲੀਮੈਂਟਸ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤ ਸਕਦੇ ਹਾਂ.

      
    {ਸ਼ਬਦ ਮੈਪ ((ਸ਼ਬਦ) =>
  • {ਸ਼ਬਦ}
  • )}

ਐਨਜੀ-ਕਲਾਸ

      <ਫਾਰਮ ng-class = "{ਸਕਿਰਿਆ: ਕਿਰਿਆਸ਼ੀਲ, ਗਲਤੀ: ਗਲਤੀ}">       

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

     <ਫਾਰਮ className = {classNames ({active: ਸਰਗਰਮ, ਗਲਤੀ: ਗਲਤੀ}}}>      

JSX ਵਿੱਚ ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਸੋਚਣ ਦਾ ਤਰੀਕਾ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੋਡਾਂ ਤੇ ਸੰਪਤੀਆਂ ਨੂੰ ਸਿੱਧੇ ਤੌਰ ਤੇ ਸੈਟ ਕਰ ਰਹੇ ਹੋ ਇਹੀ ਕਾਰਨ ਹੈ ਕਿ ਕਲਾਸ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਨਾਮ ਦੀ ਬਜਾਏ ਕਲਾਸ ਨੇਮ ਹੈ.

     ਫਾਰਮਨੌਡ className = "ਕਿਰਿਆਸ਼ੀਲ ਗਲਤੀ";    

ਐਨਜੀ-ਜੇ

      

Yep

ਜੇ .ਹੋਰ ਬਿਆਨ JSX ਦੇ ਅੰਦਰ ਕੰਮ ਨਹੀਂ ਕਰਦੇ ਹਨ, ਕਿਉਂਕਿ JSX ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਅਤੇ ਆਬਜੈਕਟ ਕੰਨਸਟਰੱਕਟ ਲਈ ਸਿਰਫ ਸੰਕੀਰਣ ਖੰਡ ਹੈ. ਇਸ ਲਈ ਟਿਰਨਰੀ ਅਪਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਜਾਂ ਰੈਂਡਰ ਵਿਧੀ ਦੇ ਸਿਖਰ ਤੇ ਕੰਡੀਸ਼ਨਲ ਲਾਜ਼ਿਕ ਨੂੰ ਜਾਣ ਲਈ ਵਿਸ਼ੇਸ਼ ਹੈ, JSX ਦੇ ਬਾਹਰ. ਓਹਲੇ (ਡਿਸਪਲੇਅ: ਕੋਈ ਨਹੀਂ) , ਆਪਣੇ ਤੱਤਾਂ ਨੂੰ ਲੁਕਾਉਣ ਦੇ ਮੰਤਵ ਲਈ (ਜੋ ਕਿ ਕੋਨਾਰੂਅਰ ਇਸ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ)

     

ਜੀਵਤ

ਭੂਤ

ਲਿਵਿੰਗ

ਭੂਤ

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

ਇੱਕ ਉਦਾਹਰਣ ਕੰਪੋਨੈਂਟ

ਰੀਐਕਟਸ ਕੰਪੋਨੈਂਟਸ ਸਭ ਤੋਂ ਜਿਆਦਾ ਕੋਨੀਅਰ ਦੇ ਹਨ ਡਾਇਰੈਕਟਿਵ . ਉਹ ਮੁੱਖ ਤੌਰ ਤੇ ਸੰਪੂਰਨ DOM ਢਾਂਚਿਆਂ ਅਤੇ ਵਰਤੀ ਜਾ ਸਕਣ ਵਾਲੇ ਟੁਕੜਿਆਂ ਵਿਚ ਵਰਤੀ ਜਾ ਰਹੇ ਹਨ. ਹੇਠ ਇੱਕ ਸਲਾਈਡਸ਼ੋਅ ਭਾਗ ਦਾ ਇੱਕ ਉਦਾਹਰਣ ਹੈ ਜੋ ਸਲਾਈਡਾਂ ਦੀ ਲੜੀ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ, ਨੇਵੀਗੇਸ਼ਨਲ ਐਲੀਮੈਂਟਸ ਨਾਲ ਚਿੱਤਰਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਆਪਣੀ ਖੁਦ ਦੀ ਐਕਟਿਵਇੰਡੈਕਸ ਸਥਿਤੀ ਨੂੰ ਸਕ੍ਰਿਆ ਸਲਾਈਡ ਨੂੰ ਹਾਈਲਾਈਟ ਕਰਨ ਲਈ ਰੱਖਦਾ ਹੈ.

     
<ਸਲਾਇਡ-ਸ਼ੋਅ ਸਲਾਈਡਾਂ = "ਸਲਾਈਡਾਂ">
     ਐਪ ਕੰਟਰੋਲਰ ("ਸਲਾਇਡਸ਼ੋ ਕੰਟਰੋਲਰ"), ਫੰਕਸ਼ਨ ($ ਸਕੋਪ) {$ ਸਕੋਪ ਸਲਾਈਡਾਂ = [{imageUrl: "ਐਲਨ-ਬੀਵਰ. jpg",ਸੁਰਖੀ: "ਐਲਨ ਐਲਨ ਅਲ ਅਲ ਅਲਨ"}, {imageUrl: "ਸਟੀਵ-ਬੀਵਰ. jpg",ਸੁਰਖੀ: "ਸਟੀਵ ਸਟੀਵ ਸਟੀਵ"}];});ਐਪ ਡਾਇਰੈਕਟਿਵ ("ਸਲਾਈਡਸ਼ਾਓ", ਫੰਕਸ਼ਨ    {ਵਾਪਸੀ {ਸੀਮਤ ਕਰੋ: 'ਈ',ਸਕੋਪ: {ਸਲਾਈਡ: '='},ਟੈਪਲੇਟ: `
  • <ਅੰਜੀਕਣ ng-show = "ਸਲਾਈਡ. ਸੁਰਖੀ"> {{ਸਲਾਈਡ. ਸੁਰਖੀ}}
  • {{$ ਇੰਡੈਕਸ} 1}}
`,ਲਿੰਕ: ਫੰਕਸ਼ਨ ($ ਸਕੋਪ, ਐਲੀਮੈਂਟ, ਐਟ੍ਰਿਸ) {$ ਸਕੋਪ activeIndex = 0;$ ਸਕੋਪ jumpToSlide = ਫੰਕਸ਼ਨ (ਇੰਡੈਕਸ) {$ ਸਕੋਪ activeIndex = ਇੰਡੈਕਸ;};}};});

ਕੋਨੀਅਰ ਵਿੱਚ ਸਲਾਈਡਸ਼ੋ ਕੰਪੋਨੈਂਟ

ਕੋਡਪੈਨ 'ਤੇ ਸਾਈਟ ਪੇੰਟ (@ਸੇਟਪੁਆਇੰਟ) ਦੁਆਰਾ ਪੇਨ ਕੋਨੁਲਰੀ ਸਲਾਈਡਸ਼ਾ ਦੇਖੋ.

ਸਾਮਾਲਟ ਵਿਚ ਇਹ ਕੰਪੋਨੈਂਟ ਦੂਜੇ ਭਾਗ ਵਿਚ ਰੈਂਡਰ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਸਪੀਪਸ ਰਾਹੀਂ ਸਲਾਈਡ ਡਾਟਾ ਪਾਸ ਕਰੇਗਾ.

     ਦਿਉ _slides = [{imageUrl: "ਐਲਨ-ਬੀਵਰ. jpg",ਸੁਰਖੀ: "ਐਲਨ ਐਲਨ ਅਲ ਅਲ ਅਲਨ"}, {imageUrl: "ਸਟੀਵ-ਬੀਵਰ. jpg",ਸੁਰਖੀ: "ਸਟੀਵ ਸਟੀਵ ਸਟੀਵ"}];ਕਲਾਸ ਐਪ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟ {ਦੇਣਾ ਹੈ   {ਵਾਪਸੀ <ਸਲਾਈਡ ਸ਼ੋ ਸਲਾਈਡ = {_slides} />}}    

ਇਸ ਗੱਲ ਤੇ ਪ੍ਰਤੀਕਰਮ ਕਰੋ ਕਿ ਇਕ ਹਿੱਸੇ ਵਿਚ ਲੋਕਲ ਖੇਤਰ ਹੈ. ਰਾਜ , ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਾਲ ਕਰਕੇ ਤਬਦੀਲ ਕਰ ਸਕਦੇ ਹੋ. setState ({ਕੁੰਜੀ: ਮੁੱਲ}) . ਰਾਜ ਵਿੱਚ ਕੋਈ ਵੀ ਤਬਦੀਲੀ ਕਾਰਨ ਕੰਪੋਨੈਂਟ ਨੂੰ ਖੁਦ ਮੁੜ ਪੇਸ਼ ਕਰਨ ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ.

     ਕਲਾਸ ਸਲਾਇਡਸ਼ੋ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਧਾਉਂਦੀ ਹੈ. ਕੰਪੋਨੈਂਟ {ਕੰਸਟ੍ਰੈਕਟਰ    {ਸੁਪਰ   ਇਹ. ਰਾਜ = {activeIndex: 0};}ਜੰਫਟੋਸਲਾਇਡ (ਇੰਡੈਕਸ) {ਇਹ. setState ({activeIndex: index});}ਦੇਣਾ ਹੈ   {ਵਾਪਸੀ (
    {ਇਹ. ਖਿਡੌਣੇ ਸਲਾਈਡਜ਼ ਨਕਸ਼ਾ (ਸਲਾਈਡ, ਇੰਡੈਕਸ) => (
  • {ਸਲਾਇਡ. ਸੁਰਖੀ ? <ਕਲਪਨਾ ਕਰੋ> {ਸਲਾਈਡ. ਸੁਰਖੀ} : null}
  • ))}
    {ਇਹ. ਖਿਡੌਣੇ ਸਲਾਈਡਜ਼ ਨਕਸ਼ਾ (ਸਲਾਈਡ, ਇੰਡੈਕਸ) => (
  • {ਇੰਡੈਕਸ + 1}
  • ))}
);}}

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

ਸਲਾਈਡਸ਼ੋ ਕੰਪੋਨੈਂਟ ਇਨ ਰਿਐਕਟ

ਕੋਡਪੈਨ ਤੇ ਸੈਂਟ ਪਾਈਪ ਸਲਾਈਡ ਸ਼ੋ ਵੇਖੋ (@ਸੀਟਪੁਆਇੰਟ).

ਦੋ-ਪਾਬੰਦੀਆਂ

ਕੋਨੁਲਾਰ ਦੇ ਭਰੋਸੇਮੰਦ ਐਨਜੀ-ਮਾਡਲ ਅਤੇ $ ਦਾ ਸਕੋਪ ਇੱਕ ਲਿੰਕ ਬਣਾਉਂਦੇ ਹਨ ਜਿੱਥੇ ਇੱਕ ਨਿਯੰਤਰਕ ਵਿੱਚ JavaScript ਔਬਜੈਕਟ ਤੇ ਇੱਕ ਫਾਰਮ ਐਲੀਮੈਂਟ ਅਤੇ ਪ੍ਰਾਪਰਟੀ ਦੇ ਵਿੱਚ ਅੱਗੇ ਅਤੇ ਅੱਗੇ ਡਾਟਾ ਫੈਲਦਾ ਹੈ.

     ਐਪ ਕੰਟਰੋਲਰ ("ਦੋਵਾਏਕੰਟਰੋਲਰ", ਫੰਕਸ਼ਨ ($ ਸਕੋਪ) {$ ਸਕੋਪ ਵਿਅਕਤੀ = {ਨਾਮ: 'ਬਰੂਸ'};});     
     
<ਇਨਪੁਟ ng- ਮਾਡਲ = "ਵਿਅਕਤੀ. ਨਾਮ" />

ਹੈਲੋ {{ਵਿਅਕਤੀ. name}}!

ਸਮਾਲਟ ਇਸ ਪੈਟਰਨ ਨੂੰ ਇੱਕ ਇਕ ਤਰਫ ਡਾਟਾ ਵਹਾਅ ਦੇ ਹੱਕ ਵਿਚ ਛੱਡ ਦਿੰਦਾ ਹੈ. ਇੱਕੋ ਕਿਸਮ ਦੇ ਵਿਚਾਰਾਂ ਨੂੰ ਦੋਵਾਂ ਪੈੜਾਂ ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ.

     ਕਲਾਸ OneWayComponent ਰਿਐਕਟਰ ਵਧਾਉਂਦਾ ਹੈ. ਕੰਪੋਨੈਂਟ {ਕੰਸਟ੍ਰੈਕਟਰ    {ਸੁਪਰ   ਇਹ. ਰਾਜ = {ਨਾਮ: 'ਬਰੂਸ'}}ਤਬਦੀਲੀ (ਘਟਨਾ) {ਇਹ. setState ({name: event. target.value});}ਦੇਣਾ ਹੈ   {ਵਾਪਸੀ ( 
<ਇਨਪੁਟ ਵੈਲਯੂ = {ਇਹ. ਰਾਜ name} onChange = {(event) => ਇਹ. ਬਦਲ (ਘਟਨਾ)} />

ਹੈਲੋ {ਇਹ. ਰਾਜ name}!

);}}

<ਇਨਪੁਟ> ਨੂੰ ਇੱਥੇ "ਕੰਟ੍ਰੋਲ ਇੰਪੁੱਟ" ਕਿਹਾ ਗਿਆ ਹੈ. ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਸ ਦਾ ਮੁੱਲ ਸਿਰਫ ਉਦੋਂ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ `ਰੈਂਡਰ` ਫੰਕਸ਼ਨ ਨੂੰ ਕਿਹਾ ਜਾਂਦਾ ਹੈ (ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ ਹਰੇਕ ਕੁੰਜੀ ਸਟਰੋਕਸ ਤੇ). ਇਸ ਭਾਗ ਨੂੰ "ਸਟੇਟਫੁੱਲ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਆਪਣੇ ਡਾਟਾ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ. ਇਸਦੇ ਬਹੁਤੇ ਹਿੱਸੇਾਂ ਲਈ ਇਹ ਸਿਫਾਰਸ਼ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ. ਆਦਰਸ਼ਕ ਕੰਪੋਨੈਂਟ ਨੂੰ "ਸਟੇਟਲੁਅਲ" ਰੱਖਣਾ ਹੈ ਅਤੇ ਇਸਦੇ ਅਨੁਸਾਰ ਪ੍ਰੋਪ ਦੁਆਰਾ ਡਾਟਾ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ.

ਕੋਡਪੈਨ ਤੇ ਸਾਈਟਪੁਆਇੰਟ (@ਸੇਟਪੁਆਇੰਟ) ਦੁਆਰਾ ਪੈੱਨ ਇਕ-ਵੇ ਡਾਟਾ ਵਹਾ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਵੇਖੋ.

ਖਾਸ ਤੌਰ ਤੇ, ਇਕ ਸਟੇਟਫਾਇਲ ਕੰਟੇਨਰ ਕੰਪੋਨੈਂਟ ਜਾਂ ਕੰਟਰੋਲਰ ਦ੍ਰਿਸ਼ ਦਰੱਖਤ ਦੇ ਸਿਖਰ 'ਤੇ ਬੈਠਦਾ ਹੈ ਜਿਸ ਦੇ ਅਨੇਕਾਂ ਸਟੇਟਾਈਲ ਬਾਲ ਤੱਤ ਹਨ. ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਪੜ੍ਹਨ ਲਈ ਸਮਾਨ ਨੂੰ ਕੀ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ? ਡੌਕਸ ਤੋਂ

ਆਪਣੇ ਮਾਪਿਆਂ ਨੂੰ ਕਾਲ ਕਰੋ

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

     // ਇੱਕ ਪੇਸ਼ਕਾਰੀ ਸੰਕਲਪ ਸ਼ੁੱਧ ਕੰਮ ਦੇ ਤੌਰ ਤੇ ਲਿਖਿਆ ਗਿਆ ਹੈconst OneWayComponent = (props) => ( 
<ਇਨਪੁਟ ਵੈਲਯੂ = {ਐਸਪੀਐਸ. name} onChange = {(event) => props ਆਨਚੈਂਜ (ਇਵੈਂਟ ਟੀਚੇ. ਮੁੱਲ)} />

ਹੈਲ {ਪ੍ਰੋਪਸ name}!

);ਕਲਾਸ ਦੇ ਮਾਪੇ ਕੰਪੋਨੈਂਟ {ਕੰਸਟ੍ਰੈਕਟਰ {ਸੁਪਰ ਇਹ. ਰਾਜ = {ਨਾਮ: 'ਬਰੂਸ'};}ਤਬਦੀਲੀ (ਮੁੱਲ) {ਇਹ. setState ({name: value});}ਦੇਣਾ ਹੈ {ਵਾਪਸੀ (

ਹੈਲੋ {ਇਹ. ਰਾਜ name}!

)}}

ਇਹ ਪਹਿਲਾਂ ਵਾਂਗ ਪੈਮਾਨੇ ਵਾਂਗ ਲੱਗ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਦੋ-ਤਰੀਕੇ ਨਾਲ ਡਾਟਾ ਬਾਈਡਿੰਗ ਤੋਂ ਜਾਣੂ ਹੋ. ਛੋਟੇ ਪੇਸ਼ੇਵਰ "ਬੋਲੇ" ਭਾਗਾਂ ਵਾਲੇ ਬਹੁਤ ਸਾਰੇ ਹੋਣ ਦੇ ਫਾਇਦੇ ਜਿਨ੍ਹਾਂ ਨੂੰ ਹੁਣੇ ਹੀ ਪ੍ਰੋਪ ਦੇ ਰੂਪ ਵਿੱਚ ਡੇਟਾ ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਦੇਣਾ ਹੈ ਉਹ ਮੂਲ ਰੂਪ ਵਿੱਚ ਸੌਖਾ ਹੈ, ਅਤੇ ਸਧਾਰਨ ਕੰਪੋਨੈਂਟਸ ਦੂਰ ਘੱਟ ਬੱਗ ਹਨ. ਇਹ ਯੂਆਈ ਨੂੰ ਅਸੰਗਤ ਸਥਿਤੀ ਵਿੱਚ ਹੋਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਅਕਸਰ ਉਦੋਂ ਵਾਪਰਦਾ ਹੈ ਜੇ ਡੇਟਾ ਕਈ ਸਥਾਨਾਂ ਵਿੱਚ ਹੋਵੇ ਅਤੇ ਇਸਨੂੰ ਵੱਖਰੇ ਤੌਰ ਤੇ ਕਾਇਮ ਰੱਖਣ ਦੀ ਲੋੜ ਹੈ. ਤੁਸੀਂ ਅੱਜ ਉਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਇਕ ਉਪਕਰਣ ਜਿਵੇਂ ਕਿ ਵੈਬਪੈਕ, ਸਿਸਟਮਜ ਐਸ ਐਸ ਜਾਂ ਬ੍ਰਾਉਜ਼ਰੱਪ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ.

     // ਨਿਰਭਰਤਾ ਦੇ ਨਾਲ ਇੱਕ ਕੋਨੀਅਰ ਡਾਇਰੈਕਟਿਵਐਪ ਡਾਇਰੈਕਟਿਵ ('myComponent', ['ਸੂਚਕ', '$ ਫਿਲਟਰ', ਫੰਕਸ਼ਨ (ਨੋਟਿਅਰ, $ ਫਿਲਟਰ) {const formatName = $ filter ('formatName');// ਵਰਤੋਂ ਸੂਚਨਾ / ਫਾਰਮੈਟ}]ਇੱਕ ਪ੍ਰਤੀਕੂਲ ਕੰਪੋਨੈਂਟ ਦੁਆਰਾ ਵਰਤੇ ਗਏ ES ES6 ਮਾਡਿਊਲ"ਸੇਵਾਵਾਂ / ਸੂਚਕ" ਤੋਂ ਇੰਪੋਰਟ ਨੋਟੀਫਾਈਰ;"ਫਿਲਟਰ" ਤੋਂ {formatName} ਆਯਾਤ ਕਰੋ;ਕਲਾਸ ਮਾਈਕੰਪੇਂਨਟ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਧਾਉਂਦੀ ਹੈ ਕੰਪੋਨੈਂਟ {// ਵਰਤੋਂ ਸੂਚਨਾ / ਫਾਰਮੈਟ}    

ਸ਼ਾਨਦਾਰ ਆਵਾਜ਼ ਕੀ ਮੈਂ ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹਾਂ?

ਜੀ ਹਾਂ! ਰੈਂਡਰ ਕਰਨਾ ਸੰਭਵ ਹੈ ਇੱਕ ਮੌਜੂਦਾ ਕੋਨਲਾਅਰ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਅੰਦਰ ਹਿੱਸੇ ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋ. ਬੈਨ ਨਾਡਲ ਨੇ ਸਕੈਨਕਾਸਟ ਦੇ ਨਾਲ ਇਕ ਵਧੀਆ ਪੋਸਟ ਇਕੱਠਾ ਕੀਤਾ ਹੈ ਜਿਸ ਨੂੰ ਰੈਂਡਰ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਕੋਨੂਲਰ ਡਾਇਰੇਕਟਿਵ ਦੇ ਅੰਦਰ ਹਿੱਸੇ ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨਾ. ਐਨਗਰੇਟੀ ਵੀ ਹੈ, ਜੋ ਰੀੈਕਟ ਅਤੇ ਕੋਨੀਅਰ ਦੇ ਵਿਚਕਾਰ ਗੂੰਦ ਦੇ ਤੌਰ ਤੇ ਕੰਮ ਕਰਨ ਲਈ ਰਿਐਕ-ਕੰਪਨੈਂਟ ਡਾਇਰੈਕਟਿਵ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ.

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

ਜਦੋਂ ਸਮਾਲ ਅਤੇ ਕੋਨੀਅਰ ਇੱਕੋ ਜਿਹੀਆਂ ਸਮੱਸਿਆਵਾਂ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ, ਉਹ ਇਸਦੇ ਬਾਰੇ ਬਹੁਤ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਸਮਝਦੇ ਹਨ ਸ਼ਮੂਲੀਅਤ ਇੱਕ ਕਾਰਜਸ਼ੀਲ, ਘੋਸ਼ਣਾਤਮਿਕ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਦੀ ਪੂਰਤੀ ਕਰਦਾ ਹੈ, ਜਿੱਥੇ ਕਿ ਹਿੱਸੇ ਸ਼ੁੱਧ ਕੰਮ ਮਾੜੇ ਪ੍ਰਭਾਵ ਤੋਂ ਮੁਕਤ ਹੁੰਦੇ ਹਨ. ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਇਹ ਕਾਰਜਸ਼ੀਲ ਸ਼ੈਲੀ ਘੱਟ ਬੱਗ ਦੀ ਅਗਵਾਈ ਕਰਦੀ ਹੈ ਅਤੇ ਇਸ ਬਾਰੇ ਸੋਚਣਾ ਸੌਖਾ ਹੈ.

ਕੋਣੇ 2 ਬਾਰੇ ਕਿਵੇਂ?

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

     // ਕੋਨੀਅਰ 2@ ਕੰਪੋਨੈਂਟ ({ਚੋਣਕਾਰ: 'ਹੈਲੋ-ਭਾਗ',ਟੈਪਲੇਟ: ` 

ਮੈਨੂੰ ਕੁਝ ਚਾਬੀਆਂ ਦਿਓ! <ਇਨਪੁਟ (ਕੀਅਉਪ) = "ਔਨਕਿਊਵ ($ ਇਵੈਂਟ)" />
{{ਮੁੱਲ}}
`})ਕਲਾਸ HelloComponent {ਮੁੱਲ = '';onKeyUp (ਇਵੈਂਟ) {ਇਹ. ਮੁੱਲ + = ਘਟਨਾ ਟੀਚਾ ਮੁੱਲ + '| ';}}// ਪ੍ਰਤੀਕਿਰਿਆ ਕਰੋਕਲਾਸ ਹੈੱਲਕੋਮੰਟੈਂਟ ਰਿਐਕਟਰ ਵਧਾਉਂਦਾ ਹੈ. ਕੰਪੋਨੈਂਟ {ਕੰਸਟਰਟਰ (ਰੈਂਪ) {ਸੁਪਰ ਇਹ. ਰਾਜ = {ਮੁੱਲ: ''};}onKeyUp (ਇਵੈਂਟ) {const ਮੁੱਲ = $ $ {this. ਰਾਜ ਮੁੱਲ + ਘਟਨਾ ਟੀਚਾ ਮੁੱਲ} | `;ਇਹ. setState ({values: values});}ਦੇਣਾ ਹੈ {ਵਾਪਸੀ (

ਮੈਨੂੰ ਕੁਝ ਚਾਬੀਆਂ ਦਿਓ!
<ਇਨਪੁਟ onKeyUp = {ਇਹ. onKeyUp ਬਿੰਦ (ਇਹ)} />
{ਇਹ. ਰਾਜ ਮੁੱਲ}

);}}

ਸੈਮਵਲ 2 ਤੇ ਬਹੁਤ ਸਾਰਾ ਕੰਮ ਇਹ ਕਰ ਰਿਹਾ ਹੈ ਕਿ ਇਹ DOM ਨੂੰ ਬਹੁਤ ਕੁਸ਼ਲਤਾ ਨਾਲ ਅੱਪਡੇਟ ਕਰੇ. ਪਿਛਲੇ ਟੈਪਲੇਟ ਸੰਟੈਕਸ ਅਤੇ ਸਕੋਪ ਦੇ ਆਲੇ ਦੁਆਲੇ ਔਖੀਆਂ ਜਟਿਲਤੀਆਂ ਵੱਡੀਆਂ ਐਪਸ ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਕਾਰਗੁਜ਼ਾਰੀ ਸਮੱਸਿਆਵਾਂ ਵੱਲ ਖਿੱਚੀਆਂ ਗਈਆਂ

ਸੰਪੂਰਨ ਅਰਜ਼ੀ

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

ਰੀੈਕਟ ਅਤੇ ਕੋਨੀਅਰ ਵਿੱਚ ਅੰਤਰ ਦੀ ਤੁਲਨਾ ਕਰਨ ਲਈ ਤੁਸੀਂ ਇਹਨਾਂ ਉਦਾਹਰਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਵੇਖਣਾ ਦਿਲਚਸਪ ਹੋ ਸਕਦੇ ਹੋ. ਜਵਾਬ ਉਦਾਹਰਨ ਕੌਫੀਸਰਫ ਵਿੱਚ ਸੀਜੇਐਸਐਕਸ ਨਾਲ ਲਿਖਿਆ ਗਿਆ ਹੈ, ਭਾਵੇਂ ਕਿ ਰੀਟੇਜ ਕਮਿਊਨਿਟੀ ਨੇ ਈਬਲ ਏ 6 ਦੇ ਨਾਲ ਬਾਬਲ ਅਤੇ ਸੈਮਟ ਨਾਲ ਇੱਕਠੇ ਕੀਤਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਟੂਲਿੰਗ ਹੈ, ਮੈਂ ਇਹ ਸੁਝਾਅ ਦੇਵਾਂਗਾ ਕਿ ਜੇ ਤੁਸੀਂ ਅੱਜ ਸ਼ੁਰੂ ਕਰ ਰਹੇ ਹੋ

  • https: // github. com / markbrown4 / gmail- ਪ੍ਰਤੀਕਿਰਿਆ
  • https: // github. com / ਉਦਾਹਰਣ / ਪ੍ਰਤੀਕਿਰਿਆ /
  • http: // todomvc. com / ਉਦਾਹਰਣ / ਏਂਗਲਿਯੂਜ / /

ਲਰਨਿੰਗ ਸਰੋਤ

ਲਰਨਿੰਗ ਰੀਐਲਡ ਮਜ਼ੇਦਾਰ ਰਿਹਾ ਹੈ, ਇਸ ਨੇ ਮੈਨੂੰ ਫੰਕਸ਼ਨਲ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਬਾਰੇ ਹੋਰ ਸਿਖਾਇਆ ਹੈ ਅਤੇ ਇਸ ਦੇ ਦੁਆਲੇ ਇਕ ਜੀਵੰਤ ਭਾਈਚਾਰਾ ਹੈ, ਇਸਦੇ ਉਲਟ ਰੀਕਾਰਡ ਈਕੋਸ ਸਿਸਟਮ ਐਂਡ੍ਰਿਊ ਰੇ ਨੇ ਰੀਐਕਟਰ ਅਤੇ ਫਲੋਕਸ 'ਤੇ ਕੁਝ ਬਹੁਤ ਵਧੀਆ ਸ਼ੁਰੂਆਤੀ ਪੰਨਿਆਂ ਨੂੰ ਲਿਖਿਆ ਹੈ, ਸਰਕਾਰੀ ਰੀੈਕਟ ਟਿਊਟੋਰਿਅਲ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਜਾਣ-ਪਛਾਣ ਹੈ. ਮਾਣੋ!

  • ਬੇਵਕੂਫ ਲੋਕਾਂ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆ - ਐਂਡਰਿਊ ਰੇ
  • ਬੇਵਕੂਫ ਲੋਕਾਂ ਲਈ ਫਲੋਕਸ - ਐਂਡਰਿਊ ਰੇ
  • ਟਿਊਟੋਰਿਅਲ 'ਤੇ ਟਿੱਪਣੀ ਕਰੋ - ਫੇਸਬੁੱਕ
  • ਰਾਊਟਰ ਦਾ ਪ੍ਰਤੀਕ - ਰਿਆਨ ਫਲੋਰੈਂਸ
  • ਰੈਡਕ - ਵੀਡੀਓ ਦੀ ਲੜੀ ਦਾਨ ਆਬਰਾਮੋਵ

ਇਸ ਲੇਖ ਵਿਚ ਸਹਿਕਰਮੀ ਕਰੀਗ ਬਿਲਨਰ ਨੇ ਸਮੀਖਿਆ ਕੀਤੀ ਸੀ. ਸਮਾਲਟ ਸਮਗਰੀ ਲਈ ਸਮਾਲਟ ਦੇ ਸਾਰੇ ਸਮਾਰਕਾਂ ਦਾ ਧੰਨਵਾਦ ਸਭ ਤੋਂ ਵਧੀਆ ਇਹ ਹੋ ਸਕਦਾ ਹੈ!

React for Angular DevelopersReact for Angular DevelopersRelated Semalt:
npmAPIsReactAngularJSES6More. Sponsors
ਜੌਬ-ਰੈਡੀ ਕੋਨੀਅਰ ਅਤੇ ਟਾਈਪਕਰਿਪਟ ਟਰੇਨਿੰਗ
ਟੌਡ ਮੋਂਟੋ
ਕੋਨੀਅਰ ਅਤੇ ਇਸਦੇ ਵਾਤਾਵਰਣ ਨੂੰ ਸਿੱਖਣ ਲਈ ਅੰਤਮ ਸਰੋਤ. ਕੂਪਨ ਕੋਡ 'SITEPOINT' ਨੂੰ ਚੈੱਕਅਪ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ 25% ਬੰਦ ਦਾ ਉਪਯੋਗ ਕਰੋ.
React for Angular DevelopersReact for Angular DevelopersRelated Semalt:
npmAPIsReactAngularJSES6More. Sponsors
ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਸਿੱਖਣ ਦਾ ਵਧੀਆ ਤਰੀਕਾ
ਵੇਸ ਬੋਸ
ਤੁਹਾਨੂੰ ਅਸਲ ਦੁਨੀਆਂ ਬਣਾਉਣ ਲਈ ਇਕ ਕਦਮ-ਦਰ-ਕਦਮ ਸਿਖਲਾਈ ਕੋਰਸ ਜੇਐਸ + ਫਾਇਰਬੇਜ ਐਪਸ ਅਤੇ ਵੈਬਸਾਈਟ ਦੇ ਭਾਗ ਦੁਪਹਿਰ ਦੋ ਕੁ ਵਜੇ ਕੂਪਨ ਕੋਡ 'SITEPOINT' ਨੂੰ ਚੈੱਕਅਪ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ 25% ਬੰਦ ਦਾ ਉਪਯੋਗ ਕਰੋ.
March 1, 2018