React არის პოპულარული Javascript- ის ბიბლიოთეკა (და არა ჩარჩო), რომელიც შექმნა ფეისბუქმა, რომელიც შეგიძლიათ გამოიყენოთ მომხმარებლის ინტერფეისის გასაშენებლად..


რეაქციაა:

  • დეკლარაციული: შეიმუშავეთ თქვენი განაცხადის შეხედულებები და React– ი ეფექტურად განაახლებს და მხოლოდ აუცილებელ კომპონენტებს გადასცემს.
  • კომპონენტზე დაფუძნებული: ეს საშუალებას გაძლევთ შექმნათ კომპონენტები, რომლებიც მართავენ თავიანთ მდგომარეობას და ის შეიძლება შეიქმნას UIS უფრო რთული ასაწყობად.
  • შეიტყვეთ ერთხელ, ჩაწერეთ სადმე: რეაქტიული კომპონენტები მეორდება, რაც იმას ნიშნავს, რომ ის საშუალებას გაძლევთ შექმნათ ახალი ფუნქციები არსებული კოდის გადაწერის გარეშე.

სწავლის რეაქცია ნამდვილად ადვილია, რთული ნაწილი მოდის, როდესაც ცდილობთ შექმნათ React პროექტი ნულიდან, რადგან უამრავი საღამოს ინსტალაციის მოდულები, ისევე როგორც გასაკეთებელი მრავალი კონფიგურაცია.

შექმენით React App

მარტივი რეაგირების დასაწყებად მარტივი გზაა კონფიგურაციის ან რაიმე სხვა რამის შესახებ ზედმეტი ფიქრის გარეშე შექმნა-რეაგირება-აპლიკაცია რაც ხელსაყრელი ინსტრუმენტია, რაც ბევრს აბსტრაქტავს, რაც React აპი მუშაობს, თქვენსგან შორს.

ინსტალაციის შემდეგ კვანძი.js, შეგიძლიათ გამოიყენოთ ნართი ან საღამოს ინსტალაცია შექმნა-რეაგირება-აპლიკაცია გლობალურად:

$ npm ინსტალაცია -g შექმნა-რეაგირების პროგრამა
# ან
$ ძაფის გლობალური დამატება დაამატეთ შექმნა-რეაგირების პროგრამა

შემდეგ შექმნათ ახალი აპლიკაცია, უბრალოდ გაუშვით:

$ შექმნა-რეაგირების-აპლიკაცია my-app-name
$ cd my-app-name

ეს შექმნის დირექტორია მოუწოდა ჩემი პროგრამის სახელი რომელიც მოიცავს თავდაპირველი პროექტის სტრუქტურას ყველა საჭირო დამოკიდებულებასთან.

ახლა კი წასასვლელად არის მითითებული!

უბრალოდ გაუშვით თქვენი პროექტის დირექტორიაში:

$ npm გაშვების დაწყება

და ნახავთ მსგავსი რამ:

როგორც ზემოთ უკვე აღინიშნა, შექმნა-რეაგირება-აპლიკაცია კონფიგურაციის ყველა დეტალს მალავს და ამის ნაცვლად საშუალებას გაძლევთ ფოკუსირება გააკეთოთ თქვენს მიერ დაწერილ კოდზე, რაც React- ით მუშაობის დაწყებისას შესანიშნავია.

უარყოფითი მხარე ის არის, რომ იგი იზოლირებს მომხმარებელს გააცნობიეროს მისი საფუძვლები და ის, თუ როგორ მუშაობს შინაგანად.

მაგალითად, სინტაქსი, როგორიცაა იმპორტი / ექსპორტი ან JSX, ან განვითარების პროცესში თქვენი ფაილების შექმნა და სერვისა არის ყველაფერი შექმნა-რეაგირება-აპლიკაცია იზრუნებს, მაგრამ ეს ასევე არის ის, რაც თქვენ უნდა გესმოდეთ, რომ გქონდეთ გარკვეული წარმოდგენა იმის შესახებ, თუ რა ხდება ქუდის ქვეშ.

საბედნიეროდ, ჩვენ შეგვიძლია ამ საკითხების მოგვარება ბაბელი და ვებგვერდი.

ვებ – გვერდი + ბაბელი

დამატებითი ადაპტაციის გარეშე დავიწყოთ!

პირველ რიგში, მოდით შევქმნათ ახალი დირექტორია ჩვენი React აპლიკაციისთვის და დავიწყოთ ჩვენი პროექტი npm ინიციატივა.

