Create React App (without ejecting) & ANTD Design & SCSS & Create App Rewired config - reactjs

I need config next pack - React and ANTD Design with using SCSS for customizing theme.
My problem is - i don't know how to config this pack. I'm trying use create-app-rewired (because i don't wanna eject CRA) for webpack configuration but my attempts were failure.
Maybe somebody came across with this task and have turnkey solution.

looks like there is no way to update it without updating web pack config- which requires ejecting

Override create-react-app webpack configs without ejecting.
https://github.com/kktjs/kkt

Related

How to build a react lib generated by Stencil with NX, for publishing to npm?

I have a NX monorepo with Stencil setup. I have my stencil web components, and I generate a React library using Stencil. I can use the library in a React app normally in the same repo.
I want now to be able to build the React library to be able to publish it to NPM to be able to import it in other projects.
I tried using Rollup with #nrwl/web:rollup to build it, but it only generates a bundle without a package.json file, is there a way to use that for publishing ? I also tried using #nrwl/web:webpack, but I can't find the right configuration. What is the right NX executor to use for that ? Webpack and gulp maybe ? How to configure it ?
For the Angualr lib, it was very simple, I just used #nrwl/angular:package. I was expecting something similar in React. Please help if you have encountered this issue, or have an idea.

How can i run reactjs locally on mac other than the npx create-react-app?

I'm just a bit annoyed by having to do npx create-react-app and wait then delete most of the files and code.
I've seen some people use npm i react react-dom, is this another way as well?
can i also use react offline ?
You can add a in your html if you don't want to use create-react-app. Then just create a file with that name. Otherwise I believe other methods still give you a boilerplate.
Even if without create-react-app, can make React applications. But it's bother than with it. create-react-app just automates downloading libraries and many many configurations. So what they do is same.
Create react app creates spa and gives entire folder structure out of the box, but you don't always need to use cra command for that, you can create spa yourself with minimal packages if you know the actual working of spa, you can use react, webpack, webpack dev server, babel.

Is it best practice to escape create react app and create our own template to get React project ready for production?

I am new to React and recently joined a team and my first assignment was to set up a react project without using create-react-app because as team lead told me custom template makes easier to put react into production. Then, the question is how about create-react-app helping us with all of the setup for us and if we want to customize the CRA we can use npm run eject. So, why should we create our own template?
On the contrary, it's pretty hard to setup a React application without a template.
You can check Creating a Toolchain from Scratch at React docs which refers to this guide.
Your own template should configure package manager, bundler and compiler, it's not so trivial. Best suggestion would be extending CRA by cloning the repo or running yarn eject and continue from there.

Install sass direct react js without webpack.config

I tried to install below mentioned details for install sass on react js but not working
https://github.com/webpack-contrib/sass-loader
Thanks,
In the long term, you would want to configure your Webpack and use it to preprocess your saas files. If you can please share your Webpack config and the error message maybe some one can help.
Right now you can use a tool like Koala, which will watch and spit out CSS files. Now you can use this css file in your project without making any changes to the webpack config.
I generally use it for light html/css websites.

Can react-toolbox be rendered from the serverside from a isomorphic/universal app?

http://react-toolbox.com/ Looks really good, but they have a sass dependency. Is there a way to use react-toolbox in a isomorphic/universal app and render them from the server, or are the sass dependencies somehow declared within the components?
They recommend using a CSS loader in the webpack development build. This leads me to the conclusion that the CSS dependencies are within the React Components. Am I wrong?
Yes, it can be rendered on the server side.
A preferred way is to utilize Webpack build with css-loader and sass-loader. Take a look on webpack-isomorphic-tools as an example of the plugin which could help with a server-side rendering of the react apps.
In my current project, we are using a forked version of webpack-starter-kit. Both examples allow you to utilize react-toolbox for a universal app. I am sure you could find at least a dozen of similar setups on GitHub.

Resources