My Portfolio
WordPress, PHP, Html, jQuery, CodeIgnitor, ReactJS, AWS, Rest API and Design
Step 1: Follow the steps in this link https://reactjs.org/docs/create-a-new-react-app.html
npx create-react-app my-app
cd my-app
npm start
Step 2: Install the react DOM package. npm i react-router-dom https://www.npmjs.com/package/react-router-dom
Step 3: Modify the App.js
import './App.css';
import Error from './Pages/Error';
import About from './Pages/About';
import Products from './Pages/Products';
import Contact from './Pages/Contact';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<div className="App">
<Router>
<Link to="/about">About</Link>
<Link to="/products">Products</Link>
<Link to="/contact">Contact</Link>
<Routes>
<Route path='/*' element={<Error />} />
<Route path='/about' element={<About />} />
<Route path='/products' element={<Products />} />
<Route path='/contact' element={<Contact />} />
</Routes>
</Router>
</div>
);
}
export default App;
Step 4: Make 4 pages inside of the src folder About.js, Contact.js,Products.js and Error.js
Step 5: About.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
function About(props) {
const navigate = useNavigate();
return (
<div>
About-
<button onClick={()=>navigate('/products')}>Go to products</button>
</div>
);
}
export default About;
Step 6: Contact.js
import React from 'react';
function Contact(props) {
return (
<div>
Contact
</div>
);
}
export default Contact;
Step 7: Product.js
import React from 'react';
function Products(props) {
return (
<div>
Products
</div>
);
}
export default Products;
Step 7: Error.js
import React from 'react';
function Error(props) {
return (
<div>
Not found page
</div>
);
}
export default Error;
Error.js is run when page not found
Finally run the app npm start