Помогите найти SyntaxError
 

При сборке билда появляется ошибка

вот сам код

import React, { Component } from 'react';
// Подключаем библиотеку unsplash-js
// (при настроенной webpack-сборке)
import Unsplash from 'unsplash-js';


// Создаем экземпляр объекта для доступа к API
const unsplash = new Unsplash({
  // Application ID из настроек вашего приложения
  applicationId: "8b304f2104e7394c1a13751e65223fec24a86aa32f974953dc0f4634c28e4e9b",
  // Application Secret из настроек вашего приложения
  secret: "6b338b013c7d2d927bd055c83d422d775531d9ea0916a006b2a9c5c3180b31a3",
  // Полный адрес страницы авторизации приложения (Redirect URI)
  // Важно: этот адрес обязательно должен быть указан в настройках приложения на сайте Unsplash API/Developers 
  callbackUrl: "http://www.skart-info.ru/myProjects/diplomajs/"
});

// Генерируем адрес страницы аутентификации на unsplash.com
// и указываем требуемые разрешения (permissions)
const authenticationUrl = unsplash.auth.getAuthenticationUrl([
  "public",
  "write_likes"
]);	

// Считываем GET-параметр code из URL
// [url]www.example.com/auth?code=abcdef123456[/url]...
const code = location.search.split('code=')[1];

class App extends Component{
	// Если код передан, отправляем запрос на получение токена
	if (code) {
		unsplash.auth.userAuthentication(code)
			.then(res => res.json())
			.then(json => {
				// Сохраняем полученный токен
				unsplash.auth.setBearerToken(json.access_token);
			});

		// Теперь можно сделать что-то от имени пользователя
		unsplash.photos.listPhotos(1, 10, "latest")
		.then(res => res.json())
		.then(json => {
			console.log(json);
				return (
					<div>
						{
							json.map(foto => {
								return (
									<div key={foto.id} className="col-md-4 comment">
										<div className="com-span-1">
											<div className="com-name"> {foto.user.name} </div>
											<div className="com-date"> {foto.updated_at} </div>
										</div>
										<div className="text"> {foto.text} 
											<img src={foto.html} />
										</div>
									</div>
								);
							})
						}
					</div>
				);
		});
	}
	 
	// Если кода нет, отправляем пользователя на аутентификацию
	else{	
		location.assign(authenticationUrl);
	}
}

export default App;

Если переделываю на код без класса, то всё нормально билдится, но react выдаёт свою ошибку

Дык вроде неправильно объявлен класс. В классе вся работа должна идти только через функции.

В строке 64 интерпретатор неявно добавляет ; в конец строки, поэтому на else падает.
(А может и нет)

да не, класс корректно объявлен. Если условную конструкцию убираю, всё корректно работает. Дело именно в If...else

ну и как от этого избавиться?

ссыль на git
 

добавлю ссылку на весь проект, может это как-то поможет
https://github.com/komplekt17/diplomajs

Очевидно, что в классе должны быть только методы и свойства, а у Вас там какая-та каша из условий.

то что внутри класса, надо "обернуть" в метод render

ну так куда условия засунуть? в отдельный метод что ли? вне класса?

напишите по-конкретнее номера строк, которые нужно обернуть

komplekt_17, строки 30-69 включительно, если не ошибаюсь.

обёртывание не помогло

обёртывание не помогло

А как вы "обернули"?

так

import React, { Component } from 'react';
import { render } from 'react-dom'
// Подключаем библиотеку unsplash-js
// (при настроенной webpack-сборке)
import Unsplash from 'unsplash-js';

class App extends Component{
// Создаем экземпляр объекта для доступа к API
const unsplash = new Unsplash({
  // Application ID из настроек вашего приложения
  applicationId: "8b304f2104e7394c1a13751e65223fec24a86aa32f974953dc0f4634c28e4e9b",
  // Application Secret из настроек вашего приложения
  secret: "6b338b013c7d2d927bd055c83d422d775531d9ea0916a006b2a9c5c3180b31a3",
  // Полный адрес страницы авторизации приложения (Redirect URI)
  // Важно: этот адрес обязательно должен быть указан в настройках приложения на сайте Unsplash API/Developers 
  callbackUrl: "http://www.skart-info.ru/myProjects/diplomajs/"
});

// Генерируем адрес страницы аутентификации на unsplash.com
// и указываем требуемые разрешения (permissions)
const authenticationUrl = unsplash.auth.getAuthenticationUrl([
  "public",
  "write_likes"
]);	

// Считываем GET-параметр code из URL
// [url]www.example.com/auth?code=abcdef123456[/url]...
const code = location.search.split('code=')[1];

render(
		// Если код передан, отправляем запрос на получение токена
		{ code ? (
				unsplash.auth.userAuthentication(code)
				.then(res => res.json())
				.then(json => {
					// Сохраняем полученный токен
					unsplash.auth.setBearerToken(json.access_token);
				});

				// Теперь можно сделать что-то от имени пользователя
				unsplash.photos.listPhotos(1, 10, "latest")
				.then(res => res.json())
				.then(json => {
					//console.log(json);
					return (
						<div>
							{
								json.map(foto => {
									return (
										<div key={foto.id} className="col-md-4 comment">
											<div className="com-span-1">
												<div className="com-name"> {foto.user.name} </div>
												<div className="com-date"> {foto.updated_at} </div>
											</div>
											<div className="text"> {foto.text} 
												<img src={foto.links.html} />
											</div>
										</div>
									);
								})
							}
						</div>
					)
				})
			) : (location.assign(authenticationUrl));
		}
	);
	 
	
}

