Why does React code work without any errors? - javascript

I have some question.
I had started React tutorial this page. And I created React project by using 'create-react-app' and delete some files (/src/App.js .. etc.). Finally I written code below and running code.
index.html
<!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>
<div id="root"></div>
</body>
</html>
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends Component {
render() {
return(
<div className="App">
<h1>Hello, React!</h1>
<h2>Created react-tutorial</h2>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
So, I don't know why no error in running this project. I looked at the 'index.html', but there was no script link tag. Why have no errors? Because I used 'create-react-app'?
PS. Some contexts may be strange because I used some Google translate service. Sorry :(..

If you are using create-react-app to bootstrap your project then you need to be aware that create-react-app has a couple of things abstracted, which makes it easy to create a react app without having to bother about scripts, configuration and build tools.
From the Docs, it was stated that for the project to build, these files must exist with exact filenames:
public/index.html is the page template;
src/index.js is the JavaScript entry point.
Here's a link to the Getting Started guide, I hope this helps. Good luck!
P.S From your code - index.js, I can see you still have a reference to index.css, just wanted to point this out since you said you deleted everything. You might also want to take out the two <link> tags in the index.html file which is referencing an image and the manifest.json file from the public folder (if they don't exist anymore)

Related

SyntaxError: Cannot use import statement outside a module in javascript

I'm starting to learn React from zero, locally without set properly all dependencies, the first thing that I did was to use CDNs in my html file, but now I want to know how can I set my machine to import React and ReactDOM and also how can I link CSS to the file.
when I try to run the .js file I got this:
SyntaxError: Cannot use import statement outside a module
When I was using the CDNs links *ReactDOM.render* was working properly
js file
import { React } from 'react'
import { ReactDOM } from 'react-dom'
function FirstComponent(){
return (<div>
<Header />
<Body1 />
<Footer />
</div>)
}
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js" type="text/babel"></script>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
my point is, how could I run a js file with JSX and ReactDOM.render without using CDNs link in html file
Yo could try to use create-react-app
https://create-react-app.dev/
It will setup your app for you.
Once your app is setup, you will be able to "build" your app. When you build your app, the React code becomes part of your JavaScript bundle in your application, so you don't need the CDN anymore.

Using react with normal HTML/JavaScript to run without using npm/node

Suppose you have an application that was developed using the Java Spring framework and deployed on a Tomcat server, also, the application uses AngularJS for most of the front-end application parts.
I am thinking of using React to add HTML components to customize the front-end parts of the application instead of using AngularJs. I did follow React tutorials and realized that you need to have node and npm installed and spin up a server to run the application using npm run start to preview the React Web Application. I wonder how you can include "React components" on a regular HTML/JavaScript page and run this component on the browser without the need to use npm run start. I am trying to avoid the need to install node/npm on the target machine where the Java Spring-based web application is running.
I don't plan to integrate AngularJS with React. All I want to do is to add React HTML/JSX components since I noticed it is much easier than Angular in general.
Is it possible to include the needed libraries for React dependencies along with the target application using the script tag on the main index.htm web page then I can start adding React components as usual?
After installing the react sample project using npx create-react-app react-prj you get the below index.js and a bunch of other libraries and application parts:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
And you get the below main HTML file:
<!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>
As mentioned, if you open the above HTML in the browser, you will get an empty page, and you must run the app using npm run start.
How I can get a setup for a sample React web application without using node/npm and I just want to use a normal HTML/JavaScript application to be run on the browser directly?
Is this possible?
Thanks to #Sean. Also, I found a good reference here:
https://stackoverflow.com/a/56504616/4180447
I managed to implement React without npm as follows:
Create the sample app using npx create-react-app sample-prj as usual.
Modify the HTML and JavaScript files as follows:
/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="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"
/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
<link rel="stylesheet" href="../src/App.css">
<link rel="stylesheet" href="../src/index.css">
<script crossorigin src="https://unpkg.com/react#18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="../src/App.js" type="text/babel" data-plugins="transform-modules-umd" defer ></script>
<script src="../src/index.js" type="text/babel" data-plugins="transform-modules-umd" defer></script>
</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>
/src/App.js
// import logo from './logo.svg';
// import './App.css';
function App() {
const logo = '../src/logo.svg';
return (
<div className="App">
<p>This is paragraph</p>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React xxx
</a>
<div>This is a test with Tarek and Firas</div>
</header>
<p>This is paragraph</p>
<div>This is a test with Tarek and Firas</div>
</div>
);
}
export default App;
/src/index.js
// import React from 'react';
// import ReactDOM from 'react-dom/client';
// import '/src/index.css';
import App from '/src/App.js';
// import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
// reportWebVitals();

React not loading, It also doesn't recognize document commands

Extremely simple HTML and javascript set up for React.js not working. I followed exactly the instructions on the react website but it is not working. I would appreciate if anyone can see any error.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="file1.js"></script>
</body>
</html>
Even the document.getElementById command is not working as shown in the error message on the screenshot below:
Windows 10 32bit, Visual Studio Code.
I hope this finds you well.
You better use any of the NPM react app creating commands, to create your react app. Like npx create-react-app and it will then have the NPM modules that require you to get that root ID you are trying to get using vanilla/backbone js document.getelementbyid while that is not how the root is called. Using the boiler plate that NPM gives you, you can import react and reactdom then to manipulate that single HTML that react renders to the client.
I hope this is the answer to your question.

Error: Target container is not a DOM element BASIC REACTJS

I'm learning React, and I was watching a tutorial in YT (https://youtu.be/7MmncixTZOo), the thing is that I'm just trying to print a text in my main file but doesn't work (the screen remains blank).
This is my package.json (to check versions, I think React syntax is updated, can be?)
I just deleted all the files in the "src" folder and created these two ("index.js" and "App.js").
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.querySelectorAll('#root'));
App.js
import React from 'react';
const App = () => {
return <div>App</div>
};
export default App;
I get this error:
(I know that the error gives it because there is not created the element ID "root", but if I believe it, my screen is blank and it doesn't print the text "App").
Can someone lend me a hand?
Thanks a lot of!!!
Cheers.
EDIT: This is my index.html:
<!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="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>
Inside your index.html file in your public folder you should have a code like this <div id='root'></div> where root targets your unique div element.
And in your index.js file you should not call a collection with document.querySelectorAll('#root') because it returns a collection even if only one occurence matches the selector.
Use instead document.querySelector('#root') to target the first selector that is found.
Technically speaking you can event change the id property name into mammy inside your index.html file like this <div id='mammy'></div>.As it mammy in your index.js it will be document.querySelector('#mammy').It just to help you understand how things really work
I hope that it helped
You have used
document.querySelectorAll
that will return a collection of elements not an element.
You need to use:
document.getElementById('root')

external JavaScript File not working in angular 2

I am building a web app with Angular 2 framework and I want to use an external template. Trying to convert it into an angular2 SPA.
I need to run some scripts (custom.js). All CSS and JavaScript file are added in Index.html.
Everything is working fine except external js. JavaScripts are not working properly. But the CSS files are working. Material components and modals other JavaScript functionality nothing is working inside angular component file.
In your .angular-cli.json file you need to add the external js file under your app's scripts property.
{
// other app config
apps:[
{
// Your app config
"scripts":[
"path/to/your/custom.js"
]
}
]
}
If you would like to use the script in a component, you should declare it before the component class.
declare var customLibraryName: any;
See the Angular Cli Wiki for more details.
thanks #JosephDragovich for your fast reply. To be honest, I am a fresher in Javascript and angular 2. Following your suggestion, I updated my code as below:
javaScript not working
angular-cli.json
"scripts": [
"./src/assets/Js/jquery-2.2.4.min.js",
"./src/assets/Js/bootstrap.min.js",
"./src/assets/Js/jquery-ui.min.js",
"./src/assets/Js/jquery-plugin-collection.js",
"./src/assets/Js/custom.js"
],
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LocumMedApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
<app-root></app-root>
</body>
</html>
place script in index.html also using <script> tag.

Categories

Resources