I'm using the latest create-ract-appversion for my project and I have a custom.js file with a CustomFunction function in it.
I need is to access to the CustomFunctionfunction from one of my components.
Which is the best way to achieve this?
Importing the file into index.html like below, I have 'CustomFunction' is not defined no-undef' error:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- jQuery import -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Custom Style and JS import -->
<link rel="stylesheet" href="./CustomComponent/custom.css">
<script src="./CustomComponent/custom.js"></script>
This is the project structure:
10 ├── public
11 │ ├── customComponent
12 │ │ ├── custom.js
13 │ │ └── custom.css
14 │ ├── favicon.ico
15 │ ├── index.html
16 │ └── manifest.json
What you need to do is export the function form you custom.js file like
const CustomFunction = () => {
}
export {CustomFunction};
Now you can import it in any of the component like
import {CustomFunction} from './path/to/custom.js';
If you have multiple of them in component.js, which you want to use in other components then you can export them like
export {
CustomFunction,
CustomVariable,
CustomVar2,
CustomFunction2
}
And import like
import {CustomFunction, CustomVariable, CustomVar2, CustomFunction2} from './path/to/custom.js';
Related
I cloned my friend's vite project in my system. Installed the required packages even with using --force and audit fix. The Project runs with no error but when the url is opened on website I couldn't see any contents in it except a blank (white) website and in console I am getting the following Error.
The request url "F:\Anish#\react\churi\Expense-Tracker\src\main.jsx" is outside of Vite serving allow list. - F:/Anish/#/react/churi
Refer to docs https://vitejs.dev/config/server-options.html#server-fs-allow for configurations and more details.
This is my vite config file
vite.config.js
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..']
}
}
This is Project's Directory Tree
F:.
| .gitignore
| index.html
| package-lock.json
| package.json
| vite.config.js
|
+---public
| vite.svg
|
\---src
| App.css
| App.jsx
| index.css
| main.jsx
|
+---assets
| react.svg
|
\---components
\---Signin
Signin.css
Signin.jsx
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
I’m using electron-forge and can’t figure out how to make paths relative to build.
Following snippet works in development mode, but not in productions mode.
<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
<head>
<link
rel="preload"
href="/c5c3959c04004102ea46.woff2"
as="font"
crossorigin="anonymous"
/>
<link
rel="preload"
href="/535bc89d4af715503b01.woff2"
as="font"
crossorigin="anonymous"
/>
<meta charset="utf-8" />
<title>Test app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
These are the errors thrown:
index.html:1 GET file:///c5c3959c04004102ea46.woff2 net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///535bc89d4af715503b01.woff2 net::ERR_FILE_NOT_FOUND
Thanks for helping out!
As your Electron application will be built in a different directory, run by your user(s) on any drive in any directory on any OS of their choosing, reference to file paths must be relative (not absolute).
Below are examples of what your <link> href would look like depending on a typical directory structure.
Example 1
Flat render-process directory structure.
Project Root
├── src
| ├── main-process
| └── render-process
| ├── index.html
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Example 2
Downwards render-process directory structure.
Project Root
├── src
| ├── main-process
| └── render-process
| ├── index.html
| └── fonts
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Example 3
Up / down render-process directory structure.
Note use of the ../
This moves you up one folder level.
Up from html (folder) -> to render-process (folder).
Project Root
├── src
| ├── main-process
| └── render-process
| ├── html
| | └── index.html
| └── fonts
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="../fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Example 4
An even deeper up / down render-process directory structure.
Note use of the ../../
This moves you up two folder levels.
Up from main (folder) -> to html (folder) -> to render-process (folder).
Project Root
├── src
| ├── main-process
| └── render-process
| ├── html
| | └── main
| | └── index.html
| └── css
| └── fonts
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="../../css/fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../../css/fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
I have built my components and imported them into the Laravel framework. I have set react as preset and the App loads. The Sass files are in each folder that has a component eg.
\ComponentX
--ComponentX.js
--ComponentX.module.scss
The files load fine but there is no css being added.
I have done npm install sass-node - that is all so far.
I tried to place sass file in the 'sass' folder that is given to us when Laravel is installed but nothing happens, Is there further configuration required?
WEBPACKMIX
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync('localhost:8000');
I am importing the sass into my components
import styles from './App.module.scss';
I have one view 'home.blade.php', which I point the script to the js resource and have an id for App.js to pin to.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('js/sass/app.scss')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
Thank you in advance
This is my first time using reactjs. I installed react and react-dom using npm.
This is my main.js file:
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1> hello world</h1>,document.getElementById("node"));
This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<div id="node"></div>
<script src="main.js"></script>
</body>
</html>
Both files are in the same directory, but react isn't changing the VIEW.
Does anyone have any advice for me on how to proceed?
Try running
create-react-app APP_NAME
Hope this works
I have a react application with the following files and folders:
├── static
│ ├── css
│ │ └── someCssFile.css
│ ├── js
│ │ └── someJsFile.js
├── index.html
├── web.config
The web.config file is as following:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<!-- This part is responsible for URL rewrites -->
<rewrite>
<rules>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="index.html"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
And the index.html file is as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.8833e8af.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.8f22fc15.js"></script>
</body>
</html>
I have also installed the URL Rewrite. But when deploying the app on the ISS, it does not work!
Could you please help me with the problem?
Your action url needs to be a fully qualified url. E.g.
<action type="Redirect" url="https://{HTTP_HOST}/index.html"/>
{HTTP_HOST} is replaced by IIS with the actual hostname in the request. You may want to hardcode your actual domain if you have several domains/ redirects pointing at the same site.