ಜೀವನ ಮಾರ್ಗಸೂಚಿಗಳು - MDX ಮತ್ತು ಇತರ ಚೌಕಟ್ಟುಗಳು

ನೀವು ಉತ್ತಮ ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಹೊಂದಿರಬಹುದು, ಆದರೆ ಅದು ಉತ್ತಮ ದಾಖಲಾತಿಯನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಅದು ಎಂದಿಗೂ ಟೇಕ್ ಆಫ್ ಆಗುವುದಿಲ್ಲ. ಕಚೇರಿಯಲ್ಲಿ, ಉತ್ತಮ ದಾಖಲಾತಿಯು ಒಂದೇ ಪ್ರಶ್ನೆಗಳಿಗೆ ಮತ್ತೆ ಮತ್ತೆ ಉತ್ತರಿಸದಂತೆ ನಿಮ್ಮನ್ನು ತಡೆಯುತ್ತದೆ. ಪ್ರಮುಖ ಉದ್ಯೋಗಿಗಳು ಕಂಪನಿಯನ್ನು ತೊರೆದರೆ ಅಥವಾ ಪಾತ್ರಗಳನ್ನು ಬದಲಾಯಿಸಿದರೆ ಜನರು ಯೋಜನೆಯ ಅರ್ಥವನ್ನು ಮಾಡಬಹುದು ಎಂದು ದಾಖಲೆಗಳು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಲೈವ್ ಮಾರ್ಗಸೂಚಿಗಳು ಡೇಟಾ ಸಮಗ್ರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ನೀವು ದೀರ್ಘ ಪಠ್ಯವನ್ನು ಬರೆಯಬೇಕಾದರೆ, ಮಾರ್ಕ್‌ಡೌನ್ HTML ಗೆ ಉತ್ತಮ ಪರ್ಯಾಯವಾಗಿದೆ. ಕೆಲವೊಮ್ಮೆ ಮಾರ್ಕ್‌ಡೌನ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸಾಕಾಗುವುದಿಲ್ಲ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಅದರೊಳಗೆ HTML ಅನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಕಸ್ಟಮ್ ಅಂಶಗಳು. ಆದ್ದರಿಂದ, ನೀವು ಸ್ಥಳೀಯ ವೆಬ್ ಘಟಕಗಳೊಂದಿಗೆ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಅವುಗಳನ್ನು ಪಠ್ಯ ದಾಖಲಾತಿಯಲ್ಲಿ ಸೇರಿಸುವುದು ಸುಲಭ. ನೀವು ರಿಯಾಕ್ಟ್ (ಅಥವಾ Preact ಅಥವಾ Vue ನಂತಹ ಯಾವುದೇ JSX ಫ್ರೇಮ್‌ವರ್ಕ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ), ನೀವು MDX ನೊಂದಿಗೆ ಅದೇ ರೀತಿ ಮಾಡಬಹುದು.

ಈ ಲೇಖನವು ದಸ್ತಾವೇಜನ್ನು ಬರೆಯಲು ಮತ್ತು ಮಾರ್ಗದರ್ಶಿಯನ್ನು ರಚಿಸಲು ಪರಿಕರಗಳ ವಿಶಾಲ ಅವಲೋಕನವಾಗಿದೆ. ಇಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಎಲ್ಲಾ ಪರಿಕರಗಳು MDX ಅನ್ನು ಬಳಸುವುದಿಲ್ಲ, ಆದರೆ ಇದು ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಪರಿಕರಗಳಲ್ಲಿ ಹೆಚ್ಚು ಸೇರಿಸಲ್ಪಟ್ಟಿದೆ.

MDX ಎಂದರೇನು?

ಕಡತ .mdx ಮಾರ್ಕ್‌ಡೌನ್‌ನಂತೆಯೇ ಅದೇ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಹೊಂದಿದೆ ಆದರೆ ಸಂವಾದಾತ್ಮಕ JSX ಘಟಕಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ವಿಷಯದಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. Vue ಘಟಕಗಳಿಗೆ ಬೆಂಬಲವು ಆಲ್ಫಾದಲ್ಲಿದೆ. MDX ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲು, "ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ" ಅನ್ನು ಸ್ಥಾಪಿಸಿ. Next.js ಮತ್ತು Gatsby ಗಾಗಿ ಪ್ಲಗಿನ್‌ಗಳಿವೆ. Docusaurus ನ ಮುಂದಿನ ಆವೃತ್ತಿ (ಆವೃತ್ತಿ 2) ಸಹ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಡಾಕ್ಯುಸಾರಸ್ನೊಂದಿಗೆ ದಸ್ತಾವೇಜನ್ನು ಬರೆಯುವುದು

