DEV Community: SILVOJ RAJESH KUMAR

Quick Setup- React Router V6 🚀

SILVOJ RAJESH KUMAR — Fri, 02 Aug 2024 17:51:12 +0000

React Router is a popular routing library for React applications. It's helpful because it enables dynamic, client-side routing in single-page applications (SPAs). This allows developers to create a seamless user experience by rendering different components based on the URL without full page reloads. React Router manages navigation, enables deep linking, and supports nested routes, making it easier to build complex, multi-view applications while maintaining a clean and organised codebase.

1)Lets install React router dependency:

npm i react-router-dom

2) Create components folder in the src and add few files such as About.js, Navbar.js, Hello.js and include another file to track our route information named as MyRouteInformation.js

3)Setup the MyRouteInformation.js file accordingly

createBrowserRouter function in React Router is used to set up client-side routing for React applications. It utilizes the HTML5 history API to manage navigation, enabling smooth transitions between different pages or components without a full page reload. By using createBrowserRouter, developers can define routes and link them to specific components, ensuring the URL updates accordingly. This function helps maintain the application's state and the browser's history in sync, providing a seamless user experience similar to traditional multi-page applications. It's a key tool for implementing dynamic routing in modern web apps.

4)Make changes to index.js file

RouterProvider is a crucial component in react-router-dom that provides the routing context for the entire application. It works in tandem with a router instance created by functions like createBrowserRouter or createMemoryRouter. When you wrap your application's component tree with RouterProvider, it allows the routing logic defined in your router instance to take effect. This setup ensures that the correct components are rendered based on the URL, and it manages navigation and history, making it easier to implement complex routing schemes in React applications.

5) We can add multiple routes as shown in the image and access them using the path.

6) Finally the setup is done and we can access the different pages with the paths.

Navigation

8) We can navigate from the page using the Name of Tag tag

import Link from react-router-dom

Github Link: https://github.com/rajeshsilvoj/React-Routing-V6

Let's Build ML Application using Streamlit and Azure in 5mins!!

SILVOJ RAJESH KUMAR — Mon, 10 May 2021 04:12:24 +0000

Cognitive Services brings AI within reach of every developer—without requiring machine-learning expertise. All it takes is an API call to embed the ability to see, hear, speak, search, understand and accelerate decision-making into your apps. Enable developers of all skill levels to easily add AI capabilities to their apps-Microsoft.

Microsoft has become a cloud-based provider of AI capabilities, machine learning capabilities and sentimental analysis.
we can use the azure cognitive services to build intelligent applications
Step-1: Create a Microsoft Azure Account.

Step-2:Create a new resource

Step-3: Search for Translator in resources

   ->Give resource name
   ->Select region as eastus
   ->Select free subscription in the pricing tier

Then you can see your API keys for the translator app.

Step-4: Let's set up Streamlit.
Step-5:Open your command line install them

Step-6: There is a good Streamlit course on Udemy. It is a free course for beginners.
Let's set up our application.

Explore the quick start guide on the Azure page and get the code.

Step-7: let's change some of the parameters and then our code will be ready.

Step-8: Run application:- streamlit run .py in command line.

Try out a working application here: https://share.streamlit.io/rajeshsilvoj/scripter_app/main/app1.py

Input:"

The probosci's monkey (Nasalis larvatus) is endemic to the island of Borneo, where it is found predominantly in coastal areas, near rivers and in swamp forests. It is perhaps the most aquatic of the primates and is a fairly good swimmer, capable of swimming underwater; apart from this, it is largely arboreal. This photograph is a composite of three images and shows a probosci's monkey jumping between trees in Labuk Bay in the Malaysian state of Sabah."

Translated to Italian👇:

Translated to Hindi👇:

Github repo: https://github.com/rajeshsilvoj/Scripter-Article
Contact me :
Linkedin, Instagram,Github

Having Trouble Learning ReactJS??

SILVOJ RAJESH KUMAR — Tue, 22 Dec 2020 05:00:51 +0000

Strictly for Beginners!!!😊
It is normal to get stuck at some point in the learning stage, there are some steps to be taken if you lose confidence in learning and building projects.
There are many ways to learn Reactjs, it is available to learn through online courses and Reactjs official documentation, and some of the youtube channels, we can choose based on our style of learning.

Learning react just after HTML, CSS, JAVASCRIPT, will be a bit confusing in the beginning, so don't give up.
Without the proper knowledge of javascript will create a lot of confusion, so learn or go through the basics thoroughly.
Tutors may not be perfect in some aspects if you don't follow any of the steps, do refer to alternative sources.
It will be difficult to note down each and every line of code so try to bookmark the difficult code or copy down code to some notepad or word.
Don't forget to build the projects in between the courses or at least watch the building of projects like we watch TV shows on NETFLIX😂.
Take breaks in between, don't stress out a lot on building projects or to learn for long hours.

These are some of the points which I found helpful while learning react.👍👍
Share your views in the comment section.