https://github.com/vegadelalyra/space-figma-react-website

Space tourism website made with React taking assets and measures from Figma
https://github.com/vegadelalyra/space-figma-react-website

figma react sass vite website

Last synced: 8 days ago
JSON representation

Space tourism website made with React taking assets and measures from Figma

• Host: GitHub
• URL: https://github.com/vegadelalyra/space-figma-react-website
• Owner: vegadelalyra
• License: mit
• Created: 2023-10-09T22:52:19.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-21T05:59:35.000Z (over 1 year ago)
• Last Synced: 2024-12-09T02:12:20.320Z (2 months ago)
• Topics: figma, react, sass, vite, website
• Language: CSS
• Homepage: https://space-tourism-figma-react.netlify.app/
• Size: 10.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [Look the live website here🌌🚀:･ﾟ ](https://space-tourism-figma-react.netlify.app/)

![image](https://github.com/vegadelalyra/space-figma-react-website/assets/77188420/f82e9abf-f5cd-4c6f-9355-878da2f9f686)

# Walkthrough

create react project      

clear all unnecesary files      

define a clear app file (reduce it to 'app')     

create a pages folder     

create a jsx file for each page      

fill each page file with rfce snippet     

install react-router-dom      

import all pages in app

wrap it all up in the router!

import BrowserROuter as Router, Routes and Route

wrap it all on Router, then .App div container, Routes > Route

On each Route attach a page with its path

On root path, create a nav.jsx component with rfce

add the nav component to your app before the routes

implement a basic navbar: logo containers and ul > li > link to each page

create syle.sass at the route path 

import style.sass from app.jsx, main styles!

define main styles, nav styles and iterate each page

each page will first have its styles then its logic

** refactor nav and container components to a layout comp

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh  

# space-figma-react-website  

Space tourism website made with React taking assets and measures from Figma