We Keep Coding

script.js doesn't load in my create-react-app

I am pretty new to coding and I am currently trying to solve a challenge from frontendmentor.io where my task is to build an ip-address-tracker.
To make this task a little bit more difficult for me, I am trying to build this app with the React framework via create-react-app.
My problem is, that my Javascript file, script.js, somehow isn't working. I am trying to implement it via the script-tag in my index.html.
<script src="../src/script.js"></script>
You can also check out the directory structure, I just updated the project on GitHub.https://github.com/bryanhain97/ip-address-tracker
Thanks a lot.

If you want to include a script in your index.html file in react you'll have to put it into the public folder and specify the path by using %PUBLIC_URL%/path-to-script-relative-to-public-dir
EDIT:
I just looked at your project and what you should do instead of embedding your script in index.html is to import it into index.js. You should probably export the initMap function and call it from index.js

OK. there are a couple of things you did wrong! First of all, React outputs some useful information in the console that is not negligible in case of failure. Please look at the following image.
It is clear that React is complaining about a missing React import. This is because you need to
import React from 'react'
even in a function component. I found this mistake in two places.
The URL you're using in your script.js file is wrong. Please see the git diff over my working directory below.
I don't know how you want to implement all this but I think this is not done THE REACT WAY! React is a component oriented library so, Please check some other alternatives like instead of doing all this in flat functions using direct connections to your DOM element. ReactDOM has some super power to be leveraged here.
I managed to get the application work on my own IP address and Google's (see the screen captures below), though I think you didn't implement it in the REACT WAY. So, keep digging!
[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg

Inporting arbitrary Javascript functions into a Vue.js component

I'm building a project in Vue.js, but it has a quite a lot of Javascript processing (it's all local, so I don't need to have anything server side), and I was wondering if there is a way to import a file that is basically just some processing (mathematical, structure processing, etc.) functions in Javascript - no template, etc. - into a Vue component? It's all working fine using methods in the component, but getting a bit large and "monolithic".

You can keep working with several files and then just to the following.
import AlgebraicFunctions from 'algebraic-file';
import GeometricFunctions from 'geometric-file';
Using the spread operator:
methods: {
...AlgebraicFunctions,
...GeometricFunctions
}

How to use React in multiple places in a normal website

I have a new website which isn't a single page app but a server rendered website (asp.net using Umbraco CMS). I used to use Angular 1.x in my websites, which is easy because you just load it in with script tags and the code is uncompiled.
I have been using React recently in SPAs started with create-react-app which looks after webpack, babel etc. for you and produces a single bundle. However, I want to use React in several places on the website like the main header/menu, contact forms etc so it makes sense to produce multiple bundles, although these bundles may share imports (Moment.js, Formik etc.).
There are instructions on the React website showing how to include a single script and attach it to an element in yourwebsite, but no complex examples.
So, how do I go about setting up something that will transpile everything without duplicating code in bundles. Do I need some kind of master bundle loaded on all pages and individual bundles for things like a contact form?
Secondly, how do I wire everything up? In an SPA you just have a root node and bind your app to the root node using react-dom, but if you've got mini pieces of react functionality littered through your app then do you need some kind of master script to bind everything to the right elements?
Any help would be greatly appreciated, even if it's just pointing me in the direction of some kind of boilerplate project.
Oh, and I'm not interested in doing a server side rendered Next JS app or anything like that, I think that could get too complicated to integrate with the CMS.

I think you can make a single bundle, rendering multiple component to different places. I created a little example:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Body</h1>
</div>
);
}
function Footer() {
return (
<div className="App">
<h1>Footer</h1>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
const footerElement = document.getElementById("footer");
ReactDOM.render(<Footer />, footerElement);
You can play with it in this sandbox example. https://codesandbox.io/s/34nvv4nvy5

In addition to the answer above you can exclude React, ReactDOM or/and React Router (and any other dependencies) from your bundles and include them on the page so you aren't bundling them X amount of times. This way you can have separate entry files for each application.
webpack.config.js
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
}
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js" integrity="sha256-JBRLQT7aJ4mVO0H2HRhGghv/K76c5WzE57wW0Flc6ZY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/cjs/react-dom.production.min.js" integrity="sha256-j2ERTIovDFVe0R+s0etuSiBQ2uxrNE6q0ow/rXxHvLA=" crossorigin="anonymous"></script>

If you want to render elements "outside" your root element of the react application, then you can use react Portals. We are using this approach as well and it's going well.
If you still think you want multiple mini react applications that run on the same page, you can communicate with them with the help of ReactDOM.render. Basically, ReactDOM.render can get invoked multiple times, it won't re-mount the entire application but instead will trigger updates and diffing to the react tree (same as a normal render method of components).
In fact, i wrote an article with a tutorial on how to Integrate React with other applications and frameworks.
I also tried to simulate this approach with a codesandbox example
Hope that helps.

Use Meteor components in React

I have a Meteor app built using blaze. Now I am shifting the UI to react. I have just started learning react and hence I am confused how to use #with, #each, etc., in reactjs.
Code Sample:
<div className="page-content {{#unless}} FLT rd-body {{/unless}}">
How to use '#unless', '#with' and other Meteor components in ReactJS?
Also, how to use Session variables in reactjs?

React is a library to create web-ui e.g. the 'view-layer'. Meteor is a framework, build-system and server all-in-one.
Blaze is the default view-layer. In Blaze you can make your html dynamic with the {{ .. }} tags, as you use above.
React works differently. React templates are Javascript files mixed with HTML. Usually with extension .jsx. I'd visit https://reactjs.org/ for more information, or one of the many tutorials and books that exist.

Read the manuals:
https://guide.meteor.com/react.html
and
https://www.meteor.com/tutorials/react/creating-an-app.
Especially the first link.
It contains the syntax to embed react JSX into blaze templates or use blaze templates as JSX components. So you basically have to decide which templating system you're going to cast to the other system.
Concerning the session variables, have a look at the react documentation.

vuejs include javascript library in spa

i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.

Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.