just starting with react. I have a question about #HostListener from angular. Can I use that in React? If yes, what is the correct syntax?
I tried to check my method, please look at the following snippet:
#HostListener('document:fieldInput', ['$event']);
fieldInput() {
console.log(fieldInput); }
Further I get this error message. Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
I am coding in .js instead of .ts
Related
I'm new to ReactJS, but by following the tutorials I was able to build a SchoolFinder app as explained in the link below. Now I'm trying to add a edit feature to it.
Link to tutorial here.
So I've added <AddSchool onEdit={this.updateSchool}/>
and
updateSchool: function(e){
e.preventDefault();
actions.updateSchool(this.props.info);
}
In SchoolList.jsx and in Actions i've written the updateSchool function, but it is not getting called. Am I missing something here?
my team is working on project using Angular 1.5.* + typescript.
Can someone give me advice for best TSLint configuration for such project as mine?
I want now to add TSLint config ( https://github.com/Microsoft/TypeScript/blob/master/tslint.json) from official TS repo and with ESlint rules set. https://github.com/Microsoft/TypeScript/blob/master/tslint.json
Will it be enough? What do you think?
Thank you in advance for your answers.
Will it be enough? What do you think?
Personally I don't switch it on till it becomes a problem. Fortunately I have the luxury of having my team mates respect and love so they know I mean well.
You can pick that one or just go with :
{
"extends": "tslint:recommended"
}
To use palantir defaults: https://github.com/palantir/tslint/#configuration
I'm in a similar situation. I used tslint-microsoft-contrib as a baseline.
"extends": "tslint-microsoft-contrib",
It definitely helps in all the ways you'd expect. However, some rules need to be reconfigured or turned off for AngularJs TypeScript code. I made the following configuration changes to function-name, member-ordering, no-import-side-effect, and no-unsafe-any:
"function-name": [
true,
{
// allow public methods to start with $ for $onChanges
// and other Angular lifecycle hooks
"method-regex": "^[a-z$][\\w\\d]+$",
// otherwise unchanged
"private-method-regex": "^[a-z][\\w\\d]+$",
"protected-method-regex": "^[a-z][\\w\\d]+$",
"static-method-regex": "^[A-Z_\\d]+$",
"function-regex": "^[a-z][\\w\\d]+$"
}
],
// Variant ordering that places public statics before constructor
// So we can place AngularJs $inject just before the constructor
"member-ordering": [
true,
{
"order": [
"public-instance-field",
"protected-instance-field",
"private-instance-field",
"public-static-field",
"protected-static-field",
"private-static-field",
"constructor",
"public-static-method",
"protected-static-method",
"private-static-method",
"public-instance-method",
"protected-instance-method",
"private-instance-method"
]
}
],
// angular.module(...).component(...) is a side-effect
"no-import-side-effect": false,
// ng.IController, among others in #types/angular, uses "any"
// and is flagged by this rule
"no-unsafe-any": false,
Depending on how you define AngularJs components, you may not need to set no-import-side-effect to false. I've not seen any consensus on the best way to define AngularJs components in TypeScript, which is a shame given that this is listed as step 1 for migrating from AngularJs to Angular 2+.
Sadly, this is missing out on the possibility of custom tslint rules for AngularJs to match best practices. I'm toying with the idea of running eslint-plugin-angular on the generated code, or converting those rules to TypeScript. But the better solution may be to migrate to Angular 2+ and use
codelyzer.
I am struck looking for a way to ignore JSX while using esformatter ....
esformatter-jsx-ignore wont work because of es6 imports in my project and making formatJSX = false of esformatter-jsx can't be used either as it just disables the esformatter-jsx plugin.
I've gotten used to using slim and jade and I recently moved to writing applications on the front end with React and find that now I'm writing bloated HTML again inside my components. I'm currently using Ruby on Rails and .jsx files with babel, etc using:
gem 'react-rails', '~> 1.4.0'
gem 'react-router-rails', '~>0.13.3.2'
But I'm also using React with node and express using the react-starterify boilerplate and it's the same story with Node.
Is there anything that can allow me to start writing my html in React using a syntax like slim or Jade?
One thing to keep in mind is that JSX isn't HTML—it just looks like it. This is important because the JSX transpiler (usually Babel these days) takes the JSX syntax and modifies it from this:
<div className="container">
<p>Testing!</p>
</div>
to something like this:
React.createElement("div", { className: "container" },
React.createElement("p", null, "Testing!")
)
By abstracting over React.createElement calls, you can end up with a project like r-dom, which does the same thing but with a nicer syntax:
r.div({className: 'container'}, [
r.p('Testing!'),
])
or react-hyperscript, which allows an alternative syntax for some properties:
h('div.container', [
h('p', 'Testing!')
])
However, since JSX turns into plain JS calls, any language or syntax that can be converted into React.createElement calls will work great with React, as long as you set up your Rails asset pipeline so that it correctly does the transpilation as part of serving assets.
There is a project that does this with Jade's syntax called react-jade; there are a few differences from regular Jade and some unsupported features, but it may do what you want it to do. In a Rails project, you'd need to find or create a preprocessor that turns the appropriate Jade code into React-specific JS.
There's one other thing I wanted to mention based on a comment in your question:
now I'm writing bloated HTML again inside my components
If you're just talking about HTML's syntax then no problem, but if you're finding that the render methods of your React components are getting large and hard to manage, then it's probably a good sign that you need to break your component into smaller components (see "Tip 4: Embrace composition!" at this link).
I am using the yo react-boilerplate scaffold for a simple react project where I hope to test out the magic-move component.
When I run gulp dev I am getting the following error message:
Error: Parsing file /Users/Andrew/work/magicmove/node_modules/react-magic-move/modules/components/MagicMove.js: Unexpected token (22:6)
at Deps.parseDeps (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/module-deps/index.js:439:28)
at fromSource (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/module-deps/index.js:378:44)
at /Users/Andrew/work/magicmove/node_modules/browserify/node_modules/module-deps/index.js:372:17
at ConcatStream.<anonymous> (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/concat-stream/index.js:36:43)
at ConcatStream.emit (events.js:129:20)
at finishMaybe (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
at endWritable (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
at ConcatStream.Writable.end (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
at DuplexWrapper.onend (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
at DuplexWrapper.g (events.js:199:16)
I am using a simple require statement like:
var MagicMove = require('react-magic-move');
Any thoughts on where the error is coming from? I'm thinking perhaps it could be a jsx related issue? Do I need something like jsx loader?
Here is the scaffold I am using so that you can look at the gulpfile.. maybe there is something I need to alter here?
https://github.com/mitchbox/generator-react-boilerplate
Thanks.
MagicMove.js has a parsing error on line 22.
MagicMove.js: Unexpected token (22:6)
I would start there.
Probably a jsx error, but it's hard to tell without seeing the code.
Looks like MagicMove.js is written in ES6 so you need something like babel.
Babelify (in case you are using browserify) may help to compile the code.