React Redux project architecture - reactjs

I am new for React -Redux.
For creating a project Is there any command available so that It's create default folder and file?
For Example:-
In Angular we can create project through Angular-Cli.
So, In React -Redux is there available something like that?

If you use create-react-app command this create form a structure like so:
Source

As React is a only a view library the official create-react-app cli doesn't provide redux with it.
But there are alternatives like:
https://www.reactboilerplate.com
Also: you could get a boilerplate project integrated with backend of your choice. Like:
https://github.com/geowarin/boot-react for Java Spring
dotnet new react-redux for .Net Core

Redux does not enforce any folder or file structure.
But there are some patterns and designs you can follow in React app.
Check the docs.

Related

How should I make my Lit elements consumable to other projects?

I'm trying to use Lit.dev to create reusable web components across my organization, and I'm trying to import one of those components into a new React project using create-react-app
I started by creating a local Storybook project to make sure my components rendered correctly, which they do (see screenshot)
I pushed library of test components to my GitHub account, then I installed to a boilerplate create-react-app project using npm i https://github.com/my-user/my-design-system/, which added my library of components to /node_modules, which I can import into a React app using
import `my-design-system/MyCustomComponent`
For simple components, this is straightforward, and I can successfully render my Lit-created web component in my React project, but for components that use things such as #decorators or importing Sass styles, I get errors. For example:
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
etc...
I feel like I could solve this problem by configuring my React project to use the appropriate loaders and TypeScript configs, etc., but I feel like this is defeating the purpose of creating an external web component library to be framework agnostic. I feel like I am most likely missing a step that converts or builds my Lit project into a JavaScript bundle that other projects can use without much fuss (right now, in my React project, I'm just importing my web component straight from the source file in node_modules/my-design-system/MyCustomComponent
I'm completely new to creating my own packages, so I feel like I lack the vocabulary to accurately describe what I'm trying to accomplish. Can anyone point me in the right direction?

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.

How to export React Native components created in storybook for it to be used in actual app?

I understand we can create and test React Native Components in isolation in Storybook. But how do we export/publish the components to integrate in our app?
In React -
I used react-docgen that will allow me to create and document components as a standalone project
Then I will build and publish my doc app as a package to npm registry and npm install as dependency in my app to import those components
How do we do same in Storybook with React Native? Should I -
copy files/code of tested components in my actual app?
export everything just in stories folder and build and publish as package and install as dependency in my app?
Install storybook in my actual app? But I guess that's not an option as storybook is supposed to be run as standalone app in itself
May be I am missing something obvious as no tutorial/article/doc talk about how to consume the created Components in final apps? Can someone please shed some light? Thank you.
Ok, someone finally said this in a tutorial-
Once you find the component and the state that you want, you can see the source code you need to place in your application to get the exact same functionality
So, after all it will act simply like a UI library documentation from where you need to copy code from example and cannot add stories as dependency to your project.

React JS into Eclipse IDE

I'm new to React JS and trying to use in my front end design. Using Eclipse IDE,I would like to integrate React JS into my existing web application. Is it enough to add Jars associated with React into WEB-INF/lib and proceed?
Your help and time is much appreciated.
Thanks
Another approach could be using something lightweight like VSCODE with create-react-app. Once you build the project you'll load it into your existing project as a singular widget.

Can i use more than one reactjs version in one website?

I am doing plugin using Reactjs. This plugin is easy to pluggable with any site. For plugin build, I am using "webpack" and follow commonjs/es6 module system. Suppose end user may be used react in their website, Is it affect my plugin? (ex: like two jquery we are using in website then we use jquery.noconflict())?
Note: I didn't export react outside. Is React maintain any information in global?
Short answer is no.
Most 3rd party React components require that the application consuming them provide a compatible version of React.
This is why you see React as a peerDependency in the package.json of these libraries.

Resources