Let’s use Deep Learning to make DeepFakes. React.js has limitations!
Why React.js has disadvantages as a front-end framework? Library that’s all!
Everyone is pretty conversant with java script and should always understand that react is just only a library.
It is always difficult to find complimentary libraries within the react.js framework to make it extremely powerful.
Developers can be from any other programming languages, but when any developer is trying to adapt to react.js, they have a hard time figuring out all the building blocks for building web applications with react.js. With all the hullaballoo about react.js, I would still prefer it over angular.js.
In react.js, you’re dealing with components and you can always do component driven user interfaces.
The next set of complimentary libraries that I would suggest are:
1. Next.js (https://github.com/vercel/next.js)
2. Gatsby.js (https://www.gatsbyjs.com/)
The above two frameworks are built on react — being strong with react will lead you to understand and work on the above two frameworks.
State Management:
With the help of built in hooks: useState, useReader, useContext. It can also mimic ‘redux’ — a popular state management library for react.js.
All this is fine for state management, but for remote data, ‘Apollo Client’.
Coding with react router: When applying the code for react, the most anticipated solution is ‘react router’.
Who doesn’t like styling on their front-end user interfaces?
The first thing that comes to my mind is React CSS Styling
React UI Libraries:
The most popular libraries within react.js — one can choose a library to do the work — Buttons, dropdowns, dialogs, lists.
1. Ant Design (https://ant.design/)
2. Chakra UI (https://chakra-ui.com/)
3. Tailwind UI (https://tailwindui.com/)
4. Semantic UI (https://semantic-ui.com/)
5. Material UI (https://material-ui.com/)
6. React Bootstrap (https://react-bootstrap.github.io/)
Animations in React.js
The most used animations, always start with CSS, but developers would want to do more with their front-end UI.
1. react-motion
- react-spring
- Framer Motion
- Animated (React Native)
But I have had great experience, with React Transition Group.
Chart Libraries:
When it comes to form libraries, it is always “Formik (https://github.com/jaredpalmer/)”
Data Fetching Libraries:
The most recommended, for data fetching to your front-end UI, are the below:
1. the browser’s native fetch API axios
2. Apollo Client (GraphQL API)
3. React Query (Promise, REST, GraphQL)
4. useSWR (Promise, REST, GraphQL)
PAYMENTS IN REACT.JS
Like in any other web application, the most common payment providers are Stripe and PayPal. Both can be neatly integrated into React. This is a working Stripe Checkout with React integration.
§ PayPal
§ Stripe Elements or Stripe Checkout
And for all mobile developers, use react.js and information below:
https://github.com/necolas/react-native-web
So, all in all, that’s a lot of information and react can be deployed in the way you want it to be, with the decision of using libraries. One can grow in complexity, as the usage of the application grows otherwise plain react is fine.
Small Application
1. Boilerplate: create-react-app
2. Styling Libraries: basic CSS and inline style
3. Asynchronous Requests: fetch or axios
4. Code Style: none
5. Type Checking: none
6. State Management: React Hooks
7. Routing: none or React Router
8. Authentication: Firebase
9. Database: Firebase
10. UI Libraries: none
11. Form Libraries: none
12. Testing Libraries: Jest
13. Utility Libraries: JavaScript
14. Internationalizing: react-i18next
15. React Desktop: Electron
Medium Application
1. Boilerplate: Next.js or Gatsby.js
2. Styling Libraries: CSS Modules/Styled Components/Tailwind CSS
3. Asynchronous Requests: fetch or axios
4. Code Style: Prettier, ESLint
5. Type Checking: none or TypeScript
6. State Management: React Hooks and/or Apollo
7. Routing: React Router
8. Authentication: Firebase
9. Database: Firebase
10. UI Libraries: none or UI component library
11. Form Libraries: none or Formik or React Hook Form
12. Testing Libraries: Jest with React Testing Library
13. Utility Libraries: JavaScript
14. Internationalizing: react-i18next
15. React Desktop: Electron
Large Application
1. Boilerplate: Next.js, Gatsby.js, custom setup
2. Styling Libraries: CSS Modules/Styled Components/Tailwind CSS
3. Asynchronous Requests: axios or Apollo Client
4. Code Style: Prettier, ESLint
5. Type Checking: TypeScript
6. State Management: React Hooks and/or Apollo/Redux/MobX
7. Routing: React Router
8. Authentication: Solution with own Node.js Server + Passport.js
9. Database: Solution with own Node.js Server with a SQL/NoSQL DB
10. UI Libraries: UI component library or roll your own UI components
11. Form Libraries: none or Formik or React Hook Form
12. Testing Libraries: Jest with React Testing Library and Cypress
13. Utility Libraries: JavaScript Platform APIs, Lodash
14. Internationalizing: react-i18next
15. React Desktop: Electron
Again, developers working on react.js — it is all about libraries and it is your decision to work on project documentation and use libraries that you think that fits front-end UI well.
