React bilan tanishing

Reactni ishlab chiqarishda ishlatish uchun sizga Node.js bilan birga o‘rnatilgan npm kerak bo‘ladi.

React haqida umumiy tasavvurga ega bo‘lish uchun React kodini to‘g‘ridan-to‘g‘ri HTML fayllarida yozishingiz mumkin.

Lekin Reactni ishlab chiqarishda ishlatish uchun npm va Node.js o‘rnatilgan bo‘lishi kerak.

Reactni To‘g‘ridan-to‘g‘ri HTMLda Ishlash

Reactni o‘rganishni boshlashning eng tez yo‘li, React kodini HTML fayllarida to‘g‘ridan-to‘g‘ri yozishdir.

W3Schools Spaces HTML fayllarini yaratishni boshlashning eng oson yo‘li W3Schools Spaces!

Bu sizning ishlaringizni yaratish, tahrirlash va boshqalar bilan ulashish uchun mukammal joy!

HTML Faylingizga Uchta Skript Qo‘shish

Uchta CDNni HTML faylingizga qo‘shing:

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="mydiv"></div>
 
    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }
 
      const container = document.getElementById('mydiv');
      const root = ReactDOM.createRoot(container);
      root.render(<Hello />);
    </script>
  </body>
</html>

Bu usul Reactni sinov maqsadlarida ishlatish uchun yaxshi bo‘lishi mumkin, ammo ishlab chiqarishda React muhitini sozlashingiz kerak bo‘ladi.

React Muhitini Sozlash

Agar sizda npx va Node.js o‘rnatilgan bo‘lsa, create-react-app yordamida React ilovasini yaratishingiz mumkin.

Agar siz ilgari create-react-appni global ravishda o‘rnatgan bo‘lsangiz, npx har doim create-react-appning so‘nggi versiyasini ishlatishi uchun paketni o‘chirib tashlash tavsiya etiladi.

O‘chirish uchun quyidagi buyruqni ishga tushiring: npm uninstall -g create-react-app.

my-react-app nomli React ilovasini yaratish uchun quyidagi buyruqni ishga tushiring:

npx create-react-app my-react-app

create-react-app barcha kerakli narsalarni sozlaydi.

React Ilovasini Ishga Tushirish

Endi siz birinchi haqiqiy React ilovangizni ishga tushirishga tayyorsiz!

my-react-app katalogiga o‘tish uchun quyidagi buyruqni ishga tushiring:

cd my-react-app

my-react-app React ilovasini ishga tushirish uchun quyidagi buyruqni ishga tushiring:

npm start

Yangi brauzer oynasi ochiladi va sizning yangi yaratilgan React Appingizni ko‘rishingiz mumkin! Agar yo‘q bo‘lsa, brauzeringizni oching va manzil satriga localhost:3000 yozing.

React Ilovasini O‘zgartirish

Hozircha hammasi yaxshi, lekin kontentni qanday o‘zgartirish mumkin?

my-react-app katalogida src papkasini topasiz. src papkasi ichida App.js nomli faylni oching, va u quyidagicha ko‘rinadi:

/myReactApp/src/App.js:

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

HTML kontentini o‘zgartirib, faylni saqlang.

O‘zgarishlar darhol ko‘rinadi, brauzerni qayta yuklashingiz shart emas!

Misol <div className="App"> ichidagi barcha kontentni <h1> elementi bilan almashtiring.

Brauzerda o‘zgarishlarni ko‘rish uchun Save tugmasini bosing.

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}
 
export default App;

Keraksiz importlarni olib tashlaganligimizni (logo.svg va App.css) kuzating.

Keyingi Qadamlar

Endi sizning kompyuteringizda React muhiti mavjud va siz React haqida ko‘proq o‘rganishga tayyorsiz.

Ushbu qo‘llanmaning qolgan qismida biz "Show React" vositasidan foydalanib, Reactning turli jihatlarini tushuntiramiz va ularning brauzerda qanday ko‘rinishini ko‘rsatamiz.

Agar kompyuteringizda shu qadamlarni bajarishni istasangiz, src papkasini faqat bitta fayl: index.js bilan qoldirib tozalang. Shuningdek, index.js fayli ichidagi keraksiz kod satrlarini olib tashlang, quyidagi misolga mos keladigan qilib:

Misol "Run Example" tugmasini bosing va natijani ko‘ring.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
 
const myFirstElement = <h1>Hello React!</h1>;
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

React bilan tanishing