# SOFTWARE ENGINEERING JOURNEY

Introduction.
we started learning react for our enginerring bootcamp we learnt what react is how it is use and making work and development eaiser and stress free for a frontend-developer.

# What is React.
React is a javascript framework that helps you build user interface. lets start with how to build a react application we use vite which makes it more easier and faster firstly we open our terminal or gitbash for windows and the run these command

npm create vite@latest your-app

so what these those is that it builds your react application using vite and also the place i wrote your app is where you write your app name using these it would ask you for framework use React and also for language use Javascript for beginners and you can also use Typescript if you have knowledge or experience on that so once your app is built these what it looks like

here is the example of framework and language you choose will onces you run these command

npm create vite@latest your-app


and also react is also an spa which is (single page appliction) what that means is react is a one pager application desgin and develop by facebook known as meta the single page application means that react listen to only one page that is our app.jsx example below:
so any other page and components we call in our app we render it to app.jsx like our about-page nav-components they difference between pages and components is that a page is taking you to another difeerent section example like a website a shooping cart website there is a page where once you clicked add to cart and you clicked the cart it takes you to another page that is pages but components are our navbar the footer and even the items in our cart are also components here is an example of components
here is an example of a page

Going on we would look at routing and usestates and others

### React Routing Between Pages and Components
Routing in React is the process of navigating between different pages or components in a single-page application (SPA) without reloading the entire page routing is also the process of linking from pages to pages and components to components
we have different types of routing the most common once are:
* BrouwserRoutes(Router-Dom)
* Link
* useNavigate
these are the tree most common and used routind methods in react routing examples of the rounting methods
* Firstly the React-Router-Dom here is an example of using the router dom firstly you have to install it using these command

npm install react-router-dom

then you will set it up in your app.jsx like these:
the Routes holds the brouswer routes that you enable you routing in the pages then the Route hold all the components/pages you want to rout/link to then the Route with the path and element holds each pages/components you are routing to

* Secoundly is the Linking method it is almost similar to the router-dom but much more easier and also Note: that using the link you dont need to install it seperetaly because once you install router-dom it brings the link usenavigation uselocation and all others what you have to do is to import the link in pages/components you want to use it e.g

* Lastly the useNavigate it is commonly used in form elements after feeling in the form and want to navigate anywhere useNavigate is better and easier for that these is an example of the useNavigate

Conculusion
React is a javascript framework for easy and modern design watch out for next week where i would keep you posted on all these