I am new on ReactJS and learning from scratch. I see some using babel and some are webpack to configure as well some use yarn package manager. So can you suggest me which is better to work with react.
I just curious about configuring reactJS environment thorugh which bundle or package manager?
babel is a transpiler, webpack is a bundler and yarn (or npm) is a package manager. These tools are for different purposes. And usually we use all of them together.
React has a very handy tool called Create React App. With this tool you don't need to configure babel and webpack by yourself so you can start to learn React easily.
You can start working with react using create react app(along with official react documentation) which will provide you app structure with no build configuration. So there is no need to worry about babel, webpack. you will get all configured with proper documentation. It's up to you to use yarn or npm as package manager.
This is best place to start up with ReactJS
In older versions you need to setup react with babel and webpack but now on current latest version you can directly start with Create React App
ReactJS Installation and startup guide
Just follows steps on this page, then run HelloWorld example which is best programs to start with any new programming language.
Related
Are they all the same thing? Can a node program use react package, vice versa?
JavaScript (JS) is a programing language
There are many libraries and packages build for JS; one of these is React.
Further packages can be built using as dependencies a base package, for example, "react packages" are libraries built to extend functionalities from the react packages.
NodeJs is a platform or often refereed as a "runtime" for server-side applications. It uses the JS language in its syntax
"node packages" are JS libraries built to be run by NodeJs.
I want to include the client library of the Dash cryptocurrency into a React Native application. The problem is that via npm install it builds for NodeJS, where it assumes the core modules that are simply not there in React Native. I have been told by the developers themselves that it can be built via a web build. It's isomorphic. How can this be achieved practically?
All my VueJS projects use at the beginning the same baseline :
Vuex
Vue Router
Immutable.js
MathJS
MomentJs
ChartJS
Plus, all my projects have quite the same "index.js" file.
Is there a way to have a command line (preferably based on Vue CLI) that can generate a project with a pre-coded "index.js" file and a package.json with those above dependencies ?
It sounds like you are wanting to use the Vue CLI to create a project. However, you additionally want some default npm packages to be installed and imported into your index.js file.
Answer: no. this functionality does not exist (currently)
Some Suggestions:
Open a feature request here. If you did do a feature request, you should descibe it in a more general way. For example 'allow the ability to specify npm packages on project creation' opposed to specifically installing ChartJS, Moment and the other ones. That's too specific, that will get shot down and closed in a heart beat.
Create a repo with the project structure and packages you want and always start from that repo (opposed to using vue cli)
Write your own custom node cli to interface with vue cli that handels your extra steps for you. You could easily write a node (console program) that executes the steps you want. Basically, create the vue project, npm install what you need, generate an index.js with your package imports.
I think the easiest route is to just create an empty vue project how you want it. Save that repo as 'vue-boilerplate' or something and just always start off with that empty project opposed to doing vue create every time.
In my personal opinion, I think going through all this to npm install 3 packages and add the imports to a js file isn't entirely worth it unless you find yourself creating a massive amount of projects that will all require the exact same setup.
Angular has a similar idea called schematics but I do not see an equivilant within Vue as of yet.
We are building an NPM package called Chat for a company project. It is based on a Redux reducer and Firebase.
For both web and RN the use is:
<Chat
userName={user.userName}
password={user.password}
avatarUrl={user.avatarUrl}
defaultAvatar={defaultAvatar}
defaultGroupAvatar={defaultGroupAvatar}
name={user.name}
/>
However there are differences between web and mobile:
Dependencies: RN requires react-native and other RN packages, while web requires react-textarea-autosize and other web packages. Needless to say, installing React Native's packages for web is quite an overhead.
Compilation: RN can work with ES6 but web requires babel to transpile to JS.
We thought of two different ways to go about it:
Creating a base package with the common code: reducers and utils, and then create two additional packages for web and mobile components.
Placing the dependencies from package.json in peerDependencies.
Both ways have their downsides. The first one creates a clutter of packages and the second one means the package.json is not descriptive. Any better way to go with it? What is the proper way to build cross-platform React NPM packages?
I am writing desktop app with Electron from Github, and I am using React with it. One thing I notice is that because Electron uses io.js, I no longer need webpack to build my code like when I dev for client-side web app. However, I still need something that can load JSX. I am using Babel request hook, but it seems a little slow. I don't really need the ES6 features in Babel since they are supported in io.js.
Is there another way I can use JSX with Electron?
Thanks
Webpack is actually designed with Electron development in mind. What I need to do is to to specify in the webpack.config.js file is config target: 'atom'. Webpack will know that it is packaging an Atom (now known as Electron) app, and will not attempt to bundle packages such as fs, or any modules in node_modules. With webpack, I can configure babel to my heart desire, and I also get minification.
Update
As #eduludi has mentioned, the value for target is now electron.