this image shows multiple apps that should run when I click on them individually.Like: if i click Filter then it should run Filter.js .
You should try react-router: https://github.com/ReactTraining/react-router
If I well understood, you're trying to split your app into sections and react-routing is great to do so. You also get path/link matching to your route as a bonus.
It comes with a nice tutorial https://github.com/reactjs/react-router-tutorial which shouldn't take long to go through. For your case, you should need just the first 3 steps.
Good luck.
Related
I have a React Application which contains two parts: the title part (a presentation screen which is short in size) and the main part (which is huge). I need to divide this app into two modules so each module has its own JS and CSS part and the main part should be loaded on demand, only when the user decided to continue using an app and clicked to "Continue" on the title screen.
So
1. Title part should be loaded and run always
2. The main part should be loaded and run on demand only
How do I split the application into two different JS and CSS files? How should I write in the code to include and run the main part?
I am a novice in React, please help.
P.S. I found this link recently but not sure if it is the thing I need to use and also I still don't understand how to divide the App into 2 parts.
Thank you so much!
I found an answer by myself. There is a good starting point at the ReactJS documentation:
https://reactjs.org/docs/code-splitting.html
Exactly what I need.
My story:
I want to launch very quickly one page, but I am really bad at CSS. I know react and wanted to get better there so I bought two application templates from themeforest. One is landing page, another one is kind of a dashboard page. All styled, independently works great. Now I would like to integrate them into a one application, so when user clicks on "login" in landing page he will be redirected to the dashboard application login page. Both applications are indepented. Both are made using CRA. Backed will be writted in .NET.
How should I do this? What are the best ways to do this? I could "copy-paste" some of the files of the smaller application (landing) to the dashboard app and change the root of the react, this is doable but will take some time to move everything, and build properly. Maybe there is another way that you can think of?
Most of the react developers(not good in CSS) will be in a similar situation. There is no readily available solution I can think of. I suggest you to manually go through the landing.html and dashbaord.html and split it into 2 react components minimum. You mentioned that you know react, so it will be easy for you. The toughest part for you will be resolving CSS class conflicts. The two HTML files might be using the same classes. Here you need to go case by case or change the names of the CSS class for either landing-style.css file or dashboard-style.css file.
Time to learn CSS basics. Good luck with your CSS learning.
Why to merge the codebase, instead deploy them separately.
For example:
Let's deploy landing page to www.example.com and dashboard to app.example.com.
Once the user clicks on signup/sign-in just redirect to app.example.com.
This way you can focus on important aspects of each application.
Landing page for SEO and dashboard for new features.
I am using angular js for my project. I want to show tour guide for my project which goes through multiple pages and show next step on next button click.
I use ng-walkthrough for single page tour--
https://www.npmjs.com/package/ng-walkthrough
But not getting proper example to make all tour steps in flow and goes through multiple pages?
for angularjs touring i use ui-tour http://benmarch.github.io/angular-ui-tour/#/docs instead of ng-walkthrough.
This one i found better option as per my requirement.
I'm new to AngularJS, and i'm want to know what's the best and easiest practices to do this simple shop list application.
So this is my shop:
I got three servers in my select input. Each server got own list of items, displayed in another component.
I'm thinking about creating routes with variables like localhost:4200/shop/{server1} which gonna show my list of items based on url path. Select option will just change path in my application to show shop list for specific server.
Is it a good practice, or there is better and easier solution to implement this simple shop application?
If you're asking if filtering data with routing is a good practice with Angular, I can say that it is not a bad one. Here's a link to the official Angular documentation about routing : Angular - Routing
But if you're asking if it is the only way to filter data or spread parameters, the answer is clearly no. Angular projects are SPA (Single Page Application), so you can do everything without touching the url.
For a quick example, you can attach a (click) event on your elements that display the shop list you want
I think you can use just one component and three different click events to display three different results. One component can work in your case. Using a router and routing logic for your requirement will be a costly affair. Your user will have a better application feel if these are covered in just one component and with three different click events.
I'm confused
it seems there is 2 way to run reactjs projects
1. in browser between html and script tags
2. not between html and script tags(it runs on browser) but it's different
I'm confused. explain it to me plz
React is a technology that is rendering custom web components into the browser, when you have a view, let's say dashboard composed of multiple React components, you have two ways to display that to a user:
1/ you display the html that typically contains the root React element and load an associated JavaScript script which contains all the React logic, then fetch the required data of that dashboard, so it will render all your graphs and stuff.
2/ when the user request that specific page, your server application already knows which data are required to render the initial view, so it will compute in advance how the page looks like and send a final first version to the user, it is called server-side rendering. From there obviously the page can be dynamically modified by local JavaScript running in browser afterwards, based on user interaction.
Both approaches have pros and cons, like testing capabilities, speed of execution, and so on... so I encourage you to read about the topic on the web, you can find tons of articles on React server-side rendering that will explain that better than me:
https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
https://github.com/mhart/react-server-example