React

ಬಳಕೆದಾರ ಸಂಪರ್ಕಸಾಧನಗಳನ್ನು ನಿರ್ಮಿಸಲು JavaScript ಗ್ರಂಥಾಲಯ

ಘೋಷಣಾತ್ಮಕ

ರಿಯಾಕ್ಟ್ ಸಂವಾದಾತ್ಮಕ UIಗಳನ್ನು ರಚಿಸಲು ನೋವುರಹಿತವಾಗಿರುತ್ತದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಪ್ರತಿ ಸ್ಟಾಟಿಗಾಗಿ ಸರಳವಾಗಿರುವ ನೋಟಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡಿದರೆ, ಡೇಟಾ ಬದಲಾದಾಗ ರಿಯಾಕ್ಟ್ ಅಗತ್ಯವಾಗಿರುವ ಕಾಂಪೊನೆಂಟ್ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಅಪ್ಡೇಟ್ ಮತ್ತೆ ರೆಂಡರ್ ಮಾಡುತದೆ.

ಘೋಷಣಾತ್ಮಕ ವೀಕ್ಷಣೆಗಳು ನಿಮ್ಮ ಕೋಡನ್ನು ಹೆಚ್ಚು ಊಹಿಸಬಹುದಾದವು ಮತ್ತು ಡಿಬಗ್ ಮಾಡಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

ಕಾಂಪೊನೆಂಟ್ ಆಧಾರಿತ

ಸುತ್ತುವರೆಯಲ್ಪಟ್ಟಿರುವ ಕಾಂಪೊನೆಂಟ್ಗಳನ್ನು ತಯಾರಿಸಿ, ತಮ್ಮ ಸ್ಟೇಟನ್ನು ತಾವೇ ನಿರ್ವಹಿಸಿ, ನಂತರ UIಗಳನ್ನು ಸಂಕೀರ್ಣಗೊಳಿಸುವಂತೆ ರಚಿಸಬಹುದು.

ಕಾಂಪೊನೆಂಟಿನ ತರ್ಕವನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟಿನಲ್ಲಿ ಬರೆದಿರುವುದರಿಂದ ಟೆಂಪ್ಲೇಟ್ಸ್ ಬದಲಾಗಿ ನೀವು ಸುಲಭವಾಗಿ ರಿಚ್ ಡಾಟಾವನ್ನು ನಿಮ್ಮ ಆಪ್ಪ್ಗಳ ಮೂಲಕ ಸ್ಟೇಟನ್ನು DOMನಿಂದ ದೂರವಿಡಬಹುದು

ಒಮ್ಮೆ ಕಲಿಯಿರಿ, ಎಲ್ಲಿಯಾದರೂ ಬರೆಯಿರಿ

ನಿಮ್ಮ ಉಳಿದ ತಂತ್ರಜ್ಞಾನದ ಸ್ಟಾಕ್ ಬಗ್ಗೆ ನಾವು ಊಹೆಗಳನ್ನು ಮಾಡುವುದಿಲ್ಲ, ಹಾಗಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕೋಡ್ ಅನ್ನು ಪುನಃ ಬರೆಯದೆಯೇ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ರಿಯಾಕ್ಟ್ನಲ್ಲಿ ನೀವು ಅಭಿವೃದ್ಧಿಪಡಿಸಬಹುದು.

ರಿಯಾಕ್ಟ್ ನೋಡ್ ಬಳಸಿ ಸರ್ವರ್ನಲ್ಲಿ ಮತ್ತು ರಿಯಾಕ್ಟ್ ನೇಟಿವ್ ಬಳಸಿ ಪವರ್ ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ಸಹ ನಿರೂಪಿಸುತ್ತದೆ .


