my index.js file
When i run a parcel/ react project i keep getting the error below
#parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array
literal, { for object literal, # for decorator, function, class, null, true, false, number,
bigint, string, regexp, ` for template literal, (, or an identifier
import { createRoot } from 'react-dom/client';
import App from './App/App';
const container = document.getElementById('root');
const root = createRoot(container);
// createRoot(container!) if you use TypeScript
root.render(<App/>);
//index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link href="./index.css" rel="stylesheet">
<title>
My App
</title>
</head>
<body>
<div id="root">
</div>
<script type="module" src="./index.js">
</script>
</body>
</html>
/// my app.js file is below
export default function App() {
return (
<div className=''>
<h2 className='text-green-700 '>
Analytics
</h2>
</div>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
my package.json file
{
"devDependencies": {
"parcel": "2.4",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"react-google-charts": "^4.0.0"
},
"name": "analytics",
"version": "1.0.0",
"description": "Analytic app",
"source": "src/index.html",
"main": "index.js",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"author": "Caldewood Alikula",
"license": "ISC"
}
Avoid include react and react-dom via CDN.
Install them as npm packages:
npm i react#16.6.3
npm i react-dom#16.6.3
Restart the server
Related
Thanks for reading my question.
I successfully made a React JS App from scratch on my other PC using snowpack. And I tried it on my other one. But when I set everything up in powershell(where Im running the npm start from), it keeps telling me snowpack cant find index.js.
[snowpack] [404] Not Found (/.src/index.js)
So now my browser is just blank at the localhost.
Here is the code:
package.json
{
"name": "02",
"version": "1.0.0",
"description": "Practice 3",
"main": "index.js",
"scripts": {
"start": "snowpack dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "V",
"license": "MIT",
"devDependencies": {
"snowpack": "^3.8.8"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02</title>
</head>
<body>
<div id="root"></div>
<script type="module" src=".src/index.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Whats good React?</div>, document.getElementById('root'));
path structure
Apparently a jsx. compies down to a .js like it did on my other machine.
I tried to rename the index file to a normal .js. No difference. I encountered this issue before. But oddly, last time on my other machine I just closed powershell and ran 'npm start' again and it worked. Tried that thrice this time, no change. I also previously had a issue calling 'react' from both 'React' and 'ReactDOM' but fixed that setting 'react-dom' instead of 'react'.
Don't know why its saying this.
Im using webstorm IDE.
Thanks in advance.
I'm studying Reactjs. In my website project I have two .js files with codes of react elements and I need to integrate the element from one .js file into the index.html page and the element from the second .js file - into the second .html page. But both elements can display only on the index.html page. I run the project on localhost via command "npm start" using file package.json and node_modules I uploaded. How to display my react element from the second file on the second page of my site?
file "index.html"
<h1>My react element №1</h1>
<div id="app1">
</div>
.........
<script crossorigin
src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
standalone/6.25.0/babel.min.js"></script>
<script type="text/babel" src="element1.js">
</script>
file "element1.js"
class Element1 extends React.Component {
/* code */
}
ReactDOM.render(
<Element1/>,
document.getElementById("app1")
);
file "page2.html"
<h1>My react element №2</h1>
<div id="app2">
</div>
.........
<script crossorigin
src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
standalone/6.25.0/babel.min.js"></script>
<script type="text/babel" src="element2.js">
</script>
file "element2.js"
class Element2 extends React.Component {
/* code */
}
ReactDOM.render(
<Element2/>,
document.getElementById("app2")
);
file "package.json"
{
"name": "reactapp",
"version": "1.0.0",
"scripts": {
"start": "lite-server"
},
"devDependencies": {
"lite-server": "^2.2.2"
},
"dependencies": {
"create-react-app": "^3.1.1"
}
}
I have a basic HTML/ JS project and have been trying to get react to run. For various reasons, I need to run install React from existing project and not from create-react-app.
Project directory:
|-node_modules
|
|- public
| |- js
| | |- index.js
| |
| |- index.html
|
|- package.json
|
| - ...
Inside index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Inside index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
inside package.json:
{
"name": "developer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node_modules/http-server/bin/http-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"http-server": "^0.10.0"
},
"dependencies": {
"react": "15.6.1",
"react-dom": "15.6.1"
}
}
Super basic. I am following instruction from FB React Installation. However, when I ran npm start and went to 8080, it shows a completely blank page.
What am I missing?
This is simplest implementation of react without bundle setup.
From documentation itself: single-file-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
You can use babel with webpack or gulp to set up your react development environment. This has great explanation to things and getting started.
Also you can use create-react-app to get started with your project and all the settings will be done before hand.
You should use a webpack or browserify to render into a browser.
If you are using react tag is not HTML tag but it is react html tag:
h1 : React.HTMLProps
So, it will not render as HTML. This react html is called as JSX.
Browser don't understand JSX you need a parser for it. To parse this JSX you may use babel.
** All html tags in react are bot actual html tags but react's tags
Probably you forgot to nest the content in a return function in your component.
I am beginning with react at the moment coming from pure front end development with HTML, CSS and a bit of jquery. So I got no experience with package installation. I wanted to install axios using npm.
I started with npm install axios and it seemed to work. But I still get the error message "axios is not defined". What I missing? Do I have to right a dependency in my package.json? And if yes how do I right it?
Package.json
{
"name": "first-webapp-react",
"version": "1.0.0",
"description": "",
"main": "main.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
"build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js"
},
"author": "BAGGID",
"license": "MIT",
"dependencies": {
"moment": "^2.10.2",
"react": "^0.13.2",
"axios": "^0.15.3"
},
"devDependencies": {
"browserify": "^9.0.8",
"reactify": "^1.1.0",
"uglify-js": "^2.4.20",
"watchify": "^3.1.2"
}
}
var React = require('react');
var TopBar = require('./Top-bar');
var ProductPage = require('./Product-page');
var Test = require('./test');
var App = React.createClass({
getInitialState: function() {
return {
page: 'SearchResult',
jobs: []
};
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios.get("http://codepen.io/jobs.json")
.then(function(result) {
_this.setState({
jobs: result.data.jobs
});
})
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render(){
console.log('Person: ' + this.state.person);
return (
<div>
<TopBar />
<ProductPage />
<Test />
</div>
);
}
});
module.exports = App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
<link href="assets/css/baggid-standart.css" type="text/css" rel="stylesheet" />
<link href="assets/css/login.css" type="text/css" rel="stylesheet" />
<link href="assets/css/button-stacking.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
</div>
<script src="./compiled.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
You should try to import it before use it.
import 'axios' from 'axios';
Also like this.
const axios = require('axios');
Just install via CDN insert this code in your html file
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Just insert this code to your html file and it will work.
so here is how your html file will be
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
<link href="maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body> <div id="main"> your content here </div>
<script src="compiled.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
Check this simple example, how to use axios:
var App = React.createClass({
getInitialState: function() {
return {
page: 'SearchResult',
jobs: []
};
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios.get("http://codepen.io/jobs.json")
.then(function(result) {
console.log('success');
_this.setState({
jobs: result.data.jobs
});
})
.catch(e => console.log('error', e))
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function(){
console.log('Person: ');
return (
<div>
Hello
</div>
);
}
});
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='app'/>
Try to globally install axios, using
$ npm install -g axios
I am not sure I am doing it the right way. I have defined modules the following:
require('angular');
require('angular-ui-router');
var $ = require('jquery');
require('bootstrap');
I have my package.json file like this:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "browserify main.js -o bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^12.0.1"
},
"dependencies": {
"angular": "^1.4.8",
"angular-ui-router": "^0.2.15",
"bootstrap": "^3.3.6",
"bootstrap-social": "^4.11.0",
"font-awesome": "^4.5.0",
"jquery": "^2.1.4"
}
}
And my html page:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<!--header-->
<div ui-view="header"></div>
<!--main content-->
<div ui-view="content"></div>
</div>
<!--push the footer down-->
<div id="push"></div>
<!--footer-->
<div ui-view="footer"></div>
<script src="bundle.js"></script>
<script src="commonViews/commonView.js"></script> //angular module defined
</body>
</html>
When I run the html page, I get an error in console saying "angular is not defined"
What I am doing wrong? I have run the command browserify maing.js -o bundle.js which minified all the code into bundle.js file and yet still the same error. Apart from that I am not able to bundle bootstrap and font-awesome css files. Is it true that broswerify doesn't support css files?