Мой главный jsx:
import React from 'react'
import ReactDOM from 'react-dom'
import Header from './components/header/header'
ReactDOM.render(<Header />, document.getElementById('wrapper'))
components/header/header.jsx:
import React from 'react';
class Header extends React.Component {
render() {
return (
<header className="header_block">
<div className="header_block-logo"></div>
<div className="header_block-score">
Score:
<span className="header_block-score_curr" id="score">0</span>
</div>
</header>
);
}
}
export default Header;
Мой проект:
При сборке ошибка выскакивает:
Подскажите в чем проблема?
Ведь в ReactDOM.render нужно добавить <Header />
Чего он ругается?
UPDATE: мой package.json:
{
"name": "songbird",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rm -f -r dist",
"build-dev": "webpack -d --mode development",
"build-prod": "webpack -p",
"start": "webpack-dev-server --open --hot --mode development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/kirillleogky/songbird.git"
},
"author": "Kirill Leogky",
"license": "ISC",
"bugs": {
"url": "https://github.com/kirillleogky/songbird/issues"
},
"homepage": "https://github.com/kirillleogky/songbird#readme",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.10.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^2.3.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.1",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
У вас файл .babelrc
находится в dist
папке, а должен быть в корне (рядом с другими конфигурационными файлам: .eslintrc
, webpack.config.js
).
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Если нажать на картинку, то она будет следовать за курсоромНо а как сделать так, чтобы при втором клике на картинку она бы уже отстала от курсора...
Есть огромный код Среди него нужно найти, когда (место в коде) значение одной из переменных-строк не станет равным "GV 7" из Visual Studio
Дан квадрат его пересекают произвольным количеством прямых параллельных основанию, так, что делят на прямоугольникиНайти точки пересечения...