Could you just use Webpack and Babel to transpile the code into the /public directory? Is the asset pipeline necessary to do the integration and still have support for tools like React and Redux dev tools in Chrome?
Could you just use Webpack and Babel to transpile the code into the /public directory? Yes- you can.
Is the asset pipeline necessary to do the integration and still have support for tools like React and Redux dev tools in Chrome? YES
ReactJs is just your view layer. It doesn't matter which backend tools or framework your using. Like in MVC- your ReactJS is the "V" view.
Related
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.
I have started to learn React and now I am a bit confused about different parts of development and deployment.
Does all webpages are bild with frameworks like React or Anguler? Or they are used only for one page web applications? Can I serve React with nodejs server?
Does the method when you build static webpage with js, html, css and serving them with Apache web server is still used in modern world?
I would highly suggest using the React-Create-App utility. And yes, you can use Node.js. In fact, React doesn't force you to use any backend framework. I could pick ASP.NET MVC, Node, Spring MVC, Rails, etc.
https://github.com/facebook/create-react-app
But this tutorial will guide you through creating react apps in development and creating production builds.
When you build in production, you'll end up with a public folder with html files. But in React, you don't create html files, you create .jsx, which is a combination of html-like React tags with JavaScript. They will get transpiled to html, etc during the production build phase. You can then take the build folder and deploy it on an HTTP server, such as Apache.
I’d like to use HMR with my React Electron app. How would I do that? Do I need web pack? How do I integrate it with Electron?
You use a webpack config just like you would with a normal web app.
The settings depend on wether you are using react-hot-loader 2 or 3 (beta)
You then set the src attribute in your index.html file to wherever your webpack dev server is serving the bundle from.
Usually: localhost:8080/bundlename.js
Here is the walkthrough for react-hot-loader 2:
http://gaearon.github.io/react-hot-loader/getstarted/
i'm working on React Project Javascript universal (Express.js as server)
in the production build, i'm using webpack and babel as a bundling and transpiler.
Everything work fine,
However, i'm thinking that, those bundles are actually just static javascript, styles and html.
Can we upload it to Amazon S3 and link it with Cloudfront and make these files available over CDN?
I try googling searching for webpack and CDN but didn't find any useful information.
Or did i misunderstand something? Will it work like what i think? And can we automate this using just webpack cli ?
Please advise,
Webpack is mostly concerned about the building (and bundling) of your assets. What you do with them/where you host them is up to you, and you might want to look into some kind of CI process/tool to manage automated deployments for you, once the bundles are built. Webpack doesn't (afaik) handle deployment.
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.