sagarb3/react-css-experiments

React Css Experiements

JavaScript

React CSS Helper

React CSS Helper

Project Structure

Project made using simple create-react-app

App.js is the root of the Project
Components folder src/components/* houses all the components
All Components have a index.js from which the default function is exported
The root components folder has index.js file which exports all the public members of the various components
execute npm start to start the project
to run the project git clone the project
run npm i

Bit Dev Setup

Please follow the bit dev setup guideline on the official link of bit.dev
All components inside the src/components are tracked
When new changes in component is made it is pushed to the bit repo
The bit repo is also installed to demonstrate the css-style capability in the SampleComponent2
You can test SampleComponent and SampleComponent2 style differences by first looking making a change in the ButtonStyled css files and seeing it's behaviour in Samplecomponent and then pushing the changes to the bit repo from where the SampleComponent2 is inherting it.
Test Cases Missing in the current Project
The Bit.dev version is not-updated to latest to show the difference between the local styled component and the bit available component and I am picking the style from SampleComponent2 from the bit.dev and from the local export in the SampleComponent

Css Modules

Button Component using plain css module

Button Styled Component Pure Style Component exporting style

Pure css components for style

Usage of Button Styled Component in the Sample Component

Usage of Button Styled Component after being pushed to bit.dev

Future Task