How to manage layout and alignment in React JS?

Question

I recently began coding in React. It is all good, except that i can not find the proper way to manage layouts and alignment in the UI. I am experienced in the UI5 framework where these things come out of the box, but here i can not find such thing-provider library.

I am also using the UI5-WebComponents for React lib, but there are only things like FlexBox and spacing.

Somehow I have avoided using CSS on a large scale, by relying on pre-defined layout components or controls. Is there something similar which I can use in React?

I will be grateful for any help

It is more a conceptual problem, whether recreating patterns like Master-Detail view is possible. — fmi21
– fmi21, Commented Apr 30, 2020 at 9:20

Michael Nelles · Accepted Answer · 2020-04-30 08:47:28Z

1

This is a common adjustment when starting React. Here is what worked for me.

While in development I put styles in line as follows

<MyReactComponent style={{top:'50%',position:'absolute'}} >
...
</MyReactComponent>

Once I move to production I can take the styles and move them to .css file

.MyReactComponentStyles {
   position: absolute;
   top: 50%;
}

then pass the styles on to the component

<MyReactComponent className="MyReactComponentStyles" >
...
</MyReactComponent>

answered Apr 30, 2020 at 8:47

Michael Nelles

6,0588 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fmi21 Over a year ago

I have avoided using CSS on a larger scale by relying on predefined layouts, css classes. Is CSS a must when developing in React?

Michael Nelles Over a year ago

Depending on the nature of your project. For example I work a lot with material UI and there are some projects that do not require any customisation outside of what the framework provides. So yes you can avoid CSS. That being said all frameworks / libs are highly customisable and I find the use of CSS to be indispensable 90%+ of the time.

Michael Nelles Over a year ago

I just up voted the question you should have enough points to upvote the answer if you want thanks.

Collectives™ on Stack Overflow

How to manage layout and alignment in React JS?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related