ಡಾಕ್ಯುಸಾರಸ್ ಫೇಸ್‌ಬುಕ್‌ನಲ್ಲಿ ಬರೆದಿದ್ದಾರೆ. ಅವರು ರಿಯಾಕ್ಟ್ ಹೊರತುಪಡಿಸಿ ಪ್ರತಿಯೊಂದು ಓಪನ್ ಸೋರ್ಸ್ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಇದನ್ನು ಬಳಸುತ್ತಾರೆ. ಕಂಪನಿಯ ಹೊರಗೆ, Redux, Prettier, Gulp ಮತ್ತು Babel ಇದನ್ನು ಬಳಸುತ್ತಾರೆ.

Docusaurus ಬಳಸುವ ಯೋಜನೆಗಳು.

ಡಾಕ್ಯುಸಾರಸ್ ಅನ್ನು ಬರೆಯಲು ಬಳಸಬಹುದು ಯಾವುದೇ ದಸ್ತಾವೇಜನ್ನು, ಮುಂಭಾಗವನ್ನು ವಿವರಿಸಲು ಮಾತ್ರವಲ್ಲ. ಇದು ಹುಡ್ ಅಡಿಯಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಹೊಂದಿದೆ, ಆದರೆ ಅದನ್ನು ಬಳಸಲು ನೀವು ಅದರೊಂದಿಗೆ ಪರಿಚಿತರಾಗಿರಬೇಕಾಗಿಲ್ಲ. ಇದು ನಿಮ್ಮ ಮಾರ್ಕ್‌ಡೌನ್ ಫೈಲ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಒಂದು ಪಿಂಚ್ ಮ್ಯಾಜಿಕ್ ಮತ್ತು ಉತ್ತಮವಾಗಿ-ರಚನಾತ್ಮಕ, ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾದ ಮತ್ತು ಸುಂದರವಾದ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಓದಬಹುದಾದ ದಸ್ತಾವೇಜನ್ನು ಸಿದ್ಧವಾಗಿದೆ.

ನೀವು Redux ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ Docusaurus ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ನೋಡಬಹುದು.

Docusaurus ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಸೈಟ್‌ಗಳು ಮಾರ್ಕ್‌ಡೌನ್-ಆಧಾರಿತ ಬ್ಲಾಗ್ ಅನ್ನು ಸಹ ಒಳಗೊಂಡಿರಬಹುದು. ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟ್ ಮಾಡಲು, Prism.js ಅನ್ನು ತಕ್ಷಣವೇ ಸೇರಿಸಲಾಗುತ್ತದೆ. Docusaurus ತುಲನಾತ್ಮಕವಾಗಿ ಇತ್ತೀಚೆಗೆ ಕಾಣಿಸಿಕೊಂಡಿದೆ ಎಂಬ ವಾಸ್ತವದ ಹೊರತಾಗಿಯೂ, ಇದು StackShare ನಲ್ಲಿ 2018 ರ ಅತ್ಯುತ್ತಮ ಸಾಧನವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟಿದೆ.

ಇತರ ವಿಷಯ ರಚನೆ ಆಯ್ಕೆಗಳು

