توربەت ئالدى سۇپا ئىچىش تېخىكىسى توختىماي،، يېڭىلنىپ تۇرىدىغان ساھە بولۇپ ھەر يېلى يېڭى تېخنىكىلار بارلىققا كىلىپ تۇرىدۇ،دەۋىرنىڭ قەدىمىگە يىتىشىپ مىڭىش ئۈچۈن بىزمۇ توختىماي ئۈگىنىپ ئۆزىمزىنىڭ تېخنىكىسنى يېڭىلاپ تۇرۇشىمىز كىرەك بىز بۇ ماقالىدە بىرقانچە خىل زامانىۋى ئالدى سۇپا ئىچىش رامكىسىنى تونۇشتۇرىمىز ۋە ئۈلگە كودىنى تەمىنلەيمىز
react
بۇرامكا بۇ ئىنتايىن داڭلىق بولغان رامكا بولۇپ،ئىشلەتكۈچى كۆرۈنمە يۈزى قۇرشقا ئىشلىتىلىدۇ،بۇ رامكا زاپچاسلاشتۇرۇش شەكلىنى قوللىنىپ ئىشلەتكۈچى كۆرۈنمە يۈزىنى بەرپا قىلىدۇ،بۇ رامكا يۇقىرى دەرىجىدىكى كودنى قايتا ئىشلىتىش، ئاسراش ۋە سىناشچانلىققا ئىگە شۇنداقلا مۇلازمىتىر تەرەپ
import React from 'react';class HelloWorld extends React.Component { render() { return ( <div> <h1>Hello, World!</h1> <p>This is a React component.</p> </div> ); }}export default HelloWorld;
vue
بۇ ھازىر نۆۋەتتە ئىنتايىن مودا بولۇۋاتقان ئىلگىرلەش شەكىلدىكى رامكا بولۇپ چوڭ تىپتىكى تاق بەتلىك پىروگىرامما قۇرۇشقا ئىشلىتىلىدۇ بۇرامكىنىڭ يادرولۇق ئىدىيەسى بولسازاپچاسلاشتۇرۇش بولۇپ بەتنىڭ كۆرۈنمە يۈزىنى مۇستەقىل بۆلەكلەرگە بۆلىدۇ،ھەربىر زاپچاس ئۆزىنىڭ مۇناسىۋەتلىك كودىغا ئىگە بولىدۇ
<template> <div> <h1>{{ message }}</h1> <p>This is a Vue component.</p> </div></template><script>export default { data() { return { message: "Hello, World!" }; },};</script>
TypeScript
بۇ مىكروسوفىت تەرىپىدىن ئىچىلغان تېنىچ تىپلىق تەكشۈرگۈچ بولۇپ،كودنى تەرجىمە قىلىغانداخاتالىقنى تۇتۇپ،كودنىڭ ئوقولۇشچانلىقى ۋە ئاسراشچانلىقىنى يۇقىرى كۆتۈرىدۇتۆۋەندىكىسى بۇ رامكىدا قۇرۇلغان تۈر مىسالى
class Person { private name: string; constructor(name: string) { this.name = name; } public sayHello(): void { console.log(Hello, my name is ${this.name}.); }}const person = new Person("Alice");person.sayHello();
Webpack
بۇ بىر مودىل بولاقلىغۇچ بولۇپ،كۆپلىگەن جاۋا سىكرىپىت ھۆججەتلىرىنى بىر ھۆججەت قىلىپ ھاسىللايدۇ، شۇنىڭ بىلەن توربىكەتنىڭ تىز سۈرئەتتە ھۆججەت يۈكلىشىگە قولايلىق يارىتىدۇ،بۇ ھەرخىل تىپتىكى ھججەتلەرنى بىې تەرەپ قىلالايدۇ،يىزىق رەسىم، ئۇسلۇب ھۆججەتلىرى قارارلىقلار
const path = require('path');module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, type: 'asset/resource' }, ], },};
Sass
sass بولسا بىرخىل css ئالدىن بىرتەرەپ قىلغۇچ،بۇ ئاچقۇچىلارنىڭ پىروگىرمما تىلى شەكلى بىلەن cssكودىنى يىزىشقا يول قويىدۇ،بىز دائىم ئىشلىتىۋاتقان cssبىەلن sassنى سىلىشتۇرساق بۇنىڭ كودنى ئوقۇشچانلىق ۋە قوغداشچانلىققا ئىگە قىلىشتەك ئالاھىدلىكى بار
مىسال كودى
$primary-color: #007bff;button { background-color: $primary-color; border: none; color: white; padding: 10px 20px;}
