Урок 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!

В этом примере мы создали компонент 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.

Упражнения

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

function Greeting({ name }) {
 return 

// Hello, Alice!
// Hello, Bob!

<!-- 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!