React -ийн тухай

React бол динамик ажиллагаатай, нарийн төвөгтэй веб програмийг боловсруулах сайн технологи бөгөөд хичээлээр React -ийг яагаад судлах хэрэгтэй, технологийн үндсэн зарчмуудын талаар авч үзнэ. React -ийн албан ёсны сайтад хандвал түүнийг зохиогчид хэрэглэгчийн интерфейсийг үүсгэх Javascript сан хэмээн тодорхойлсон байгаа. Хэрэглэгчийн интерфейс гэдэг нь ямарч веб програмд хандахад таны хөтөч дээр нээгдэх дэлгэцүүдийг хэлж байгаа юм.

Эндээс React нь нарийн бүтэцтэй, динамик ажиллагаатай веб сайт, програм эсхүл системийг зохиоход зориулагдсан Javascript сан гэдэг нь ойлгомжтой. Сангийн үндсэн онцлог гэвэл хэрэглэгчийн дэлгэцийг /интерфейсийг/ зохиохдоо компонентод тулгуурладагт оршино. Ер нь React -ийн бүх элементүүд компонентуудаас бүрддэг. Иймээс React -аар зохиогдсон програмийн хэрэглэгчийн интерфейс дахин ашиглагдах, өөрийн хүссэнээр өөрчлөх боломжууд бүхий төрөл бүрийн компонентуудаас бүрддэг. React -ийн албан ёсны сайтын хэрэглэгчийн интерфейсийг энэ санг ашиглан зохиосон тул сайтын бүтцээс компонентод тулгуурлалт гэдгийг илүү нарийн ойлгох боломжтой.

Сайтын цэс хэсэг /ногоон хүрээтэй/ бол бүхэлдээ нэг компонент. Тэрч бүү хэл цэс бүр /Dosc, Tutorial гэх мэт/ тусдаа компонентууд юм. Дараагийн улаан хүрээтэй хэсэг бол бас л тусдаа компонент бөгөөд түүнд байрлах / Get Started/ товчнууд хүртэл бас л бие даасан компонент. Түүний дараагийн цэнхэр хүрээтэй хэсэгт гурван баганаар үзүүлсэн агуулгууд ижил бүтэцтэй байгаа нь гарчиг, агуулга хэсэг бүхий нэг компонентод өөр агуулгуудыг өгсөн хэрэг. Ийм байдлаар сайтын бүтцийг цааш харвал бүхий л хэсгүүд компонентуудаас бүрдэж буйг төвөгггүй ялган харах боломжтой. React -аар бүтээх хэрэглэгчийн интерфейсийн блокууд, товч, өгөгдөл оруулах талбар, текстүүд гээд бүх элементүүдийг компонентоор үүсгэдэг тул өөрийн зохиох програмийн хэрэглэгчийн интерфейсийг дахин ашиглагдах, тохируулах боломжтой компонентод зөв хувааж сурах нь чухал.
React -ийг судлах шалгааныг дурдвал

  • Санг Facebook компани боловсруулан хөгжүүлдэг тул ирээдүйн хөгжилд эргэлзэх зүйлгүй.
  • React сан орчин үеийн динамик ажиллагаатай, нарийн төвөгтэй SPA веб програмийг боловсруулах хамгийн өргөн тархсан технолог гэдгийг хэрэглэгчдийн зүгээс github дээр санд өгсөн одын /Star/ тоо нь илтгэнэ.
  • React технологийг эзэмшсэн FrontEnd хөгжүүлэгчийн хэрэгцээ зах зээлд хангалттай их

React -ийн албан ёсны сайт нилээд олон хэлний орчуулгатай бөгөөд монгол хэл багтсан нь суралцах хурдад түлхэц өгөх нь гарцаагүй. Техникийн хэллэгүүдийн монгол орчуулга дутагдалтай, програмчлалын ихэнх материалуудыг гадаад хэлнээс судлах хэрэгтэй болдог тул англи хэлтэй сайтыг барин судлахыг зөвлөе.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
CSS классуудтай ажиллах

  Нээгдсэн тоо: 1527 Төлбөртэй

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

v-show ба v-if директивүүд

  Нээгдсэн тоо: 844 Нийтийн

Хэрэглэгч талын хуудасны элементүүдийг удирдах бас нэгэн арга бол v-if директивийг ашиглах юм. Хуудас дахь элементүүдийг удирдах ажиллагааг хөнгөн эвтэйхэн хийдэг нь раектив фреймворкуудын нэг давуу тал бөгөөд хичээлээр v-if директивийн ажиллагааны онцлогийг

    <body>
        <div id="app">
            <h1 v-if="isVisible">Гарчиг 1</h1>
            <h2 v-else style="color: red">Гарчиг 2</h2>
            <hr>
            <button @click="isVisible = !isVisible">Сэлгэгч</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>

кодоор авч үзье. Код хэрхэн ажиллахыг мэдэх тул тайлбар хэрэггүй.

Нөхцлийн операторууд

  Нээгдсэн тоо: 1662 Бүртгүүлэх

Программ ерөнхийдээ мөр мөрөөрөө дээрээсээ доошоо биелэгдэнэ. Нөхцлийн операторууд нь тодорхой нөхцлийг шалгаж түүний үр дүнгээс хамаарч програмын ажиллагааг өөр хэсэгт шилжүүлэх үйлдлийг хийнэ. Хамгийн энгийн нөхцөлт оператор нь ? бөгөөд дараах бүтэцтэй байна.

<нөхцөл> ? <1-р үйлдэл> : <2-р үйлдэл>

Хэрвээ <нөхцөл> үнэн (өөрөөр хэлбэл true утгатай) бол <1-р үйлдэл> биелэгдэнэ. Эсрэг тохиолдолд <2-р үйлдэл> биелэгдэнэ. Жишээ нь

Үр дүнгийн боловсруулалт

  Нээгдсэн тоо: 223 Нийтийн

Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 128

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 190

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 158

 
Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 284

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 313

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 320

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 385

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 386

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 461

 
Энэ долоо хоногт
Бодлого 13.051

Нээгдсэн тоо : 746

 
Бодлого 18.035

Аяга, стакан, ваар, лаазанд сүү, ундаа, квас, ус байжээ. Аяганд ус, сүү байхгүй, ундаатай сав ваар болон квастай савны дунд, лаазанд ундаа, усны аль нь ч байхгүй, стакан лааз ба сүүтэй савтай зэрэгцэн байрласан бол ямар саванд ямар шингэнийг хийсэн бэ.

Жич: Маш сонирхолтой гоё бодлого. Оролдоод үзээрэй.

Нээгдсэн тоо : 1074

 
Бодлого 11.092

илэрхийллийн хялбарчил.

Нээгдсэн тоо : 325

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195