01:08
Урок 39: Интеграция с фронтенд-фреймворками

Курс по программированию на JavaScript

Урок 39: Интеграция с фронтенд-фреймворками

Фронтенд-фреймворки, такие как React, Vue.js и Angular, значительно упрощают разработку сложных веб-приложений. В этом уроке мы рассмотрим использование JavaScript с React, а также основы Vue.js и Angular.

Использование JavaScript с React

React — это библиотека JavaScript для создания пользовательских интерфейсов. Она позволяет создавать компоненты, которые можно повторно использовать в разных частях приложения.

Создание простого приложения на React

Для начала работы с React необходимо установить Node.js и NPM. Выполните следующие команды для создания нового проекта на React с использованием Create React App:

npx create-react-app my-react-app
cd my-react-app
npm start
Compiled successfully!
You can now view my-react-app in the browser.

Проект создан, и сервер запущен. Откройте src/App.js и добавьте следующий код для создания компонента HelloWorld:

import React from 'react';
import './App.css';

function HelloWorld() {
 return (
 

Hello, React!

); } function App() { return (
); } export default App;
// Hello, React!

В этом примере мы создали компонент HelloWorld, который отображает текст "Hello, React!". Затем мы используем этот компонент внутри основного компонента App.

Основы Vue.js

Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. Он прост в использовании и интеграции с другими библиотеками и проектами.

Создание простого приложения на Vue.js

Для начала работы с Vue.js необходимо установить Vue CLI. Выполните следующие команды для создания нового проекта на Vue.js:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve
App running at:
- Local: http://localhost:8080/

Проект создан, и сервер запущен. Откройте src/App.vue и добавьте следующий код для создания компонента HelloWorld:

<template>
 <div id="app">
 <HelloWorld msg="Hello, Vue!" />
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
 name: 'App',
 components: {
 HelloWorld
 }
};
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>
// Hello, Vue!

В этом примере мы используем компонент HelloWorld, который отображает текст "Hello, Vue!". Мы импортируем этот компонент и используем его внутри основного компонента App.

Основы Angular

Angular — это платформа для создания веб-приложений. Angular предоставляет множество инструментов и возможностей для разработки масштабируемых и эффективных приложений.

Создание простого приложения на Angular

Для начала работы с Angular необходимо установить Angular CLI. Выполните следующие команды для создания нового проекта на Angular:

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve
Angular Live Development Server is listening on localhost:4200

Проект создан, и сервер запущен. Откройте src/app/app.component.html и добавьте следующий код для создания компонента HelloWorld:

<div class="app-container">
 <h1>Hello, Angular!</h1>
</div>
// Hello, Angular!

В этом примере мы создаем компонент HelloWorld, который отображает текст "Hello, Angular!". Мы добавляем этот код в файл app.component.html.

Упражнения

Упражнение 1: Создание простого компонента в React

Создайте компонент Greeting, который принимает пропс name и отображает сообщение приветствия с этим именем. Используйте этот компонент внутри App для отображения приветствия.

Решение:

import React from 'react';
import './App.css';

function Greeting({ name }) {
 return 

Hello, {name}!

; } function App() { return (
); } export default App;
// Hello, Alice!
// Hello, Bob!

Объяснение: Мы создали компонент Greeting, который принимает пропс name и отображает приветствие. Этот компонент используется внутри App для отображения сообщений "Hello, Alice!" и "Hello, Bob!".

Упражнение 2: Создание простого компонента в Vue.js

Создайте компонент Greeting, который принимает пропс name и отображает сообщение приветствия с этим именем. Используйте этот компонент внутри App для отображения приветствия.

Решение:

<!-- src/components/Greeting.vue -->
<template>
 <h1>Hello, {{ name }}!</h1>
</template>

<script>
export default {
 props: ['name']
};
</script>
<!-- src/App.vue -->
<template>
 <div id="app">
 <Greeting name="Alice" />
 <Greeting name="Bob" />
 </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
 name: 'App',
 components: {
 Greeting
 }
};
</script>
// Hello, Alice!
// Hello, Bob!

Объяснение: Мы создали компонент Greeting, который принимает пропс name и отображает приветствие. Этот компонент используется внутри App для отображения сообщений "Hello, Alice!" и "Hello, Bob!".

Категория: JavaScript | Просмотров: 12 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: