I have been going through a tutorial (https://www.youtube.com/watch?v=GieYIzvdt2U) where you have to use Babel, Webpack, and Redux which are all complicated in their regards. Why we can not use "djangorestframework" as my API and get the information using that API from React using JS. What do I gain using all these packages or I can not simply use what I am suggesting?
React doesn't just use JavaScript, it also uses JSX which cannot be run natively on a client web browser. JSX is a syntax extension of JS and allows for you to simulate templating of HTML.
Babel is a compiler. It compiles React's language (JSX) into valid javascript so that it can run on a web browser.
Webpack is a bundler. It minifies your compiled JS and CSS files and optimises it so that it can run more efficiently on a client's machine. Babel and Webpack are essential to the running of React Apps and even creating a react app using the traditional create-react-app command initialises your development setup to use Babel and Webpack under the hood.
Redux is separate. Redux is a state management tool that is purely used for development purposes (simplifies or complicates it, that's for you to decide!). You don't have to use Redux, you could opt to do your own state management, or use React Context.
In the next part, you communicate with your Django API using a library called Axios. Babel, Webpack, and Redux won't have any impact on that.
Related
I tried to use Mobx to manage state in React Native Project(ADE is Expo).
I have just install Mobx and Mobx-react by npm.
But some article about Mobx I read is mentioning some decorators like legacy and ~~-0.
Now actually my Mobx sample code is working without decorators.
So, I am wondering these decorators are necessary or not in my Project?
In addition to this, if these are necessary, why I should use these.
JS decorators are essentially just syntactic sugar which currently are not part of the JS language but some transpilers such as Babel has integrated them in their latest implementations. Using them is totally your personal preference just like you can create a complete React app without using the JS classes. They make the code more readable. Since you are using Expo, you don't need to add anything to babel configurations to be able to use them. In my understanding Expo does this for you.
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.
Is it necessary to configure React Project without babel which is a transpiler for JavaScript (turning ES6 into code that runs in your browser) ? or with babel as es6 is necessary to use in React projects?
Well, Babel is not really needed but writing React apps without JSX is not something a sane person would do.
Writing React without Babel is not viable honestly.
I was looking at the wiki page of vue.js and saw this:
When compared to React development, Vue can be integrated to an
existing web application much more easily. Normally, a web application
can start using Vue immediately by simply including the Vue.js
JavaScript library. Usage with Webpack or Browserify, are not strictly
necessarily. This is in stark contrast to React development where
Usage with Webpack and Babel is unavoidable, therefore making
converting existing web application much more difficult.
Can someone explain why React needs webpack and babel? I thought you can just drop in the link to the CDN of React and it will work?
No, Babel and Webpack is not necessary for React stack. You can still find other alternatives to build your favourite stack such as Browserify and Gulp.
However, if you want to make things easier, I do recommend you learn and use Babel and Webpack together with React because:
You can use modules.
You can use JSX with ES6.
It support a lot of browsers
You can use more advanced features (async/await) etc
With webpack
You can use different loaders for sass, less, postcss etc
You can use different plugins to optimise your build such as Uglify, HotModuleReplacement, Chunks etc
There are many more advantages to use webpack which you can find here
Can someone explain why React needs webpack and babel? I thought you can just drop in the link to the CDN of React and it will work?
React doesn't "need" babel or webpack but the library is built on the concept of using ES6 javascript syntax and JSX (essentially HTML in JS).
React however can be used without ES6 and JSX which would remove the initial need for Babel but you would lose the potential benefits of ES6 and JSX.
Webpack is separate from React but commonly used in React projects for reasons MattYao mentioned.
In comparison to Vue, JSX to me brings the benefits of containing html, css and JS in one file/component which is what Single File Components in Vue also try to achieve. These would also require a build step using something like webpack as well.
React uses JSX syntax to make writing react more familiar to we the programmers. However, the browsers do not understand JSX. Therefore babel is required to convert your JSX into javascript which is then manipulated by ReactDom and then input into your DOM for the browsers to understand.
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.