All element rendered in my App.js file are no displaying on my webpage
After I created both functional and class components separately then using <FunctionalComponents/> to import them into my App.js files they are both not showing up on my web page, All element displaying on my web page are in the index.js file, How do I fix this
Related
I'm trying to import a component in Sveltekit but it is searching 3 folders back instead of 2.
import Search from '../../Search.svelte'
But I get the error:
Failed to load url ../../../Search.velte
The folder structure is like this:
/[id]
+page.svelte
Search.svelte
/[slug]
/members
+page.svelte
[id]/[slug]/members/+page.svelte is where I am trying to perform the import.
I have inherit a ReactJS project. There is strange that it does not have App.js file. How can I know where to start with project? I mean how can know where is the entry point of the project?
In your "src" folder there would be "index.js" file, which render your main component in "public/index.html" root element.
And other components can be added in index.js file.
Default index.js file:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
So, your entry component should be at "<App />".
In your app there is no App.js.
So, Whichever component is there, that's your entry component.
Go to index.html file in your project. There a component will be called after the header tag. Get the name of component and try to find the component in your project directory. The file name of component will most probably be Component.js
I have a laravel website that is currently live and is using blade template for the views and I am thinking of using react JS in some views.
I want to know if it's possible to use react in some views while still having the blade template rendering some views.
OR do I have to rewrite the whole website in react for this to work.
Ok here's some example code that might help you get started with React:
Write a test react app e.g. test.jsx in your resources/js (or .tsx if you're using typescript). It might look something like:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
const root = document.getElementById('react-root');
if (root) {
ReactDOM.render(
<App />,
root
);
}
Here App is the React component root for the feature you are replacing.
You can add this in your webpack.mix.js file as well to transpile it independently or import it in your app.js (which is easier). However in the later case you are loading this code in all views and if there is another page with an element with id react-root there will be problems.
Your blade will now become:
#extends('layouts.index')
#section('content')
<div id="react-root"></div>
#endsection
Of course here it is oversimplified. You can just replace only the part that has the feature you are transitioning with <div id="react-root"></div> and have react handle that part from then on.
You can also do this multiple times in a single .blade.php file by making multiple calls to ReactDOM.render on different root elements. React will be fully responsible for everything under the root elements it renders to and the rest of your code will continue to run as before. However be aware that code that relied on element selectors via e.g. jQuery should not be used to manipulate nodes that React manages as that may cause problems.
I’m am new to React and need to understand a concept.
In my text editor there is a source file. Within the source folder I have created component folder as recommended by other sites. This comp folder holds my modules in jsx.
My question is, How do i import my app.js file to component folder modules. App.js is set as export default.
I believe i should use: import App from 'app'; and for other modules import ... from './src/comp/file.jsx'.
is any of this correct.
Your app.js doesn't export app.js per se, it exports whatever you export, probably a class or a function called App.
You probably don't want to import that (except maybe the root index.js did), but you might import another import another component into App, with something like:
import Header from './components/Header'
That's assuming that you have a file called index.js in the subfolder components/Header and that file is exporting the Header class/function.
Trying to convert an existing Single Page App into React web app, incrementally, start by utilizing material-ui Snackbar i.e. http://www.material-ui.com/#/components/snackbar
Assuming existing App resides in single-app.js
And trying to add Snackbar react app , and transpiled it successfully using Babel in server side as react.app.js
Below is a inside react.app.js (before transpiled)
import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Snackbar from 'material-ui/Snackbar';
render(<Snackbar />, document.getElementById('react_container'));
I included both single-app.js and react-app.js within index.html
How can I open Snackbar coded within react-app.js i.e. from single-app.js or from script tag (either javascript / babel) within index.html -- in order to display message?
Many thanks.