I am trying to figure out how Babel gets used.
In one of my current projects, I see that I have a Babel file, but I never set up any configuration as far as I can tell that deals with Babel. So I want to know if it is actually being used or if I just have it installed.
When I deploy my React app to somewhere like AWS Amplify or Heroku, is Babel automatically being used and this is how my browser can understand React? Or would my browser understand React even without Babel?
You can not be sure that all versions of all browsers understand modern JavaScript. That is why, even if you write modern JS in your code, Babel will automatically turn it to plain vanilla JS so that it is compatible with almost every browsers.
This links I attached below, are of highlighted texts. Please give it a read as I believe it will clear up your confusions somewhat.
https://www.freecodecamp.org/news/jsx-in-react-introduction/#:~:text=But%20the%20browser,JavaScript%20compiler/transpiler.
https://create-react-app.dev/docs/getting-started/#:~:text=You%20don%E2%80%99t%20need,good%20to%20go.
Related
So similar questions have been asked, but I have additional questions that I'm needing answered. It's also quite possible I'm overthinking all of this.
To create a react project offline, I should be able to get the minified react library from a CDN. But without internet access, I need to save out that javascript to a different file, right? Then I can transfer that to my offline machine.
From there, how does running the project work? Can I use command line tools for react? Do I lose the react debugging capabilities? Or am I just writing React code and then loading the index.html into the browser?
How does node_modules work? I know the amount of modules react installs when using create-react-app is a lot. Is all of that self-contained in the CDN?
Do I need to get Babel for transpiling? or is that also included in the CDN?
Thanks in advance.
EDIT:
It seems that using node_modules is going to be out of the question for my use case. So I'll need to use the CDN scripts. What do I lose when using React this way? I'm assuming I can't run from the command-line, so I'm only able to load the index.html into the browser. Same question as before though, do I need Babel for transpiling? What other capabilities that I'm used to having with React to I lose when only using the CDN script?
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.
I'm building my first semi-major MERN app with Redux, without a tutorial. It's really challenging, but a ton of fun.
The project I am building is, essentially, a simple re-engineering of Zillow's API (they have a few, I'm after the more basic of the property search results).
I am using the zillow npm module and want to add what appears to be a pretty popular autocomplete Search plug-in.
My big challenge this week has been diving into the build tools. I read thru the webpack docs over the last couple days, then felt solid enough to try building out my Search functionality, which will return results and a map eventually.
It should be noted, I'm using a scaffolding tool developed by a guy who publishes a lot of good React tutorials (from which I basically learned ReactJS -- it's called turbo360). Right now, I am using webpack 4. I just did a fresh git commit: https://github.com/ScorpIan555/real-estate-app/blob/master/webpack.config.js
I have, so far, read a bit of the Babel docs. I piped in .js extentions to the .jsx test for the babel-loader, thinking perhaps that would get it?
What I'm a bit confused by is that it seems to be tripping over a file written in ES5 (from the geocoder npm module I am trying to use). So, I'm wondering if I should be configuring my babel-loader to not try to transpile ES5 modules or what.
This is the module I am trying to utilize, it looks fairly popular and has a recent commit. I also looked at its webpack.config.js file and tried to apply that to mine...
https://github.com/abec/react-autosuggest-geocoder/blob/master/webpack.config.js
I am closing this as I received assistance on a Slack channel. This plugin uses experimental code which I do not wish to use on my app. I will use another plug-in. I was looking for help with my webpack.config and am reliably told it is fine. Thanks to all who viewed this question!
I have a project written in typeScript using the react and redux framework. I am aware of webpack and how it uses certain middleware libraries to enable hot reloading.
Here begins my question. My code (written in typescript) essentially is first converted into jsx using certain gulp tasks. Later this code is bundled using webpack's functionality.(Let's combine these 2 steps and call it compilation for convenience) If I am to use webpack HotReloadMiddleware, will it also need my entire code to be "re-compiled". If that is the case then it doesn't do something radically different as compared to compiling the code manually and running it again.
So to boil it down my problem is that I have to recompile the entire code inorder to get an updated bundle file.
Is there any library out there that solves this problem ?
Hi check this template
JavaScriptServices There is project base on Typescript, webpack and Hot module replacement. Its good start point that worked for me.
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.