$ mkdir გასაოცარი რეაგირების პროექტი
$ cd გასაოცარი რეაგირების პროექტი
$ npm ინიციატივა

მოგეთხოვებათ შეიყვანოთ ინფორმაცია თქვენი პროექტის შესახებ. უბრალოდ დააჭირეთ ყველა არჩევანს (შემდეგში შეგიძლიათ შეცვალოთ ეს ინფორმაცია) ან თუ გსურთ დაამატოთ ინფორმაცია თქვენი პროექტის შესახებ, წადით წინ.

დამოკიდებულების დაყენება.

შემდეგი, ჩვენ უნდა ჩამოვაყალიბოთ შემდეგი დამოკიდებულებები:

  • რეაგირება & რეაქცია-დომე

    $ npm ინსტალაცია – რეაგირებს რეაქტიული დომენის შესახებ

  • ვებგვერდი & ვებგვერდი-dev-სერვერი
    $ npm ინსტალაცია – ვებ-პაკეტის dev-სერვერის ვებ-პაკეტის dev- სერვისის შენახვა

    ვებგვერდი არის მოდულის bundler, რომელიც აწყობს JavaScript ფაილებს და ქმნის ერთ (ან მრავლებს) ფაილებს, რომლებიც შეიძლება გამოყენებულ იქნას ბრაუზერში.

    ვებგვერდი-dev-სერვერი ჩვენ მოგვცემს განვითარების სერვერის ფუნქციონირებას, როგორიცაა მაგალითად ცხელი მოდულის ჩანაცვლება და Live Reloading.

  • ბაბელი

    $ npm ინსტალაცია – Save-dev babel-core babel-loader babel-pres-env babel-preset-react

    ბაბელი და მისი დამხმარე ბიბლიოთეკები გამოიყენება ჩვენი ES6 კოდი ბრაუზერის გასაგებად კოდში გადასატანად.

კონფიგურაცია.

ახლა, როდესაც ყველა საჭირო დამოკიდებულებაა დაინსტალირებული, მოდით გადავიდეთ კონფიგურაციაზე.

პროექტის ფესვში შევქმნით ფაილს, სახელწოდებით ვებგვერდი.config.js, და შიგნით:

  • შემოვიტანთ იმპორტს ვებგვერდი.
  • განსაზღვრეთ შესვლის წერტილი, რომელიც მოგვითხრობს ვებგვერდი სად იწყება ჩვენი პროგრამა და სად უნდა დავიწყოთ ჩვენი ფაილების შედგენა.
  • განსაზღვრეთ მტვირთავები, რომლებიც გამოიყენება სხვადასხვა ტიპის ფაილების დასამუშავებლად. ამ გაკვეთილისთვის მხოლოდ ჩვენ გვაინტერესებს babel-loader რომელიც პასუხისმგებელია გადამუშავებაზე ჯ.ს. ფაილები.

var webpack = მოითხოვს (‘ვებგვერდი’);
var ბილიკი = მოითხოვს (‘გზა’);

module.exports =
ჩანაწერი: ‘./src/index.js’,
მოდული: {
წესები: [{
ტესტი: /\.(jssjjxxm/?m,
გამორიცხეთ: / (node_modules | bower_component) /,
მტვირთავი: ‘babel-loader’
}
]
}
}

ახლა უნდა გითხრათ ვებგვერდი სად გამოვა ჩვენი dist.js ფაილი (საქაღალდეში, რომელსაც საზოგადოებას უწოდებენ):

გამომავალი: {
ბილიკი: __dirname + ‘/ public’,
ფაილის სახელი: ‘dist.js’
}

ჩვენ ასევე გვჭირდება უზრუნველყოფა ვებგვერდი ჩვენი განვითარების სერვერის ვარიანტებით.

devServer:
შინაარსის ბაზა: __dirname + ‘/ public’,
historyApiFallback: მართალია
}

მთელი ვებგვერდი.config.js ასე გამოიყურება:

var webpack = მოითხოვს (‘ვებგვერდი’);
var ბილიკი = მოითხოვს (‘გზა’);

module.exports =
ჩანაწერი: ‘./src/index.js’,
მოდული: {
წესები: [{
ტესტი: /\.(jssjjxxm/?m,
გამორიცხეთ: / (node_modules | bower_component) /,
მტვირთავი: ‘babel-loader’,
}
]
},
გამომავალი: {
ბილიკი: __dirname + ‘/ public’,
ფაილის სახელი: ‘dist.js’
},
devServer:
შინაარსის ბაზა: __dirname + ‘/ public’,
historyApiFallback: მართალია
}
}

