2 Mins Read
January 29, 2023
Category
React
Create a template using React router and SASS
- Start by creating a new React project using CRA by running the command
npx create-react-app my-app
. - Next, install react-router-dom by running the command
npm install react-router-dom
. - In the
src
folder, create three new files:Home.js
,About.js
, andContact.js
. These will be the components for your three pages. - In the
src
folder, create a new fileRoutes.js
. This file will be used to define your routes. - In
Routes.js
import React from ‘react’ and {BrowserRouter as Router, Route} from ‘react-router-dom’. - Define three Routes, one for each of the pages you created in step 3.
- In
App.js
, import theRoutes
component and render it inside the return statement of the App component. - To use Sass in your React project, install the node-sass package by running the command
npm install node-sass
. - In your
src
folder, create a new folder calledsass
. Inside this folder, create a new file calledmain.scss
. - In each of your page components, you can import the
main.scss
file and use the styles defined in it. - To run the app, use
npm start
command
Here is an example of the full code for each of the files described above:
src/Routes.js
JavaScript
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
import Contact from './Contact'
function Routes() {
return (
<Router>
<Route path="/" component={Home} exact />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
)
}
export default Routes
src/App.js
JavaScript
import React from 'react'
import Routes from './Routes'
function App() {
return (
<div>
<Routes />
</div>
)
}
export default App
src/Home.js
JavaScript
import React from 'react'
import '../sass/main.scss'
function Home() {
return (
<div className="container">
<h1>Home Page</h1>
</div>
)
}
export default Home
src/About.js
JavaScript
import React from 'react'
import '../sass/main.scss'
function About() {
return (
<div className="container">
<h1>About Page</h1>
</div>
)
}
export default About
src/Contact.js
JavaScript
import React from 'react'
import '../sass/main.scss'
function Contact() {
return (
<div className="container">
<h1>Contact Page</h1>
</div>
)
}
export default Contact
src/sass/main.scss
JavaScript
.container {
text-align: center;
}
Please note that this is a basic example and you may want to add more functionality and styles to your components as needed. Also, Make sure that you’ve installed the necessary packages react-router-dom
and node-sass
.