reactstrap VS antd

After the app creation process completes, navigate into the app directory and install Bootstrap, cookie support for React, React Router, and Reactstrap.

3 months is not a long time to learn web development! I made my first web site in 1995 and I've been doing it ever since. On a bad day I still get flustered with React and CSS. How much of a skilled trade like plumbing or carpentry or welding or being an electrician could your learn in 3 months?

The "ultimate" web developer has a wide range of skills that almost nobody has. For instance, the ultimate web developer knows some systems programming (will need it when things go terribly wrong) but also is a talented artist that can not only draw images but can also make systems of images, colors, fonts and other assets that combine as required, create 2d- and 3d- animations, etc. (Thank God people decided it isn't cool for web sites to play sounds or you might have to be a musician and/or sound engineer too!)

There is a level of skill in graphic design that is less than that where you understand how to pick colors, pick fonts, make harmonious layouts. It's a subject I am still learning: from time to time I have a rather serious "graphics" hobby like printing a series of decorative cards, photography projects, etc. I learned a huge amount when I had to to an accessibility overhaul for the site I work on, not only in terms of accessibility standards but how to think about graphic design. (e.g. when you pick colors, the first thing to think about is how bright or dark they are, any design that makes sense in color makes sense in black and white. I am a fan of Ansel Adam's writings on photography for this reason. In fact I learned a lot about composition when I picked up a book on portrait photography the other day.)

CSS is hard. It has that graphic design knowledge as a background, yet few graphic designers have the discipline of programming that CSS really demands. You can get hung up on the details of selectors, inheritance, padding, borders, margin collapsing, all that. You won't really be in control until you know how to look up anything in the official docs, but those docs are sprawling

https://www.w3.org/TR/css-2022/#module-classification

I count at least 50 documents that are "normative references" right there! (Clearly not something you can master in 3 months)

On top of that there is the complexity of "CSS frameworks" built on top of CSS. All of them have additional concepts to learn but they don't absolve you from having a complete understanding of what lies beneath.

To pause for a sec, note that web devs usually work in teams -- so you don't have to go it alone. A designer might make you comps in Photoshop and it is your job to write HTML and CSS to make it look like that. Hopefully you have a tester, sysadmin, marketing people, etc. If I had my way somebody would plan how CSS is used systematically to help multiple designers and devs do the right thing.

Then, React. I feel completely in control with components I write myself, but the sheer number of third-party components that you might choose or that you might encounter in React code somebody else wrote.

You'd image a widget set like

https://reactstrap.github.io/?path=/story/home-installation-...

or

https://mui.com/material-ui/

would let you largely ignore HTML and CSS and you might really make some apps where the "XML" looks like a desktop application but marketing some day will require you to customize these radically or you will encounter some application that mixes three widget sets and seven other third-party components and you need to understand all of that stuff to be in control.

Sometimes you are more in control, sometimes you aren't. When you're not in control you appear to make rapid progress sometimes but you also get stuck and things that you'd think would be quick take a long time and you know... That's what is.

But... We are not in perfect control and many businesses make many minor and major mistakes in their infrastructure, still make money, still pay coders.

I'd say though that there is something wrong with React. I like how React can draw any application I imagine, particularly with

https://docs.pmnd.rs/react-three-fiber/getting-started/examp...

but it does not have a real plan for how information flows in your application. I like the way props flow downwards, but those components that pass context are a disaster. React provides you with tools you can use to implement your own plan... Or maybe barrel ahead without a plan which won't be bad if you are lucky and your app is small, otherwise things may get worse and worse and things the boss thinks look easy are really very very hard and you'd better get control!

So your 3 mo bootcamp is just the beginning of learning the trade. You can get a job in the industry already but if you do you may find it is SNAFU in many places, it is not unusual for a developer to take several weeks to be able to put together a dev workstation, build and run the system. Ideally you get in with people who model good behavior but even then you will have times you are feeling unproductive because you are not productive because of situations not entirely in your control.

Other than that you can do side, personal, family and friends projects. Find some answers to the above problems that let you make the kind of app that you want to make, try to spend as little time as possible learning frameworks and languages and instead focus on a small toolbox where you can pound out little projects where you feel in control and that will build your confidence and skills until you are ready to swim with the sharks.