ಡಾಕ್ಯುಸಾರಸ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ದಸ್ತಾವೇಜನ್ನು ರಚಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಸಹಜವಾಗಿ, ವೆಬ್‌ಸೈಟ್ ಮಾಡಲು ಒಂದು ಮಿಲಿಯನ್ ಮತ್ತು ಒಂದು ಮಾರ್ಗಗಳಿವೆ - ನೀವು ಯಾವುದೇ ಭಾಷೆಯಲ್ಲಿ ನಿಮ್ಮ ಸ್ವಂತ ಪರಿಹಾರವನ್ನು ನಿಯೋಜಿಸಬಹುದು, CMS, ಅಥವಾ ಸ್ಥಿರ ಸೈಟ್ ಜನರೇಟರ್ ಅನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆಗೆ, ರಿಯಾಕ್ಟ್, IBM ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ, ಅಪೊಲೊ ಮತ್ತು ಘೋಸ್ಟ್ CMS ಗಾಗಿ ದಸ್ತಾವೇಜನ್ನು ಗ್ಯಾಟ್ಸ್‌ಬೈ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಬ್ಲಾಗ್‌ಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಸ್ಥಿರ ಸೈಟ್ ಜನರೇಟರ್. ನೀವು Vue ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದರೆ VuePress ನಿಮಗೆ ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ. ಪೈಥಾನ್ - MkDocs ನಲ್ಲಿ ಬರೆಯಲಾದ ಜನರೇಟರ್ ಅನ್ನು ಬಳಸುವುದು ಮತ್ತೊಂದು ಆಯ್ಕೆಯಾಗಿದೆ. ಇದು ಒಂದೇ YAML ಫೈಲ್‌ನೊಂದಿಗೆ ತೆರೆದಿರುತ್ತದೆ ಮತ್ತು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿದೆ. GitBook ಸಹ ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ, ಆದರೆ ಇದು ಮುಕ್ತ ಮತ್ತು ವಾಣಿಜ್ಯೇತರ ತಂಡಗಳಿಗೆ ಮಾತ್ರ ಉಚಿತವಾಗಿದೆ. ನೀವು git ಅನ್ನು ಬಳಸಿಕೊಂಡು ಮಾರ್ಡೌನ್ ಫೈಲ್‌ಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಬಹುದು ಮತ್ತು Github ನಲ್ಲಿ ಅವರೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಬಹುದು.

ಕಾಂಪೊನೆಂಟ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್: ಡಾಕ್ಜ್, ಸ್ಟೋರಿಬುಕ್ ಮತ್ತು ಸ್ಟೈಲ್‌ಗಿಡಿಸ್ಟ್

ಮಾರ್ಗಸೂಚಿಗಳು, ಸಿಸ್ಟಮ್ ವಿನ್ಯಾಸ, ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿಗಳು, ನೀವು ಯಾವುದನ್ನು ಕರೆಯಲು ಬಯಸುತ್ತೀರೋ, ಇವುಗಳು ಇತ್ತೀಚೆಗೆ ಬಹಳ ಜನಪ್ರಿಯವಾಗಿವೆ. ರಿಯಾಕ್ಟ್ ಮತ್ತು ಇಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲಾದ ಪರಿಕರಗಳಂತಹ ಘಟಕ ಚೌಕಟ್ಟುಗಳ ಹೊರಹೊಮ್ಮುವಿಕೆಯು ಅವುಗಳನ್ನು ವ್ಯಾನಿಟಿ ಯೋಜನೆಗಳಿಂದ ಉಪಯುಕ್ತ ಸಾಧನಗಳಾಗಿ ಪರಿವರ್ತಿಸಲು ಸಾಧ್ಯವಾಗಿಸಿದೆ.

Storybook, Docz ಮತ್ತು Styleguidist ಒಂದೇ ಕೆಲಸವನ್ನು ಮಾಡುತ್ತಾರೆ: ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ ಮತ್ತು ಅವುಗಳ API ಅನ್ನು ದಾಖಲಿಸಿ. ಒಂದು ಯೋಜನೆಯು ಡಜನ್ ಅಥವಾ ನೂರಾರು ಘಟಕಗಳನ್ನು ಹೊಂದಬಹುದು, ಎಲ್ಲಾ ವಿಭಿನ್ನ ರಾಜ್ಯಗಳು ಮತ್ತು ಶೈಲಿಗಳೊಂದಿಗೆ. ಘಟಕಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ನೀವು ಬಯಸಿದರೆ, ಅವುಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಎಂದು ಜನರು ತಿಳಿದುಕೊಳ್ಳಬೇಕು. ಇದನ್ನು ಮಾಡಲು, ಘಟಕಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಲು ಸಾಕು. ಮಾರ್ಗಸೂಚಿಗಳು ನಿಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳ ಹುಡುಕಾಟಕ್ಕೆ ಸುಲಭವಾದ ಅವಲೋಕನವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಇದು ದೃಷ್ಟಿ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಪುನರಾವರ್ತಿತ ಕೆಲಸವನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಈ ಉಪಕರಣಗಳು ವಿವಿಧ ರಾಜ್ಯಗಳನ್ನು ವೀಕ್ಷಿಸಲು ಅನುಕೂಲಕರ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ. ನೈಜ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸಂದರ್ಭದಲ್ಲಿ ಘಟಕದ ಪ್ರತಿಯೊಂದು ಸ್ಥಿತಿಯನ್ನು ಪುನರಾವರ್ತಿಸಲು ಕಷ್ಟವಾಗಬಹುದು. ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಬದಲು, ಪ್ರತ್ಯೇಕ ಘಟಕವನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವುದು ಯೋಗ್ಯವಾಗಿದೆ. ಕಷ್ಟದಿಂದ ತಲುಪುವ ಸ್ಥಿತಿಗಳನ್ನು ರೂಪಿಸಲು ಸಾಧ್ಯವಿದೆ (ಉದಾಹರಣೆಗೆ, ಲೋಡ್ ಮಾಡುವ ಸ್ಥಿತಿ).

