score:3
the boilerplate (create-react-app) you used to create your project utilizes the node.js development environment, so you should stick to that development workflow - by creating node modules.
so you need to convert helloworld.js to a node module:
exports.helloworld = function() {
console.log('hello world!');
};
then use it in other modules of your application (i.e. index.js):
import { helloworld } from './js/helloworld';
helloworld(); // or call from within a react.js component
you should read about how node.js modules work.
score:1
if you check your network tab in your debugger, it might actually load for you. but you're not seeing the effect on your screen because that's not how create-react-app works. it's not serving you a blank index page, it's set up to serve a div that it injects your react app into. you're not finding this on the internet because it's just not how this tool works. read the docs and learn how it's intended to work and you'll be very happy you did. :)
score:4
you could also make it work if you move your helloworld.js
file inside of the public
folder, as the server using by create-react-app
serves all the assets in the public
folder but does not serve src
. here is the documentation
in your index.html
<script type="text/javascript" src="js/helloworld.js"></script>
in your project put the js
folder inside of public public/js/helloworld.js
the type should be text/javascript
as it let your browser know how to interpret the file. the syntax error, you are getting is due to the fact that create-react-app
renders the index.html if the file is not found, and then your browser sees html instead of javascript, hence the error : uncaught syntaxerror: unexpected token <
also create-react-app
hides a lot of complexity for you and it is going to be difficult to understand all of what happens behind the scene. if you want to go through the complete tooling system in place you could run npm run eject
(but read the docs first :) as it can't be reversed.
Source: stackoverflow.com
Related Query
- React - issues with loading an external script
- How do I execute function after loading all external library with React Hook useEffect?
- React - Loading external script gives me error : Failed to execute 'write' on 'Document'
- External script with classes in React
- issues with showing loading image on form submission using functional react hook in rectjs
- How to call loading function with React useEffect only once
- How do I use external script that I add to react JS?
- How to avoid React loading twice with Webpack when developing
- React-Router issues when serving React App with Spring Boot
- React Virtualized Table - performance issues with input element in ~8 columns table
- Performance issues with a tree structure and shouldComponentUpdate in React / Redux
- React Formik bind the external button click with onSubmit function in <Formik>
- Eslint (Airbnb) indentation issues with React code(JSX)
- React with Google Apps Script
- react-i18next not loading json translation files in React app created with create-react-app
- Material Design Lite + React - Issues with Tooltips
- Open external link with function in React
- HTML script is loading AFTER react components
- React application with external plugins
- Load React JS component from external script in "run time"
- Webpack 2 configuration for Tree shaking and lazy loading with System.import on React project
- React Router Link reloading page : Conflict with external event
- Call a Python script from React with next routing and a node.js server
- How do you test temporary loading text with react testing library?
- How to make svg react component imports from external module working with create-react-app?
- React CRA with CSP: Refused to execute inline script
- Having issues with React LinkedStateMixin
- webpack and react jsx - hot loading not working with docker container
- Wait for external script to load before the React component
- Loading images in React with Webpack
More Query from same tag
- Why do I have to click twice for an event in react js
- How img overflow div
- Request cannot be constructed from a URL that includes credentials
- Redux connect does not pass `dispatch` to connected component
- Visual Studio 2015 JSX/ES2015 syntax highlighting
- Passing parameters in route
- webpack4 hot reloading not working for some files
- Don't loadOptions on initial render
- I am getting a Parsing Error: Parsing error: Unexpected token, expected ";" in React
- "this.context" returns an empty object
- TypeError when using React: Cannot read property 'firstChild' of undefined
- How do you render objects from json
- Common js modules in react native
- Construct a generic interface with typescript
- "Cannot GET /" error while running API call
- React - history.location.state complains about a wrong type
- Javascript multi dimensional map and reduce function
- How to add a string to an array?
- Does this two useEffects makes a long loop?
- Nav.Link to="/About" is not working in react-bootstrap? Nav.Link href="/About is working reloading the whole page
- Cannot change value of select element using enzyme
- auth0 - invalid user_metadata type
- react router v6 redirect with params
- React slick-slider wheel Event for child components (useRef)?
- Datatables.net with ReactJS, render a ReactJS component in a column
- React Functional Component update property change
- React-Intl How to use FormattedMessage in input placeholder
- React-Redux: Access dispatch type in JSX
- React: Why is my variable only defined on the first render but undefined on subsequent renders?
- React read file added in dist folder after deploy