I want to move my existed web app to mobile platforms. How should I transfer my existed css file to React Native css?
Is there any way to do this directly in the app logic, or I should use builders like webpack, if it so, which plugin do I need to use? Or maybe there is some packages for IDEs like Webstorm or Atom?
Any tip will be helpful, just not to do this manually.
There is nothing built into React Native to turn CSS into RN StyleSheets. React Native has a different set of attributes that is supports and some of them behave slightly different from their counterparts in CSS. That said I have a few suggestions for paths forward:
Rewrite your css as StyleSheets as Sintylapse suggested covered here
Use a third party transpiler like this one to convert yous css to React Native StyleSheets.
Write all your styles inline with no stylesheets.
I would recommend the first option if you intend to work on this app or React Native in general for a while. Though it may be a bit rough to learn the syntax and how to write your styles, in the long run you will become more proficient than you would with the other methods. If you are looking for a good place to start with stylesheets this blog post looks promising. The transpiler could work but since it is a third party project I wouldn't be surprised if you ran into a bug and had to comb through generated code to find what is wrong. Writing styles inline can help prototype but it will not make it easy to maintain your app in the long run.
Related
This may sound like a strange question, but I come from an emacs,xterm background and I am used to work a few files and have total control of what I am doing.
Now, I am going to learn react and vue, but when I examine the number of files that are generated for a project with:
npx create-react-app
vue create app
then it adds upp to 36000 for react and 19000 for vue. That is something that annoys me. Is there any way to create a project in both framework that has significally less files?
What you are referring to is scaffolding. You do not require scaffolding to use vue.
You are also using build components to minify JS code and include all types of things such as fall backs.
If you want to learn it from scratch you can start with the CDN version then move onto learning to use the templating engines and so on.
If you really want to start to learn things from scratch.
Use CDN Versions
Learn Rollup.js
Learn Vue
I was writing an application with MaterialUI components and have a lot of things so far. Then I found this great landing page/welcome page Landy that uses Antd, still, it would be the easiest for me to just use it.
Is there any problem with using two different design tools in one project? Does it make the website heavy? Can I optimize it somehow or should I migrate slowly to one of them?
don't worry about that, likely you have webpack , rollup, or any other tool that will execute a tree shaking for you so it will only import the used part and not the whole lib
Yeah it is ok to use as many libraries you want, but using too many libraries will make your code heavier, so it is recommended to use only 1 UI library
Yes, It is ok to use multiple frameworks in a single app. You can use antd or material-ui components with their import statement. Nothing to conflict each others.
I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
I've been developing web app using react or angular but I'm confused why people would use library like react-bootstrap (https://react-bootstrap.github.io/introduction.html) or Angular-bootstrap? Because when I create I just have to load the css framework using link tag with its corresponding js lib, then in reactjs side, I just have to put the classes needed for a component. Isn't that sounds easier?
Thanks,
It has to do with the Javascript portion of Bootstrap. The CSS will work just fine with a link tag.
But React and Angular are Javascript libraries which have a lot under the hood for manipulating the DOM. If you also use something like Bootstrap or jQuery to manipulate the DOM, it probably won't play well with React or Angular since they're trying to do similar things in very different ways maybe at the same time. So DOM-related Javascript libraries need to be rewritten so they play nicely with React/Angular.
From the react-bootstrap docs:
we don't ship with any included css
All they deal with is the JS.
When you chose to work with reactjs you chose a library that updates your DOM in a cleaver and sophisticate way.
It has the virtual DOM and bunch of algorithms (like the Diffing algorithm) to determine when and how to update the DOM in the most fast and efficient and performant way.
When you combine this with another library that updates the DOM, you basically interrupt those algorithms to do their job.
Beside performance aspects, you are working against the pattern of react, you break the "component pattern".
React-Bootstrap is here to help you maintain your component pattern with their components. you just need to include the css and other resource files.
Their components doesn't do anything beside rendering HTML with proper class names that correspond to the classes that in the bootstrap's css files.
They do that in the same way all your other components do it, via props.
This way you can have a bootstrap components that play nice with your other components in a native way without breaking the pattern.
Yeah, it's easier to dump some css and js files and things just works, but it's harder to maintain, debug and scale.
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.