ಒಂದು ಸರಳ ಕಾಂಪೊನೆಂಟ್

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ಗಳು ಇನ್ಪುಟ್ ಡೇಟಾ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶಿಸಲು ಏನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ ಒಂದು render() ಮೆಥೋಡ್ಸನ್ನು ಜಾರಿಗೆ. ಈ ಉದಾಹರಣೆಯು JSX ಎಂಬ XML ಮಾದರಿಯ ಸಿಂಟ್ಯಾಕ್ಸನ್ನು ಬಳಸುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ಗಳು ನೀಡಲಾಗುವ ಇನ್ಪುಟ್ ಡೇಟಾ ನಾವು this.propsನ ಮೂಲಕ render() ಮೂಲಕ ಆಕ್ಸೆಸ್ ಮಾಡಬಹುದು.

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ಗಳು ಇನ್ಪುಟ್ ಡೇಟಾ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶಿಸಲು ಏನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ ಒಂದು render() ವಿಧಾನವನ್ನು ಜಾರಿಗೆ. ಈ ಉದಾಹರಣೆಯು JSX ಎಂಬ XML ಮಾದರಿಯ ಸಿಂಟ್ಯಾಕ್ಸನ್ನು ಬಳಸುತ್ತದೆ

JSX ರಿಯಕ್ಟಿನಲ್ಲಿ ಉಪಯೋಗಿಸುವುದು ಐಚ್ಛಿಕ. JSX ಸಂಕಲನ ಹೆಜ್ಜೆ ನಿರ್ಮಿಸಿದ ಕಚ್ಚಾ JavaScript ಸಂಕೇತವನ್ನು ನೋಡಲು Babel REPL ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ.

Loading code example...

ಒಂದು ಸ್ಟೇಟ್ ಇರುವ ಕಂಪೋನೆಂಟ್

ಇನ್ಪುಟ್ ಡೇಟಾವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವುದರ ಜೊತೆಗೆ (this.props ಇನಿಂದ), ಒಂದು ಕಂಪೋನೆಂಟ್ ಆಂತರಿಕ ಸ್ಥಿತಿ ಸ್ಟೇಟನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ (this.state ಇನಿಂದ). ಕಾಂಪೊನೆಂಟಿನ ಸ್ಟೇಟ್ ಡೇಟಾ ಬದಲಾದಾಗ, render() ಮೆಥಡ್ ಅನ್ನು ಕರೆದು ರೇಂದ್ರ್ ಆಗಿರುವ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ

Loading code example...

ಒಂದು ಅಪ್ಲಿಕೇಶನ್

props ಮತ್ತು state ಅನ್ನು ಬಳಸಿ, ಒಂದು ಚಿಕ್ಕ ಟುಡು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬರೆಯುತ್ತೆವೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, state ಅನ್ನು ಉಪಯೋಗಿಸಿ, ಐಟಂಗಳ ಪಟ್ಟಿಯನ್ನು ಮತ್ತು ಬಳಕೆದಾರರು ನಮೂದಿಸಿದ ಪಠ್ಯವನ್ನು ಗಮನಿಸುತ್ತೆವೆ. ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ಗಳನ್ನು ಇನ್ಲೈನ್ ​​ಸಲ್ಲಿಸಲಾಗುವುದೆಂದು ಕಂಡುಬಂದರೂ, ಈವೆಂಟ್ ಡೆಲಿಗೇಷನ್ ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ.

Loading code example...

ಬಾಹ್ಯ ಪ್ಲಗ್ಇನ್ಗಳನ್ನು ಉಪಯೋಗಿಸುವ ಕಂಪೋನೆಂಟ್

ರಿಯಾಕ್ಟ್ ನೀವು ಇತರ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಫ್ರಾಮ್ವರ್ಕ್ಗಳಿಗೆ ಇಂಟರ್ಫೇಸ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ remarkable ಅಂತ ಬಾಹ್ಯ ಮಾರ್ಕ್ಡೌನ್ ಲೈಬ್ರರಿಯನ್ನು ಉಪಯೋಗಿಸಿ, <textarea>ಗಳಲ್ಲಿರುವ ನೈಜ ಸಮಯದಲ್ಲಿ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

Loading code example...