ವಿವಿಧ ರಾಜ್ಯಗಳ ದೃಶ್ಯ ಪ್ರದರ್ಶನ ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳ ಪಟ್ಟಿಯೊಂದಿಗೆ, ವಿಷಯದ ಸಾಮಾನ್ಯ ವಿವರಣೆಯನ್ನು ಬರೆಯುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ - ವಿನ್ಯಾಸ ತಾರ್ಕಿಕತೆಗಳು, ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಅಥವಾ ಬಳಕೆದಾರರ ಪರೀಕ್ಷೆಯ ಫಲಿತಾಂಶಗಳ ವಿವರಣೆ. ಮಾರ್ಕ್‌ಡೌನ್ ಕಲಿಯಲು ತುಂಬಾ ಸುಲಭ - ಆದರ್ಶಪ್ರಾಯವಾಗಿ, ಮಾರ್ಗಸೂಚಿಗಳು ವಿನ್ಯಾಸಕರು ಮತ್ತು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹಂಚಿಕೆಯ ಸಂಪನ್ಮೂಲವಾಗಿರಬೇಕು. Docz, Styleguidist ಮತ್ತು Storybook ಘಟಕಗಳೊಂದಿಗೆ ಮಾರ್ಕ್‌ಡೌನ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಮಿಶ್ರಣ ಮಾಡುವ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ.

ಡಾಕ್ಜ್

ಪ್ರಸ್ತುತ, Docz ಕೇವಲ React ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ Preact, Vue ಮತ್ತು ವೆಬ್ ಘಟಕಗಳಿಗೆ ಬೆಂಬಲಕ್ಕಾಗಿ ಸಕ್ರಿಯವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ. Docz ಮೂರು ಪರಿಕರಗಳಲ್ಲಿ ತೀರಾ ಇತ್ತೀಚಿನದು, ಆದರೆ Github ನಲ್ಲಿ 14 ನಕ್ಷತ್ರಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಸಮರ್ಥವಾಗಿದೆ. ಡಾಕ್ಜ್ ಎರಡು ಘಟಕಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ - <Playground> и < Props >. ಅವುಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತದೆ ಮತ್ತು ಫೈಲ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ .mdx.

import { Playground, Props } from "docz";
import Button from "../src/Button";

## You can _write_ **markdown**
### You can import and use components

<Button>click</Button>

ನಿಮ್ಮ ಸ್ವಂತ ರಿಯಾಕ್ಟ್ ಘಟಕಗಳನ್ನು ನೀವು ಸುತ್ತಿಕೊಳ್ಳಬಹುದು <Playground>ಅಂತರ್ನಿರ್ಮಿತ ಕೋಡ್‌ಪೆನ್ ಅಥವಾ ಕೋಡ್‌ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್‌ನ ಅನಲಾಗ್ ಅನ್ನು ರಚಿಸಲು - ಅಂದರೆ, ನಿಮ್ಮ ಘಟಕವನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ ಮತ್ತು ಅದನ್ನು ಸಂಪಾದಿಸಬಹುದು.

<Playground>
  <Button>click</Button>
</Playground>

<Props> ನೀಡಿರುವ ರಿಯಾಕ್ಟ್ ಘಟಕ, ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು ಮತ್ತು ಆಸ್ತಿ ಅಗತ್ಯವಿದೆಯೇ ಎಂದು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.

<Props of={Button} />

ವೈಯಕ್ತಿಕವಾಗಿ, ನಾನು ಈ MDX ಆಧಾರಿತ ವಿಧಾನವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭ ಮತ್ತು ಕೆಲಸ ಮಾಡಲು ಸುಲಭವಾಗಿದೆ.

