Below is the screenshot of my working directory.
I run yarn dev command to start local host to test my site. After the local host is set up I could test every jsx file which is under pages folder by going to their respective link. Like if I want to test campaigns.jsx file I go to http://localhost:3000/campaigns and everything works file and even for any other jsx file under pages folder everything works fine.
But similarly if I want to test jsx files within components folder and go to their respective link like http://localhost:3000/topnav, I get 404 | This page could not be found. error message.
So could anyone tell me is there any possible way to test jsx files which are under components folder as I'm new to this REACT world.
Related
I'm trying to add a variable to my .env file,
so here is the steps I followed
1- I created a .env file in the root directory of the project, under the src directory
2- I added this variable
REACT_APP_BASE_URL='lablabla'
3- I tried to access it from my app.tsx in the same directory (I'm using TS for the whole app)
console.log("lol: ", process.env.REACT_APP_BASE_URL)
And I get undefined at my console
Things I have tried:
I tried to install dotenv and use
require('dotenv').config()
and I ran into a lot of issues, so I decided to remove it as I learned it came out of the box already with react app
under the src directory 2- I added this variable
What do you mean by that?
Create .env file under root directory.
Add this content
REACT_APP_BASE_URL='My-content'
In App.jsx get it this way
console.log(process.env.REACT_APP_BASE_URL);
It's important to start your env variables with prefix REACT_APP_ and once you modify it reload the dev server.
I want to access this image in my component.
I know how to add images in root directory files with './assets/image.png'
But not able to add in this iteamscomponents.js
I added this code in iteamscomponents.js
but it gives an error undefined Unable to resolve module ./assets/icons8_search_200px_3.png from components\ItemsComponent.js:
your path would be
../assets/icons8_search_200px_3.png
The two dots are important, it tells the cursor to navigate one folder up. One dot means stay in the same folder.
I want to run a React app inside salesforce Lightning container. I built the app with npm run build, upload zip file but nothing works. All I can get is a blank page.
Build folder before zip
Zip and uploaded to Static resource
In deveoper console
<aura:application >
<lightning:container src="{!$Resource.Mirage + '/index.html'}"/>
</aura:application>
The preview page is blank and I don't know how to do it properly. I feel like it cannot load my resource.
Do I have to give up on CRA and build custom webpack?
Full disclosure: I never tried this. But it looks like you have to:
To reference a file in an archive, use the URLFOR function.
I am not 100% sure this is the answer.
Let me know.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I created a simple Hello World application using Sencha Architect. The program automatically creates an app.html file, not index.html. Everything works great in my browser.
Next, I run the package command from Sencha Architect and it creates 100's of files in my project folder, including index.html, app.json, packager.json, etc.
The main difference between the app.html and the index.html file is the following line:
<_script src="http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all.js"></script>"
** I added an underscore because this line was editted out
Without this line, the index.html doesn't work in the browser but the app.html does.
I could add this line manually to the index.html file but it gets overwritten every time I run the packager program.
Does anybody know why this is occurring? Is there an option or something I'm missing?