export default App;

komplekt_17, попробуйте так:

import React, { Component } from 'react';
// Подключаем библиотеку unsplash-js
// (при настроенной webpack-сборке)
import Unsplash from 'unsplash-js';


// Создаем экземпляр объекта для доступа к API
const unsplash = new Unsplash({
  // Application ID из настроек вашего приложения
  applicationId: "8b304f2104e7394c1a13751e65223fec24a86aa32f974953dc0f4634c28e4e9b",
  // Application Secret из настроек вашего приложения
  secret: "6b338b013c7d2d927bd055c83d422d775531d9ea0916a006b2a9c5c3180b31a3",
  // Полный адрес страницы авторизации приложения (Redirect URI)
  // Важно: этот адрес обязательно должен быть указан в настройках приложения на сайте Unsplash API/Developers 
  callbackUrl: "http://www.skart-info.ru/myProjects/diplomajs/"
});

// Генерируем адрес страницы аутентификации на unsplash.com
// и указываем требуемые разрешения (permissions)
const authenticationUrl = unsplash.auth.getAuthenticationUrl([
  "public",
  "write_likes"
]);	

// Считываем GET-параметр code из URL
// [url]www.example.com/auth?code=abcdef123456[/url]...
const code = location.search.split('code=')[1];

class App extends Component{
	render(){
		// Если код передан, отправляем запрос на получение токена
		if (code) {
			unsplash.auth.userAuthentication(code)
				.then(res => res.json())
				.then(json => {
					// Сохраняем полученный токен
					unsplash.auth.setBearerToken(json.access_token);
				});

			// Теперь можно сделать что-то от имени пользователя
			unsplash.photos.listPhotos(1, 10, "latest")
			.then(res => res.json())
			.then(json => {
				console.log(json);
					return (
						<div>
							{
								json.map(foto => {
									return (
										<div key={foto.id} className="col-md-4 comment">
											<div className="com-span-1">
												<div className="com-name"> {foto.user.name} </div>
												<div className="com-date"> {foto.updated_at} </div>
											</div>
											<div className="text"> {foto.text} 
												<img src={foto.html} />
											</div>
										</div>
									);
								})
							}
						</div>
					);
			});
		}
		 
		// Если кода нет, отправляем пользователя на аутентификацию
		else{	
			location.assign(authenticationUrl);
		}
	}
}

export default App;

в вашем варианте кода надо подключать реактовский рендер?

import { render } from 'react-dom'

тоже не робит

komplekt_17, не знаю, я больше в backend.

я так и понял, все-равно мерси

Это не нужно.


Метод render должен возвращать сам компонент.

Таки класс объявлен некорректно. Корректно - в классе должны быть только методы(то, как Вам посоветовал оформить код Nexus).
Так что показывайте ошибку, а то получается испорченный телефон.

Да, кстати, render не подразумевает то, что Вы вернете результат функции через промис( и уж тем более того, что результата вообще не будет). Результат надо возвращать сразу, причем именно в виде реактовского дерева.

Для реакции на изменившееся окружение нужны другие методы. Нужно работать через state реактовских компонент.Как то так(пишу по памяти):

class App extends Component{
  constructor(props) {
    //Конструктор класса, выполняется при создании объекта.
    super(props);
    this.state = {
      color: 1,
    };
   this.authrequest = this.authrequest.bind(this);
  }

  authrequest () {
  //Здесь запрос к серверу с ответом, по которому, будет изменен цвет компонента. Нужно использовать именно setState - иначе реакт не поймет что окружение изменилось
  ...
  ля - ля - ля а затем
  this.setState({color: 2,});
  }

  componentDidMount(){
  // Метод жизненного цикла компонента, будет вызван после того, как объект создан и задеплоен в виртуальное дерево. Стоит обратить внимание, что метод render будет вызван до вызова этого метода.
  this.authrequest();
  }


  render(){
  // Вызывается каждый раз, когда изменяется внутренне состояние компонента.
  const {color} = this.state;
  let cmp = null; // тот компонент, который отрисуется в зависимости от переменной color
  if (color===1){
    cmp = (<div>1<div>);
  } else {
    cmp = (<div>2<div>);
  }

  return (<div>
                {cmp }
             <div>);
  }

}