реагировать с шаблонным движком

Question

Привет, я решил создать проект с ReactJS NodeJS (ExpressJS) и т. Д. Не сделал проект с этим сотрудничеством, прежде чем я научился работать с React, я использовал шаблонизатор (Усы), и моя конфигурация для этого была эта

app.engine('html', consolidate.mustache);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

но меня смутил тот код, который я увидел на этой странице

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

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
var list = ["item1", "item2", "item3"];
res.json(list);
console.log('Sent list of items');
});

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

Они не используют какой-либо шаблонизатор, но как это сделать?они получают переменную с сервера?

Answer 1

Вам не нужно отправлять все ваши переменные или даже любые из них, на ваш взгляд.В приложении RESTful клиенту будет предложено запросить информацию для ее отображения позже.

В коде сервера у вас будет две «категории» маршрутов.Первые будут предназначены только для обслуживания HTML-страниц, вторые будут использоваться для получения и изменения содержимого с сервера.

Маршруты для обслуживания HTML-страниц:

app.get('/', function(req, res){
    res.sendFile(path.resolve('views/index.html'));
});

app.get('/login', function(req, res){
    res.sendFile(path.resolve('views/login.html'));
});

Маршрутычтобы получить и изменить переменные с сервера:

app.get('/api/variable1', function(req, res){
    var variable1 = getFromDatabase('variable1'); //get variable from database
    res.send(variable1); //send variable to front-end
});

app.post('/api/modifyVariable1', function(req, res){
    var newValue = req.body.variable1;
    modifyVariableInDatabase('variable1', newValue); //modify value in database
    res.send({success: true}); //send acknowledgement to client
});

В вашем интерфейсе реакции вы будете запрашивать переменные и соответственно обновлять свои состояния для обновления представления.

getVariable1(){
    fetch("/api/variable1")
      .then((response) => {
        return response.json();
      }).then((json) => {
        this.setState({variable1: json}); //update 'variable1' in our state
      }).catch((err) => {console.log(err);});
}

Если вы хотите отправить переменную непосредственно в представление, вместо этого вы получите ее как можно скорее в React: в методе жизненного цикла componentDidMount().

componentDidMount(){
    this.getVariable1();
}

Надеюсь, это имеет смысл для вас.

Answer 2

@ jake Вы можете обратиться к генератору Jhipster (https://www.jhipster.tech/). Это помогает генерировать приложение React JS с базовыми шаблонами.