JavaScript - dziwny problem z kompilacją

Dla specjalistów Programowanie
#1

Witam. Od paru dni uczę się JavaScripta. Zainstalowałem Node JS, NPM, Bootstrapa i Visual Studio. Robię sobie kod z jakiegoś kursu i po drodze staram się załapać o co chodzi i wszystko gra do pewnego momentu. W jednej klasie mam metodę:

  render() {
    return (
      <>
    <div className="Register">
      <Form onSubmit = {this.handleSubmit}>
        <Form.Group controlId="username" size="lg">
          <Form.Label>Username</Form.Label>
          <Form.Control autoFocus name="username"/>
        </Form.Group>

        <Form.Group controlId="password" size="lg">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" name="password"/>
        </Form.Group>

        <Button block size = "lg" type = "submit">Register</Button>
      </Form>
    </div>

    <RegistrationAlert ref={this.registrationAlert}/>
    </>
    )
  }

która wywala taki błąd kompilacji:

Failed to compile.

Error in ./src/Registration.js
Syntax error: Unexpected token (52:7)

  50 |   render() {
  51 |     return (
> 52 |       <>
     |        ^
  53 |     <div className="Register">
  54 |       <Form onSubmit = {this.handleSubmit}>
  55 |         <Form.Group controlId="username" size="lg">

 @ ./src/App.js 16:20-48

No i nie bardzo wiem o co chodzi. Sam kod jest raczej poprawny, bo pobierałem go bezpośrednio z Gita do kursu, ale na pytanie odnośnie tego problemu nikt mi nie odpowiedział. :confused:

#2

Spróbuj usunąć tę linię oraz tę na końcu z </>.

#3

Nie no, teraz to podkreśla mi błąd jeszcze przed uruchomieniem: JSX expression must have one parent element a po uruchomieniu wywala taki błąd:

Failed to compile.

Error in ./src/Registration.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (69:4)

  67 |     </div>
  68 | 
> 69 |     <RegistrationAlert ref={this.registrationAlert}/>
     |     ^
  70 |     
  71 |     )
  72 |   }

 @ ./src/App.js 16:20-48

Może dla jasności wkleję całą klasę:

import React, {Component} from 'react';
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

import './Registration.css'
import RegistrationAlert from './RegistrationAlert';

class Registration extends Component {
  constructor(props) {
    super(props);
    this.registrationAlert = React.createRef();
  }

  handleSubmit = event => {
    event.preventDefault();
    this.registerUser(event.target.username.value, event.target.password.value);
  }

  registerUser(username, password) {
    fetch('http://localhost:8080/users', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password,
                })
            }).then(function(response) {
              if (response.status === 200) {
                this.showRegistrationAlert("success", "User registered!", "You can now log in using your credentials.");
              } else if (response.status === 422) {
                this.showRegistrationAlert("danger", "User already exists", "Please choose a different name.");
              } else {
                this.showRegistrationAlert("danger", "User not registered!", "Something went wrong.");
              }
            }.bind(this)).catch(function(error) {
              this.showRegistrationAlert("danger", "Error", "Something went wrong.");
            }.bind(this));
  }

  showRegistrationAlert(variant, heading, message) {
    this.registrationAlert.current.setVariant(variant);
    this.registrationAlert.current.setHeading(heading);
    this.registrationAlert.current.setMessage(message);
    this.registrationAlert.current.setVisible(true);
}

  render() {
    return (
      <>
    <div className="Register">
      <Form onSubmit = {this.handleSubmit}>
        <Form.Group controlId="username" size="lg">
          <Form.Label>Username</Form.Label>
          <Form.Control autoFocus name="username"/>
        </Form.Group>

        <Form.Group controlId="password" size="lg">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" name="password"/>
        </Form.Group>

        <Button block size = "lg" type = "submit">Register</Button>
      </Form>
    </div>

    <RegistrationAlert ref={this.registrationAlert}/>
    </>
    )
  }
}

export default Registration;
#4

Dobra - mój błąd. Wygląda na to, że używasz Reacta starszego niż v.16.2. Spróbuj poniższych metod w podanej kolejności:

 zastąp <> tym [ oraz </> tym ] (pewnie dostaniesz warninga)
 zastąp <> tym <div> oraz </> tym </div>

Albo po prostu użyj najnowszej wersji biblioteki React :wink:

#5

Hmm. No nie. Z pliku package.json:

    {
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "0.9.5"
  }

A kiedy próbuję zamienić <> </> na <div> </div> to podkraśla mi te pierwsze div` - JSX element 'div' has no corresponding closing tag.ts(17008)