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.
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.
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
I am trying to load React build files in a Django template (serving the React build files via Django static files). I’ve had success using this approach in the past with other Django templates, but with this particular case, the React app is not attaching to my div in the Django template. The React app is created using create_react_app with minimal changes.
My src/index.js file: (only changed the root element)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('chat-root')
);
reportWebVitals();
My public/index.html file: (only changed the root element)
<!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`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chat-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>
package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.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"
]
}
}
I built my files via npm run build and placed the build files in my Django static folder. These are then included in my Django template as follows. Note that this Django app has several other React “apps” that use this same approach without issue.
<div id="chat-root"></div>
{% compress js %}
<script src="{% static 'react/build_files/chat.chunk.js' %}"></script>
<script src="{% static 'react/build_files/main.chat.chunk.js' %}"></script>
{% endcompress %}
The Django url setup works with a simple html template so I am sure that is correct.
I have also tried not setting homepage in package.json and setting "homepage": "/"
but that didn't help.
There are no error during build or on browser console. The network tab in dev tools shows that the scripts get loaded but no react components get created.
I am new to react so any help will be appreciated. Thanks!
For anyone facing a similar issue, I was able to resolve it by placing all JS files created in the build.
I noticed there was another file runtime~main.[number].js being created when a build was created. I had skipped this file earlier based on the how the other React "apps" were added to static folder in Django app.
Placing this build file along with the other JS files allowed the app to attach to Django and load properly.
I am trying to create a React application/Chrome extension which overrides the content of a new tab in Google Chrome. I have used create-react-app and am simply trying to override the content of a new tab with App.js content. The folder structure is straight from the initial create-react-app, which is below.
build
node_modules
Public
favicon.ico
index.html
logo192.png
logo512.png
manifest.json
src
App.css
App.js
app.test.js
index.css
index.js
logo.svg
..
..
My manifest.json file looks like this.
{
"name": "..",
"author": "..",
"version": "1.0.1",
"manifest_version": 2,
"description": "..",
"chrome_url_overrides": {
"newtab": "index.html"
}
}
This is what my index.html looks like.
<!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" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</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>
My index.js file looks like this.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have tried inserting the following but receive an empty page.
<script src="../src/index.js"></script>
How would I override the content of a new tab with App.js?
In case some have missed this step, you also need to build the app and load the build file into chrome extensions.
After changing manifest.json in the public folder and adding a .env file in the root directory as described by Corbuk, run npm build. Next, drag the build file into chrome://extensions/ or import it with the Load unpacked button
Originally I modified my manifest.json file to the following.
{
"name": "..",
"author": "..",
"version": "1.0.1",
"manifest_version": 2,
"description": "..",
"chrome_url_overrides": {
"newtab": "index.html"
},
"content_security_policy": "script-src 'self' 'YOUR HASH'; object-src 'self'"
}
The YOUR HASH can be found from the console, as highlighted below
However, I went for an alternative approach. I created a .env file in the root directory and placed the following inside of it
INLINE_RUNTIME_CHUNK=false
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"
}
}