Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Some time ago I created a front-end framework in html/css/jquery for dashboard creation for my company (something very complete) using classes like bootstrap.
Only, the new projects of my company will be done in react, and I need to adapt everything. I was thinking of simply importing the scss as several linked files, and use it simply by adapting some parts of the jQuery by the state react, especially for the onHover of the navbar and the header.
Well, this solution is extremely temporary because it implies each time to copy/paste the scss folder, it's not great, and my final goal will be to have a library of react components that you import with a simple npm install, like react bootstrap :
<Button {props} />
<Navbar>
<Navbar.Brand.../>
</Navbar>
But also to be able to use the grid and the "simple" classes which are defined in the css of the library :
<div className="col-6">
<div className="card">
</div>
<div>
My explanation may not be very clear, but basically I'd like to create/use the main components with the lib, and use the scss classes of the lib...
Is this possible? If so, what would be the most suitable solution, knowing that I was thinking of making a library with storybook...
I came across a similar usecase.
You can use https://www.npmjs.com/package/create-react-library npm package.
It will reduce lot of your work.just focus on writing components/scss and check the dist same time with a test application provided by the package.
It works well!
I am in the same boat as you, I created a set of components that I used in one project and needed to use in others without copying and pasting. The best solution I have found so far is Lerna. It will not be easy and there is a big learning curve but after I spent some time on it I was able to get your desired result and have my own private npm packages that my team can install on projects without copying and pasting. Since you want to use storybook this may help.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
Hi is there an event that detects changes to the js code so you could change the version number evertime you do something with the code
I am to lazy to change the version number on my site every time I work on it :)
There are a lot of ways to do this, which is the good news. The bad news is that the most appropriate method for your project will depend very heavily on the details of how your project is set up, what method you use to deploy it, and so on. Generally things like automatic version increments on deployment are done by CI/CD tools, and that's a large field. You'll have to do some research on your own, with your project specifics as well as your needs in mind, to decide on the best solution. For example, if this is a private project and you don't want to bother with semantic versioning you can simply increment a counter, whereas a more elaborate project might have more complicated requirements.
Your question is tagged with javascript, although it's not clear what package manager you're using (if any). If you're working with npm or yarn you can use push or commit hooks, which is perhaps the simplest option.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 months ago.
Improve this question
I have question about the correctness of using styled components or another type of css styling in react
I prefer to use styled components in my projects. I agree that ionic components have many functionality out the box that help me work with native platform correctly
but for example ion-text is useless for me because it havent got support for font-size, font-weight in variables.css
so I prefer to create my custom TextComponent by styled components lib.
and there are many cases in my project when comfortable for me to use styled-components instead ionic components
so... the question
does use styled-components effect on my project? Are there some problems of using styled-components instead ionic components
or it will do no effects on my projects and there is no reason to use only ionic components for my UI?
There is no such specifications to use ionic tags only, as you mentioned ion-text.
Mostly ionic components are pre-styled to fit /adjust itself in mobile view as well.
If anyone uses custom styled components/tags considering mobile view and functionality in concern, it don't affect your mobile view.
Just use relative parameters like %, rem etc for designing, it helps in maintaining the view for mobile.
So conclusion is, you can use custom components,it will not affect your project.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm learning ReactJS, I know that react is about declaring the way something should render, giving it some data and poof, when the data changes, it renders those changes.
But if I want to manipulate the DOM, an example change a color, create a accordion, make animations, add and remove a class, etc.
React can do that? Could I migrate my jQuery projects to Reactjs without any problem?
There are many approaches for that task, a complete list is here in the official Docs. Either use React as a Wrapper on top of your jQuery Application or Translate your jQuery App to a React App.
From the official Docs
React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty .
Here is a medium article that may help you.
How-my-team-converted-our-website-from-jquery-to-react-in-small-steps
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I noticed in Jira, they have obfuscated the CSS classes, so they look odd and they are different on every page refresh:
<div class="sc-dYaWWc dJrjAK">
<div class="sc-iLVaha hfGHeD">
<div class="sc-geAxOV krrXnm">
<div class="sc-bJT2cE bPFEwh">
<div class="sc-imDrJI jKvdHw">
<div class="sc-hAhkBK epXQAj">
...
What is the motivation behind this, maybe to prevent crawlers or other security concerns? Is it a worthwhile practice for general app development?
The main reason of obfuscated/scrambled CSS class names is the usage of CSS modules to provide style encapsulation and size reduction.
Style encapsulation (and style leakage) is still a great issue on the web, especially when web apps and sites becoming more-and-more complex over their lifetime.
Soon (hopefully), we'll have Shadow DOM capabilities in all browsers, until then some form of modular CSS solution is needed to properly encapsulate styles. Check out this article about it.
In summary:
CSS Modules provide modular,
reusable, and cross-browser solutions for:
Conflictless styles
Direct and clear style dependencies
Avoiding global scopes
React, Angular and Vue use their own solutions to this problem in their build-chain. Most modern MV* frameworks use CSS modules in some form.
And of course, one other benefit of using CSS modules is the initially more complex methods to successfully scrape the content of the specific web page.
Atlassian use react-css-modules for obfuscate and optimize his template for a simple reason:
Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.
Obviously the obfuscate class is only on production build not on development stage.
modules property tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development.
Text from How to obfuscate CSS class names with React and Webpack.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am doing some research for a large project which will use reactJs and all html elements will be converted to React Components.
As we all know, css has a big problem with globals so there is a lot of posibility of css conflicts.
There are lots of different options for this including:
Atomic Design
SMACSS
OOCSS
or using libraries like:
Radium
React Style
React Inline
jsxstyle
React JSS
React Inline CSS
React Look
React Statics Styles
All of these have something good but at the same time all are under experiment and missing things.
In other words none of them solve all the css problems in react component styling or some just try to solve a problem that isn't there.
After trying all of them I am half way thinking that I should just link to common styles css files and have a css file specific to each component and target that css file from within the component.
Has anyone here had experience in styling react components in large project and have any feedback on it or suggestions?
I simply cannot make up my mind on just using straight css or javascript for this.
Is there anything I've missed to research?
There's nothing wrong on including CSS with your solution, SASS and LESS are awesome.
However, I personally like inline styles a as a plain JS object because it gives you the whole power of JS, so you can be as dynamic as you want, make the calculations all the calcs you need without pre-processing css, etc...
The React team has been investing in this for a while (React Native already uses this by default) here's a to React Native Styles, and a Presentation from a Facebook engineer, and a Proposal from the reactjs/react-future repo, and there are nice libraries like Radium which helps you a lot.
CSS in JS is surely getting better each day, so yeah, I'd advise on making that jump. :)