I would like to understand the technical difference between them so as to determine the appropriate one to use.
I've realised that they can both have same content and sometimes used interchangeably in some projects.
How does .jsx files differ from .js?
Update for Newer Users
The JSX Compiler tool has been removed as JSXTransformer has been deprecated. The React Team recommends using another tool such as the Babel REPL.
If you wish to keep the JSX source code intact for better maintainability, I would keep them as .jsx files. Using the JSX Compiler, either manually or via build script, will convert your JSX syntax to normal JavaScript files.
Note: It is possible to serve JSX files in your production environment but React will give you console notices about reduced performance.
Personally, I would use something like gulp-jsx or gulp-reactify to convert the files.
Example with gulp-jsx:
var gulp = require('gulp');
var jsx = require('gulp-jsx');
gulp.task('build', function() {
return gulp.src('path/to/*.jsx')
.pipe(jsx())
.pipe(gulp.dest('dist'));
});
Checkout this discussion:
ReactJS - .JS vs .JSX
JSX is neither JS nor HTML, so giving it its extension helps indicate what it is. You can find some more discussions and docs linked there.
Related
I tried to utilize reactAdmin but i have some questions in file hierarchy why .ts , tsx and .js files are there in one use of single screen , May i know the usage of that and how to handle the API's integration within interlinking the data.
And also is there any solutions of handling .tsx functions or components in .js file as im very much familiar with .js than ts or tsx.
React AdminA Web Framework for B2B applicationsmarmelab.com
They typescript files which gonna be eventually compiled to javascript. So you can just use javascript code as reference, there is no need to look at those .ts or/and .tsx file, you should look at them when you want to learn typescript.
It checks variable types at compile time in 'your code'.
If you are new to javascript, first learn it, and not necessary to learn typescript, but you "may may" need it in future.
In React, there is two ways to use the react file. one is JSX and another is js file. my doubt is why react created new extension to develop the react application event though js file format is getting support by it.
You can use js extensions for JSX components if you want. But actually JSX is not JS standard. I think thats why they created a new extension. Being strict, JSX is not JS.
Some eslint rules, like airbnt ruleset, force to you to use .jsx extension for React components, and .js extensions for JS 'plain' code.
Here there is a interesing thread discussing about that:
https://github.com/airbnb/javascript/pull/985
I have a large AngularJS app which I am in the process of upgrading (with NgUpgrade, webpack etc.) To start with, my new Angular (4) components are .ts files but my old AngularJS parts are .js files, transpiled using the Babel loader for webpack.
I would like to migrate all .js files to .ts files so that I can have everything go through the TypeScript compiler and no longer require Babel etc.
For the most part, the app runs fine (with a few small tweaks) by just renaming the files from .js to .ts and adding an import for angular at the top:
import * as angular from 'angular';
However, when I run my app, I now see a warning:
WARNING: Tried to load angular more than once.
This makes sense because Angular would be loaded once by the global script include, and once by the module import.
I can't avoid having the global script include, because I am using other scripts that require the angular global variable to be present.
As such, I think I should be using the global variable, but need to declare it to keep the TypeScript compiler happy (as per NgUpgrade documentation). I have tried changing the top of each file to:
declare var angular: angular.IAngularStatic;
This doesn't work and I get an error like the following:
TS2503: Cannot find namespace 'angular'.
Can anyone please tell me what is going wrong? I have installed #types/angular with npm/yarn and do not have typeRoots or types in my tsconfig.json file. My understanding is that this should automatically find the declarations in node_modules/#types but this doesn't seem to be the case?
I've found a solution which is working nicely (thanks to https://stackoverflow.com/a/42035067/1145963).
Added a .d.ts file at the root of my project:
declare global {
const angular: ng.IAngularStatic;
}
export {};
This allows me to use the angular global from anywhere, without needing any import or declare statements at the top of the files and without needing to do any special Webpack configuration.
I am following the React-router docs, but I have encountered an obstacle that is not really related to the router itself: Babel transpiles the {import} as require, which would be used by Express or Node.js on the server, but from what I understand from the docs, it is actually intended for client-side rendering.
Of course, the JSX file with the router transpiled using Babel and included into a HTML browser page does not work, since require is only used by express/node server-side.
May I ask how is it actually supposed to work in the browser?
Thank you
Babel's transpile of import produces code relying on CommonJS require, you're correct.
You're also correct that node offers a natire require implementation, whereas browsers do not.
There are tools - such as webpack, browserify, and requirejs (among others,) which each do at least two things:
to package up source into a single bundle
to expose that source in a way that satisfies require to match node, allowing you to use the same code at either side.
To that end, what you need to do is to pair babel with one of the packaging tools.
Webpack is more powerful; browserify is easier to use.
Here's a tiny gulpfile where I've automated the process. The relevant source clip is this:
gulp.task('browserify', ['babel'], function() {
var browserifyConfig = {},
bpack = browserify(browserifyConfig, { 'debug' : !production });
return bpack
.require('./dist/pbar.es5.js', { 'expose' : 'pbar' })
.bundle()
.on('error', errorHandler)
.pipe(source('pbar.es5.js'))
.pipe(gulp.dest('./dist'));
});
In order for commonjs like require statement to work in a browser environment. You will need to look into a bundling solution like:
https://webpack.github.io/
http://browserify.org/
A bundler will statically parse your commonjs files and their dependencies to create a bundle which can be used in the browser.
Internet is full of great examples on how they work.
Browserify is easier to get started than Webpack, however I would suggest you learn Webpack over Browserify. Webpack provides you much much more than just loading JS files with its extensive loaders, for example you can do something like:
const imgSrc = require('images/test.svg')
magical right?
I would like to get a more helpful exception that this one:
Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
I am trying to build a Reagent app without the usual minified React JavaScript library. This is where I have got so far with the project.clj file:
(defproject cljsbin "0.1.0-SNAPSHOT"
:dependencies [
[org.clojure/clojure "1.7.0"]
[compojure "1.1.8"]
[hiccup "1.0.5"]
[ring "1.3.0"]
[ring/ring-json "0.3.1"]
[org.clojure/clojurescript "1.7.48"]
[me.raynes/fs "1.4.6"]
[reagent "0.5.1-rc3"]
;[re-com "0.6.1"]
]
:cljsbuild { :builds [ :optimizations :none]}
:main ^:skip-aot core)
So far I have put the important (is it?) :optimizations :none in a few places in the lein project file, but always the minified React library is included.
Later...
Well I'm now quite sure I should be looking at the artifacts. What :optimizations means is covered here: https://github.com/clojure/clojurescript/wiki/Quick-Start: having optmizations gets rid of the 'goog' is undefined error messages.
So I am now using this:
;[reagent "0.5.1-rc3"]
[reagent "0.5.1-rc3" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "0.13.3-0"]
, which is important because it shows (definitively) that the reagent library includes the react library, and that this react library can be modified. Now just to find out how to get the non-minified version and I'll be able to answer my own question...
Are you sure that once you use the add-ons version, your not already getting the mimified version? I ask as the docs on the cljs/package site say
The externs file includes definitions for TestUtils but to use those with :advanced optimizations you'll need to override :file-min to use non-minified version:
which would indicate that perhaps this uses the non-mimified version unless you use :advanced compilation flag? Perhaps check the externs file and see what it has?
The other solution might be to adopt the approach on the reagent page for using your own build of reagent. To do this, I'm assuming you have to provide a bare bones cljs/react file and add the react js directly into your page?