Where to connect to server in this search code?

Hello,
I want to make a search bar at the top of the page that returns the tile images. Where should I connect to my database and handle back end?

import React, { Component } from 'react';
//import "./Search.scss";

export class Search extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            image: ''
        };


        this.search = this.search.bind(this);
    }

    // Get initial image
    componentDidMount() {
        this.getImage();
    }

    // Get search value from input box on submit
    search(e) {
        e.preventDefault();
        this.getImage(this.refs.search.value);
    }

    // Set image state to the search value
    getImage(search = 'nature') {
        this.setState({
            image: `https://source.unsplash.com/featured/?${search}`
        });

    }

    render() {
        const divStyle = {
            backgroundImage: `url(${this.state.image})`
        };


        // Set `search__results` bg image to the image url
        return /*#__PURE__*/(
            React.createElement("div", { className: "search" }, /*#__PURE__*/
                React.createElement("form", { onSubmit: this.search }, /*#__PURE__*/
                    React.createElement("input", { className: "search__input", type: "text", placeholder: "search...", ref: "search" })), /*#__PURE__*/

                React.createElement("div", { style: divStyle, className: "search__results" })));



    }
}


//ReactDOM.render( /*#__PURE__*/React.createElement(Search, null), document.getElementById("app"));

thanks,

First of all, is there a reason you aren’t using JSX? That looks like some very old fashioned code. Not just the use of the class and an unnecessary explicit constructor, but the use of React.createElement.

What do you mean by “connect to my database”? Are you going to connect directly from the front end? Usually that is not a good idea because it would expose keys, etc. Usually I would want to hide it in my server.

But answering the question at face value, looking at just this component, I would want to open up the connection in componentDidMount and then close it in componentWillUnmount. Alternatively you could put it in an external module that will keep track of its state and handle the opening on its own.

This is my first project from react and ASP Core. The Microsoft template files are .jsx. I got this code from the web.

What do you mean by “connect to my database”?

I mean connect to SQL server. Really I’m not familiar with front-end words.

What search component you suggest for returning tile view images.

I’m not sure I understand what Microsoft has to do with JSX, but OK.

I got this code from the web.

Well, that must be some very old code. I might suggest learning a little more about React. That looks very weird to me, but it might be some weird set up.

I mean connect to SQL server. Really I’m not familiar with front-end words.

In my (somewhat limited) experience, you aren’t going to contact the DB directly from the f/e. Presumably your DB needs some kind of key or password and it is impossible to implement those on the f/e without exposing them to the world. The usual practice in my (somewhat limited) experience is create a microservice that contacts the DB for you so you can hide whatever keys there are and do some kind of authentication.

What search component you suggest for returning tile view images.

I don’t understand that question.

Just going to echo that you may want to get up to speed on React (and front end a bit) before diving in here, and at the least find up to date tutorials that if possible describe how an app templates via what you’re should hang together.

From working for a couple of years in a job where the main systems were all .Net, I’m assuming you’re just templating an app via some templates that have been added to Visual Studio? I don’t know how much this has improved, but make sure you know what you’re pulling in – this was three years ago now, but some of the crap that the templates pulled in and bizarre ways of managing front end structures were something else. Normally they were pretty much years behind FE best practices (vast amounts of jQuery plugins was a norm). So just be careful, do quite a bit of reading up on how to integrate React into .Net setups (and make sure you’re looking at up to date resources)

This template is for 2019 and handles react/ASP.net Core. Just this is what it does. Also, there are templates for Angular/ASP. Vue/ASP and other front end frameworks.