ბოლო, რაც ჩვენ უნდა გავაკეთოთ, არის ფაილის შექმნა, სახელწოდებით .babelrc რომელიც უზრუნველყოფს ვებ – გვერდის მტვირთავის მიერ გამოყენებულ ვარიანტებს: babel-loder.

ფაილი ასე უნდა გამოიყურებოდეს:

{
"წინასწარ მითითებული": ["შური", "რეაგირება"]
}

და ეს ეს არის, კონფიგურაცია შესრულებულია.

ყველაფერი ერთად

ამ ეტაპზე ჩვენ უნდა გვქონდეს პროექტის სტრუქტურა, რომელიც ასე გამოიყურება:

მოდით შევქმნათ ჩვენი index.js ფაილი ჩვენი პროექტის root დირექტორია, რომელიც იქნება შესასვლელი ჩვენი ვებგვერდი კონფიგურაცია და რომელიც შეიცავს React კოდს:

იმპორტის რეაქცია ‘რეაგირებისგან’;
ReactDOM- ის იმპორტირება “რეაქტ-დომიდან”;

const App = () => (

ეს არის ჩემი გასაოცარი რეაგირების პროგრამა

);

ReactDOM.render (, document.getElementById (‘root’));

აქ იმპორტი გვაქვს რეაგირება და ReactDOM, შემდეგ ჩვენ ვაძლევთ პროგრამის კომპონენტს მთავარ html კვანძში, რომელიც: .

შემდეგი რამ იქნება ფაილის შექმნა index.html ახალი საქაღალდის შიგნით მოუწოდა საზოგადოება:

$ mkdir საჯარო
$ cd საჯარო
$ შეხების ინდექსი.html

გასაოცარია რეაგირების პროგრამა

ვამოწმოთ, რომ ჩვენი აპლიკაცია მუშაობს ისე, როგორც მოსალოდნელი იყო.

მანამდე, მოდით დავამატოთ საღამოს სკრიპტი, რომელიც დაიწყებს განვითარების სერვერს აკრეფით npm გაშვების დაწყება კონსოლში.

შიგნით პაკეტი.json სკრიპტის ობიექტის შიგნით დავამატებთ შემდეგ სკრიპტს:

"სკრიპტები": {
"დაწყება": "./node_modules/.bin/webpack-dev-server
}

ახლა კი წასასვლელად ვართ წასული.

$ npm გაშვების დაწყება

ეწვიეთ http: // localhost: 8080 და ნახავთ, რომ ჩვენი აპლიკაცია მშვენივრად მუშაობს.

დასკვნა

ამ გაკვეთილზე ჩვენ ვისწავლეთ React პროექტის შექმნის ორი განსხვავებული მეთოდი:

  • პირველი გზა, რომელიც შედგება ინსტრუმენტის გამოყენებით შექმნა-რეაგირება-აპლიკაცია რომელიც ადგენს ყველაფერს თავის ადგილზე და საშუალებას გაძლევთ ფოკუსირება მოახდინოთ კოდით.
  • მეორე გზა, რომელიც იყენებს babel- ს და ვებ-გვერდს და მოითხოვს გარკვეულ კონფიგურაციას.

გადახედეთ ამ ტოპ 3 Node.js ჰოსტინგის სერვისებს:

A2 ჰოსტინგი

საწყისი ფასი:
$ 3.92


საიმედოობა
9.3


ფასები
9.0


მეგობრული
9.3


მხარდაჭერა
9.3


მახასიათებლები
9.3

წაიკითხეთ მიმოხილვები

ეწვიეთ A2 ჰოსტინგს

FastComet

საწყისი ფასი:
$ 2,95


საიმედოობა
9.7


ფასები
9.5


მეგობრული
9.7


მხარდაჭერა
9.7


მახასიათებლები
9.6

წაიკითხეთ მიმოხილვები

ეწვიეთ FastComet- ს

ჰოსტინჯერი

საწყისი ფასი:
$ 0,99


საიმედოობა
9.3


ფასები
9.3


მეგობრული
9.4


მხარდაჭერა
9.4


მახასიათებლები
9.2

წაიკითხეთ მიმოხილვები

ეწვიეთ ჰოსტინგერს

დაკავშირებული როგორ სტატიები

  • როგორ დააინსტალიროთ ნართი Ubuntu 18.04 VPS ან გამოყოფილი სერვერზე
    შუალედური
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me