Great, we were finally able to make use of the plethora of reactstrap components like Spinner, Button, Layout and a host of others. There are more to it as this is just a tip of the iceberg. I recommend you go through reactstrap official documentation to get a feel of the numerous other UIs that they provide.

Reactstrap has 10.1K stars, 1.2K forks, 231K users, and 239 contributors. According to npmjs.com, it has 374,493 weekly downloads.

I tried with reactstrap, and yes has bootstrap css classes as components (e.g ) but you have to includes all bootstrap styles:

I've followed https://reactstrap.github.io/ and got it working. But bootstrap is now applied to all the site, because I have this

I start developing a React app with reactstrap. I followed the Get Started running the following commands :

I do a lot of enterprise application development in a very small team. It's important for us to create applications that work on any device with a modern web browser that is connected to the Internet and not just a LAN or VPN. The apps must authenticate thru single-sign on that is federated with the company Active Directory. The apps need to rely on commonly available libraries like React and Bootstrap albeit through ReactStrap, and they must be spartan and similar. That is to say that users need to be able log onto all of the various apps the same way, and the apps need to do simply what they need to do with no bells or whistles. Furthermore, one app should look and feel like the others. We don't want to confuse users by making them feel like they need to learn a whole new system for every new application.

I'm new to Material UI and ReactJS. I've been playing around with Create-React-App (CRA) and reactstrap. My question is, can I use Material UI and CRA together to build an app?

Ant Design

Official Website: https://ant.design/

Ant Design (antd) is a React component library for building beautiful and modern user interfaces. It comes with a collection of prebuilt, enterprise-level UI components. To install Ant Design, use the command below:

🔍 Site ⭐ GitHub

(I'm a frontend dev, but I came into the design side only later in my career, after having started as a full-stack programmer.)

I think this book is probably the single best resource I've seen on the topic: https://www.refactoringui.com/

It's a really easy-to-use format (one quick tip on each page, with clear examples).

It's from the people who made Tailwind, a CSS framework that's basically a reimagining of Bootcamp for the Javascript/component era.

Check out some of their templates: https://tailwindui.com/templates

These are lookalike "modern" designs that you can pay to use, or just draw inspiration from. Imitation == flattery and all that.

Along similar lines, check out the free Next.js templates: https://vercel.com/templates/next.js

If you want to build up from components instead, Tailwind offers a component library too: https://tailwindui.com/components

For React, I prefer the astoundingly good MUI framework (amazing components with lots of customizability, a good enough default look, and great documentation): https://mui.com/ If you end up going this route, using their Figma kit (https://mui.com/store/items/figma-react/) plus the Refactoring UI book from above should allow you to whip up a pretty standard-looking, "pretty enough" design in very little time. And then implementing it using the actual MUI lib would just take a few days.

There's also Ant Design: https://ant.design/

And Chakra UI: https://chakra-ui.com/

-----------

For more theoretical stuff (i.e., less visual but still very valuable), the UX research group Nielsen Norman still has a treasure trove of valuable advice: https://www.nngroup.com/articles/top-ten-guidelines-for-home...

You should know the basics of accessibility (beyond general usability, this alos means alt text, header levels, contrast ratios, readability, screen readers, keyboard navigation, special considerations for the hard of sight and hearing, etc.): https://www.w3.org/WAI/standards-guidelines/wcag/ or at least use an easy checklist tool like Microsoft's WCAG analyzer: https://accessibilityinsights.io/

Ant Design is a fantastic toolkit for React developers. It's like having a box of building blocks that are not only stylish but also super functional. With Ant Design, you get a collection of pre-made React components that you can easily put together to create a sleek and modern look for your web projects. Whether you're a beginner or a seasoned developer, Ant Design simplifies the process of making your web applications both visually appealing and user-friendly. It's a go-to choice for those who want a seamless blend of design and functionality in their React applications.

The backend UI is a combination of React + MUI + Ant Design.

Material-UI Ant Design Chakra UI Semantic UI React

ant-design -> Less configurable. Limited but nice components.

GitHub stars: 88k GitHub link: https://github.com/ant-design/ant-design Documentation: https://ant.design/docs/react/getting-started