https://github.com/rasif-sahl/react-example-tutorial
https://github.com/rasif-sahl/react-example-tutorial
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rasif-sahl/react-example-tutorial
- Owner: rasif-sahl
- Created: 2023-11-06T15:30:23.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-08T08:11:46.000Z (about 2 years ago)
- Last Synced: 2025-02-07T12:15:11.515Z (11 months ago)
- Language: JavaScript
- Size: 181 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
* Create a React Application:
Start by creating a new React application using Create React App or your preferred setup. If you're using Create React App, you can create a new app with:
```
npx create-react-app color-configuration-app
```
Replace color-configuration-app with your preferred app name.
* Create a JSON File:
Create a JSON file, e.g., colors.json, in the public folder of your React application. You can add your color definitions to this file as shown earlier.
```
public/colors.json
```
* Create a JavaScript File to Generate SCSS Variables:
In the src folder, create a JavaScript file, e.g., generateSCSS.js, that imports the JSON data, generates SCSS variables, and writes them to a colors.scss file:
```
// src/generateSCSS.js
const fs = require('fs');
// Import JSON data
const colors = require('../public/colors.json');
// Transform JSON data to SCSS variables
const scssVariables = Object.entries(colors)
.map(([key, value]) => `$${key}: ${value};`)
.join('\n');
// Write SCSS variables to a SCSS file
fs.writeFileSync('./src/colors.scss', scssVariables);
```
* Run the JavaScript File:
You need to run the generateSCSS.js script to create the colors.scss file. You can add a script in your package.json to automate this task:
json
```
// package.json
{
"scripts": {
"generate-scss": "node src/generateSCSS.js"
}
}
```
Then, run the script using:
```
npm run generate-scss
```
This will create a colors.scss file in the src folder.
* Import the SCSS File in Your App:
In your React app, you can import the generated colors.scss file in your main SCSS file, e.g., src/App.scss:
```
/* src/App.scss */
@import 'colors.scss';
/* Rest of your styles */
```
* Use the SCSS Variables in Your Styles:
Now you can use the SCSS variables in your styles:
```
// src/App.js
import React from 'react';
import './App.scss'; // Import the main SCSS file
function App() {
return (
Primary Color
Secondary Color
Background Color
);
}
export default App;
```
* Run Your React Application:
Start your React application using the development server:
```
npm start
```
Your React application should now use the color values defined in colors.json through the SCSS variables.
By following these steps, you can import and use colors from a JSON file in your React application's SCSS styles, allowing you to dynamically change the color scheme by modifying the JSON data.