I'm new to react js. I just created new React project add want to add my own assets folder where to define my local images.
Read the documentation of create-react-app where it says the Use of public folder
Good practice is to Create an assets folder inside src folder to add anything that is used when the app is compiled.
Related
how do i download multiple files in a specific folder with a react app. Can i create a folder and download the files in that folder using react app?
kindly attach code
I am having an apk file stored in a folder of my react js project src/asset/myapp.apk, I want to make it downloadable from my portfolio website. How can I achieve that?
Try putting your static files in public/ folder.
Then simply retrieve it by addressing "/path/to/file.apk"
When using src/ filename will be processed and changed relative to your webpack config which can vary each time you run a build which is not a good practice.
If you're using create-react-app read this documentation:
Using the Public Folder
Note: if you are using gatsby, please use static/ folder instead of public.
So I have a react practice project that I want to add in my github repo. I used create-react-app and there are many folders. I tried adding the whole project folder but it says the size is too big. Which folders should I put there? Also I want to be able to deploy it with netlify.
I'd tried to figure out how to use server side rendering (SSR) on my existing react, and I found Next.js which is a SSR framework for React.
Also, there is create-next-app to easily create Next.js app like CRA. As I already have my existing React project, I need to make it compatible with Next.js. But, they have quite different project architecutre.
I attached two architectures of create-next-app and create-react-app each with images below. As Next requires the folder pages, I feel like I need to move my components in that folder, but I'm confused about src and public folder in create-react-app.
Can anyone help me how can I apply Next.js to an existing React app?
create-next-app
create-react-app
You can install Next js by adding 'next' package to your CRA. However, you would have to refractor part of your codebase. The src folder should contain a subfolder called 'pages', consisting of your paths.
Visit the Next JS Documentation for more
I have created a reactjs app which is inside the Loopback folder.
I put a folder tree image below. as the picture inside the client_src have react files.
I have used loopback-storage-component to store images. Those images are stored into files folder.
Now, my problem is to get stored images from files folder. So that, I used
<Img
src={require("../../files/revenue_Licence_Copy/5.jpg")}
/>
while I run reactjs App using npm start into client_src folder.
Then I got an error
Module not found: You attempted to import ../../files/revenue_Licence_Copy/5.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project'snode_modules/.
How to solve my problem
I refer below link
enter link description here but that also not solve my problem..
Please anyone help me?
So basically, you can do a symlink which links a folder inside your app folder to a folder anywhere else on the system. However, if at all possible, please avoid doing this. While a valid solution, it creates a whole bunch of problems in deployment, or moving the repo around. If you work with someone else, they have to have an identical setup as well etc. Moving the folder to the project folder, or having a backend serving data you want is a much better approach.
However, if you really wanted to, you could do, from inside the project folder's node_modules, so from the project root:
cd node_modules
ln -s ../../files ./linked_images
which would link your files folder to a folder called /linked inside the node_modules.
You can then reference the image inside by doing:
<Img
src={require('images/revenue_Licence_Copy/5.jpg')}
/>
Here's a stack answer explaining symlinks