Ключевые методы полностековой разработки: от HTML/CSS до React и MongoDB

Вот несколько методов, обычно используемых при полнофункциональной разработке, а также примеры кода:

  1. HTML/CSS:

    • Метод: Создание структуры и стиля веб-страниц.
    • Пример кода: 
      <!DOCTYPE html>
<html>
<head>
 <title>My Web Page</title>
 <style>
   body {
     background-color: #f2f2f2;
     font-family: Arial, sans-serif;
   }
   h1 {
     color: #333333;
   }
 </style>
</head>
<body>
 <h1>Welcome to My Web Page</h1>
 <p>This is a sample paragraph.</p>
</body>
</html>

  2. JavaScript:

    • Метод: добавление интерактивного поведения и динамического контента на веб-страницы.

    • Пример кода:

      function greetUser(name) {
console.log('Hello, ' + name + '!');
}

greetUser('John');

  3. Node.js:

    • Метод: создание серверных приложений с использованием JavaScript.

    • Пример кода:

      const http = require('http');

const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!');
});

server.listen(3000, 'localhost', () => {
console.log('Server running at http://localhost:3000/');
});

  4. Express.js:

    • Метод: создание API и обработка маршрутов в Node.js.

    • Пример кода:

      const express = require('express');
const app = express();

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});

  5. Реакция:

    • Метод: создание пользовательских интерфейсов (UI) для веб-приложений.

    • Пример кода:

      import React from 'react';
import ReactDOM from 'react-dom';

function App() {
return <h1>Hello, World!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

  6. MongoDB:

    • Метод: хранение и получение данных в базе данных NoSQL.

    • Пример кода:

      const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const userSchema = new Schema({
name: String,
email: String,
age: Number,
});

const User = mongoose.model('User', userSchema);

// Create a new user
const newUser = new User({
name: 'John Doe',
email: 'john@example.com',
age: 25,
});

// Save the user to the database
newUser.save()
.then(() => console.log('User saved successfully'))
.catch(err => console.error(err));

  7. SQL:

    • Метод: управление реляционными базами данных и запрос данных.

    • Пример кода (с использованием MySQL):

      const mysql = require('mysql');

const connection = mysql.createConnection({
host: 'localhost',
user: 'username',
password: 'password',
database: 'mydatabase',
});

connection.connect();

connection.query('SELECT * FROM users', (error, results) => {
if (error) throw error;
console.log(results);
});

connection.end();