ನೀವು Gatsby ನ ಸ್ಥಿರ ಸೈಟ್ ಜನರೇಟರ್‌ನ ಅಭಿಮಾನಿಯಾಗಿದ್ದರೆ, Docz ಉತ್ತಮ ಸಂಯೋಜನೆಗಳನ್ನು ನೀಡುತ್ತದೆ.

ಶೈಲಿಯ ಮಾರ್ಗದರ್ಶಿ

ಡಾಕ್ಜ್‌ನಲ್ಲಿರುವಂತೆ, ಮಾರ್ಕ್‌ಡೌನ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ಉದಾಹರಣೆಗಳನ್ನು ಬರೆಯಲಾಗುತ್ತದೆ. ಸ್ಟೈಲ್‌ಗೈಡಿಸ್ಟ್ ನಿಯಮಿತ ಫೈಲ್‌ಗಳಲ್ಲಿ ಮಾರ್ಕ್‌ಡೌನ್ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳನ್ನು (ಟ್ರಿಪಲ್ ಕೋಟ್ಸ್) ಬಳಸುತ್ತಾರೆ .md ಫೈಲ್‌ಗಳು, MDX ನಲ್ಲಿ ಅಲ್ಲ.

```js
<Button onClick={() => console.log('clicked')>Push Me</Button>

ಮಾರ್ಕ್‌ಡೌನ್‌ನಲ್ಲಿರುವ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕೋಡ್ ಅನ್ನು ತೋರಿಸುತ್ತವೆ. Styleguidist ಅನ್ನು ಬಳಸುವಾಗ, ಭಾಷೆಯ ಟ್ಯಾಗ್‌ನೊಂದಿಗೆ ಕೋಡ್‌ನ ಯಾವುದೇ ಬ್ಲಾಕ್ js, jsx ಅಥವಾ javascript ರಿಯಾಕ್ಟ್ ಘಟಕವಾಗಿ ನಿರೂಪಿಸುತ್ತದೆ. Docz ನಂತೆ, ಕೋಡ್ ಸಂಪಾದಿಸಬಹುದಾಗಿದೆ - ನೀವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ತಕ್ಷಣವೇ ನೋಡಬಹುದು.

PropTypes, Flow ಅಥವಾ Typescript ಘೋಷಣೆಗಳಿಂದ Styleguidist ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆಸ್ತಿ ಹಾಳೆಯನ್ನು ರಚಿಸುತ್ತದೆ.

Styleguidist ಈಗ React ಮತ್ತು Vue ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.

ಕಥೆಪುಸ್ತಕ

ಸ್ಟೋರಿಬುಕ್ ಸ್ವತಃ "UI ಕಾಂಪೊನೆಂಟ್ ಡೆವಲಪ್ಮೆಂಟ್ ಎನ್ವಿರಾನ್ಮೆಂಟ್" ಎಂದು ಬಿಲ್ ಮಾಡುತ್ತದೆ. ಮಾರ್ಕ್‌ಡೌನ್ ಅಥವಾ MDX ಫೈಲ್‌ಗಳ ಒಳಗೆ ಘಟಕ ಉದಾಹರಣೆಗಳನ್ನು ಬರೆಯುವ ಬದಲು, ನೀವು ಬರೆಯಿರಿ ಕಥೆಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳ ಒಳಗೆ. История ಒಂದು ಘಟಕದ ನಿರ್ದಿಷ್ಟ ಸ್ಥಿತಿಯನ್ನು ದಾಖಲಿಸಿ. ಉದಾಹರಣೆಗೆ, ಒಂದು ಘಟಕವು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿ ಮತ್ತು ನಿಷ್ಕ್ರಿಯ ಸ್ಥಿತಿಗೆ ಇತಿಹಾಸಗಳನ್ನು ಹೊಂದಿರಬಹುದು (ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ).

storiesOf('Button', module)
  .add('disabled', () => (
    <Button disabled>lorem ipsum</Button>
  ))

Storybook Styleguidist ಮತ್ತು Docz ಗಿಂತ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ. ಆದರೆ ಅದೇ ಸಮಯದಲ್ಲಿ, ಇದು ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಆಯ್ಕೆಯಾಗಿದೆ, Github ನಲ್ಲಿ ಯೋಜನೆಯು 36 ಕ್ಕೂ ಹೆಚ್ಚು ನಕ್ಷತ್ರಗಳನ್ನು ಹೊಂದಿದೆ. ಇದು 000 ಕೊಡುಗೆದಾರರು ಮತ್ತು ಸಿಬ್ಬಂದಿ ಜೊತೆಗಿನ ಮುಕ್ತ ಮೂಲ ಯೋಜನೆಯಾಗಿದೆ. ಇದನ್ನು Airbnb, Algolia, Atlassian, Lyft ಮತ್ತು Salesforce ಬಳಸುತ್ತದೆ. ಸ್ಟೋರಿಬುಕ್ ಸ್ಪರ್ಧೆಗಿಂತ ಹೆಚ್ಚಿನ ಚೌಕಟ್ಟುಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ - ರಿಯಾಕ್ಟ್, ರಿಯಾಕ್ಟ್ ನೇಟಿವ್, ವ್ಯೂ, ಆಂಗ್ಯುಲರ್, ಮಿಥ್ರಿಲ್, ಎಂಬರ್, ರಾಯಿಟ್, ಸ್ವೆಲ್ಟ್ ಮತ್ತು ಪ್ಲೇನ್ HTML.

ಭವಿಷ್ಯದ ಬಿಡುಗಡೆಯಲ್ಲಿ, Docz ನಿಂದ ಚಿಪ್‌ಗಳು ಇರುತ್ತವೆ ಮತ್ತು MDX ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ.

# Button

Some _notes_ about your button written with **markdown syntax**.

<Story name="disabled">
  <Button disabled>lorem ipsum</Button>
</Story>

ಹೊಸ ಸ್ಟೋರಿಬುಕ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮುಂದಿನ ಕೆಲವು ತಿಂಗಳುಗಳಲ್ಲಿ ಕ್ರಮೇಣವಾಗಿ ಹೊರಹೊಮ್ಮುತ್ತವೆ ಮತ್ತು ಇದು ಮುಂದೆ ಒಂದು ದೊಡ್ಡ ಹೆಜ್ಜೆಯಿರುವಂತೆ ತೋರುತ್ತಿದೆ.

ಫಲಿತಾಂಶಗಳು

ಮಾದರಿ ಗ್ರಂಥಾಲಯದ ಪ್ರಯೋಜನಗಳನ್ನು ಮಧ್ಯಮ ಕುರಿತು ಲಕ್ಷಾಂತರ ಲೇಖನಗಳಲ್ಲಿ ಪ್ರಶಂಸಿಸಲಾಗಿದೆ. ಉತ್ತಮವಾಗಿ ಮಾಡಿದಾಗ, ಸಂಬಂಧಿತ ಉತ್ಪನ್ನಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಗುರುತನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಅವರು ಸುಲಭಗೊಳಿಸುತ್ತಾರೆ. ಸಹಜವಾಗಿ, ಈ ಉಪಕರಣಗಳು ಯಾವುದೂ ಮಾಂತ್ರಿಕವಾಗಿ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವುದಿಲ್ಲ. ಇದಕ್ಕೆ ಎಚ್ಚರಿಕೆಯ ವಿನ್ಯಾಸ ಮತ್ತು CSS ವಿನ್ಯಾಸದ ಅಗತ್ಯವಿದೆ. ಆದರೆ ಇಡೀ ಕಂಪನಿಗೆ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಲು ಸಮಯ ಬಂದಾಗ, ಡಾಕ್ಜ್, ಸ್ಟೋರಿಬುಕ್ ಮತ್ತು ಸ್ಟೈಲ್‌ಗಿಡಿಸ್ಟ್ ಉತ್ತಮ ಆಯ್ಕೆಗಳಾಗಿವೆ.

ಅನುವಾದಕರಿಂದ. ಹಬ್ರೆಯಲ್ಲಿ ಇದು ನನ್ನ ಮೊದಲ ಅನುಭವ. ನೀವು ಯಾವುದೇ ತಪ್ಪುಗಳನ್ನು ಕಂಡುಕೊಂಡರೆ ಅಥವಾ ಲೇಖನವನ್ನು ಸುಧಾರಿಸಲು ಸಲಹೆಗಳನ್ನು ಹೊಂದಿದ್ದರೆ - ವೈಯಕ್ತಿಕವಾಗಿ ಬರೆಯಿರಿ.

ಮೂಲ: www.habr.com