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.
Related
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.
In the case of react native web we have a possibility to use files with .web and .android extensions.
Eg.
myFile.web.js
myFile.android.js
then we can include them via
import myFile from './myFile';
and React native web automatically provides proper file content depends on the platform.
It works so far but after I added Typescript the ts compiler started to complain about the missing module 'myFile' and it's logically okay because we don't have this file and TS compiler doesn't know that the RNWeb will automatically pick a proper file later.
When I disabling Typescript, everything works fine so the system is working.
The question is how to solve it in the case of Typescript?
Thanks for any help.
The only way I found how to avoid this issue is using CommonJS module system - require instead of ES6 - import standard
Example: const MyFile = require('./myFile')
In this case, the TS compiler will ignore it. Unfortunately, it isn't a perfect/right solution as I'd like to see but it works so I just use it as is.
P.S. If someone finds another way, please, provide your solution, I'll be appreciated.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I've this code, it's a react typescript project:
import { Trans, translate, InjectedTranslateProps } from 'react-i18next';
and then:
export const Home: React.SFC<InjectedTranslateProps> = props => (
When i click on webstorm on InjectedTranslateProps, it's take me to /node_modules/#types/react-i18next/src/props.d.ts
why is taking me to #types and not to 'react-i18next' package ?
i mean all the links take me to #types and not the right folder for react-i18next in node_modules
so, everything pass by #types, and i's that library to connect it with the real package?
i don't need to see javascript code, just need to see if imports go first to the typescript file, and it's that file that do the work to import.
At runtime, your module loader will resolve the import directly to the real implementation. When the TypeScript language service sees an import, it only cares about the type information and not the implementation, so if the implementation file is a .js file and doesn't have a .ts or .d.ts alongside it, the language service will look for a .d.ts in a #types package. When you click on the import, the language service takes you to the .d.ts. As I understand it, the reasons for this behavior are:
It was easier to implement since the language service is already finding the .d.ts and not the .js.
Assuming you are writing code based on an API (which is more orthodox from a software engineering point of view than looking at the implementation, although I know that in the real world, developers often have questions that won't be answered by the API documentation), then the .d.ts is more likely to describe the API in human-readable format than the .js, which for real-world modules (especially those that have gone through some transpilation process) may be organized using any number of tricky code patterns as long as all the right elements end up defined when it is done loading.
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