I'm trying to add a component to my App.js so I can see it reflected in localhost but I only see the text I wrote before. I tried just changing the text but it's also the same one. Opening it in incognito mode does not help, neither does disabling the cache.
Is something else happening?
This is App.js:
This is the App.js:
import React, { Component } from 'react';
import { render } from "react-dom";
export class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<h1> The View </h1>
)
}
}
const appDiv = document.getElementById('app');
render(<App />, appDiv);
This is the package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/preset-env": "^7.14.1",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"reac": "*",
"react-dom": "^17.0.2",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#material-ui/core": "^4.11.4",
"react-router-dom": "^5.2.0"
}
}
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forum</title>
{% load static %}
<link rel= "stylesheet" type="text/css" href="{%static "css/index.css" %}"/>
</head>
<body>
<div id="main">
<div id="app"></div>
</div>
<script src="{% static "frontend/main.js" %}"/>
</body>
</html>
Related
my app.js
class App extends React.Component {
render() {
return (
<div><h1>Welcome to React</h1></div>
);
}
}
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
my html
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello</p>
<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>
<div id="app">
</div>
</body>
</html>
I want to show the whole class in html, because it takes a very long time to transfer the elements, especially when there are a lot of these elements.
And the situation is that the same code works in the compiler, but only Hello is displayed for me
Here is my json, maybe something else needs to be set
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^6.7.1",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
I am working on a React app. It used to open, but closing my app, taking a break and reopening it again localhost:3000 is showing a blank page from the index.html file, and not the app.js.
In gitbash I used cd to go to the file where the app is located and used npm start
the app was initially created with the create-react-app command
there it says that the webpack was compiled succesfully.
However, I get served a blank page. My index.html file is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:300,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:600" />
<title>Jammming</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
and my app.js code (located at src/Components/App/App.js) is the following:
import React from 'react';
import './App.css';
import { SearchBar } from '../SearchBar/SearchBar.js';
import { SearchResults } from '../SearchResults/SearchResults.js';
import { Playlist } from '../Playlist/Playlist.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 },
{ name: 'name2', artist: 'artist2', album: 'album2', id: 2 },
{ name: 'name3', artist: 'artist3', album: 'album3', id: 3 }]
};
};
return() {(
<div className = "App" >
<header className="App-header">
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div class="App">
<SearchBar />
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults}/>
<Playlist />
</div>
</div>
</div>
<p>
Edit <code>src/App.js</code> and save to check check.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)};
}
export default App;
and this is the package.json file
{
"name": "jammming",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
many thanks!
So, I am stuck on this error:
Babel seems to work fine. It makes all the changes to the file in another folder. I guess I have all the necessary dependencies installed.
Package.json :
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Dima",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.5.2",
"babel-preset-react": "^6.24.1",
"webpack-dev-server": "^2.9.7"
},
}
After some researching it seems that the code doesn't properly update the HTML file after a couple of changes to the dependencies (I tried several versions), or something with connection app.js file to HTML. But I don't know how to approach this, particularly in my environment.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Indecision App</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="/public/scripts/app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.js
console.log('App.js is running, but not really!');
// JSX - JavaScript XML
var template = (
<div>
<h1>Indecision App</h1>
<p>This is some info</p>
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
</div>
);
var appRoot = document.getElementById("app");
ReactDOM.render(template, appRoot);
I don't know how to fix it, I have been search too many informations, all of people told me I don't install npm module, but my 'package.json' file has already installed them.
I have installed all npm module
dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^6.22.0",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue": "^2.1.10",
"vue-hot-reload-api": "^2.0.8",
"vue-html-loader": "^1.2.3",
"vue-loader": "^10.3.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"}
other files
webpack.config.js
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}
]
}};
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'body',
components:{
app:App
}
});
App.vue
<template>
<h1>welcome Vue</h1>
</template>
<script type="text/javascript"></script>
<style type="text/css"></style>
and the final file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
</html>
when I start webpack-dev-server, shell told me
TypeError: this._init is not a function
(ps : my English is not good, so....)
I have solved this problem, In 'webpack.config.js' file
{test:/\.vue$/, loader:'vue'}
change to
{test:/.vue$/, loader:'vue-loader'}
Because I use vue 2.0 version.
The line in webpack.config.js should be full name:
{test:/\.vue$/, loader:'vue-loader'},
I'm trying to get my application to run with the new RC7 of angular but i cant seem to be able to get it done, as the console shouts:
Promise rejection: Zone.assertZonePatched is not a function angular2-polyfills.js:489
And when this somehow disappears, this pops up:
Reflect.getMetadata is not a function (..) core.umd.js:472
Looks like the implementation changed, and mine isn't updated although i npm installed everything from scratch, update my package.json as follows:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.7",
"#angular/compiler": "2.0.0-rc.7",
"#angular/core": "2.0.0-rc.7",
"#angular/forms": "2.0.0-rc.7",
"#angular/http": "2.0.0-rc.7",
"#angular/platform-browser": "2.0.0-rc.7",
"#angular/platform-browser-dynamic": "2.0.0-rc.7",
"#angular/router": "3.0.0-rc.3",
"#angular/upgrade": "2.0.0-rc.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.21",
"angular2-in-memory-web-api": "0.0.19",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.3",
"angular2": "2.0.0-beta.17",
"angular2-apollo": "^0.4.6",
"apollo-client": "^0.4.13",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.1",
"moment": "^2.14.1",
"source-map-loader": "^0.1.5"
},
"devDependencies": {
"ts-loader": "^0.8.2"
}
}
index.html: (I have also tried refering to unpkg.com for the packages, no success)
<html>
<head>
<title>My App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"
integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"
integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dist/bundle.js"></script>
</html>
Any idea how to fix this?
Thanks in advance! :)
NOTEs:
As per package.json, you are using Angular2.0.0 You don't need angular2-polyfills.js
Remove "angular2": "2.0.0-beta.17", from package.json
Remove angular2-polyfills.js from index.html
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
Infact, if you have angular2 folder under node_modules then delete that folder. latest angular2 packages will be available in #angular folder under node_modules.