Creating a portfolio using React.js involves several steps: setting up your project, creating a portfolio component, styling it with CSS, and implementing AJAX filtering. I’ll provide you with a step-by-step guide to get you started.
Step 1: Set Up Your Project
Make sure you have Node.js and npm (Node Package Manager) installed on your system. If not, you can download and install them from the official Node.js website (https://nodejs.org/).
Next, create a new React.js project:
npx create-react-app my-portfolio cd my-portfolio
Step 2: Create Portfolio Component
Inside the src
folder, create a new component called Portfolio.js
:
// src/components/Portfolio.js import React, { Component } from 'react'; class Portfolio extends Component { constructor() { super(); this.state = { items: [], // Your portfolio items data will go here selectedCategory: 'all', // Initial category filter }; } // AJAX request to fetch portfolio data componentDidMount() { // Example: Fetching data from an API fetch('https://your-api-url.com/portfolio-data') .then((response) => response.json()) .then((data) => { this.setState({ items: data }); }) .catch((error) => console.error(error)); } // Function to filter items by category filterItems(category) { this.setState({ selectedCategory: category }); } render() { const { items, selectedCategory } = this.state; // Filter items based on selected category const filteredItems = selectedCategory === 'all' ? items : items.filter((item) => item.category === selectedCategory); return ( <div className="portfolio"> <div className="portfolio-filter"> <button onClick={() => this.filterItems('all')}>All</button> <button onClick={() => this.filterItems('web')}>Web</button> <button onClick={() => this.filterItems('design')}>Design</button> {/* Add more category buttons as needed */} </div> <div className="portfolio-items"> {filteredItems.map((item) => ( <div key={item.id} className="portfolio-item"> <img src={item.image} alt={item.title} /> <h3>{item.title}</h3> <p>{item.category}</p> <a href={item.link}>View More</a> </div> ))} </div> </div> ); } } export default Portfolio;
Here’s an example of how you can structure the portfolio items data in JSON format:
// Sample portfolio data [ { "id": 1, "title": "Portfolio Item 1", "category": "web", "image": "https://example.com/images/item1.jpg", "link": "https://example.com/portfolio/item1" }, { "id": 2, "title": "Portfolio Item 2", "category": "design", "image": "https://example.com/images/item2.jpg", "link": "https://example.com/portfolio/item2" }, { "id": 3, "title": "Portfolio Item 3", "category": "web", "image": "https://example.com/images/item3.jpg", "link": "https://example.com/portfolio/item3" }, { "id": 4, "title": "Portfolio Item 4", "category": "design", "image": "https://example.com/images/item4.jpg", "link": "https://example.com/portfolio/item4" } ]
Step 3: Create CSS for Portfolio
Create a CSS file for your portfolio component. You can create a new CSS file, for example, Portfolio.css
, and place it in the same folder as your Portfolio.js
component:
/* src/components/Portfolio.css */ .portfolio { /* Add styling for the portfolio container here */ } .portfolio-filter { /* Add styling for the filter buttons here */ } .portfolio-filter button { /* Add styling for individual filter buttons here */ } .portfolio-items { /* Add styling for the portfolio items container here */ } .portfolio-item { /* Add styling for individual portfolio items here */ }
Step 4: Import and Use Portfolio Component
In your src/App.js
file, import and use the Portfolio
component:
// src/App.js import React from 'react'; import './App.css'; import Portfolio from './components/Portfolio'; function App() { return ( <div className="App"> <header className="App-header"> <h1>My Portfolio</h1> </header> <main> <Portfolio /> </main> </div> ); } export default App;
Step 5: Styling and AJAX
Now, you can style your portfolio by modifying the CSS in Portfolio.css
. Additionally, you’ll need to replace the example AJAX code in Portfolio.js
with your actual AJAX request to fetch portfolio data from an API or another data source.
Finally, make sure to customize the portfolio data structure according to your needs, and replace 'https://your-api-url.com/portfolio-data'
with the actual URL of your data source.
Once you’ve completed these steps, your React.js portfolio should be set up with a filterable list of items. You can further enhance and customize it as per your project requirements.