For the challenge and to help me to learn Stenciljs, I want to convert some React components that a team did to Stencil ones.
I don't know React and a little bit of Stenciljs, but I know Angular. I know Stenciljs is a mix of good things from different "frameworks", so probably I will be able to understand a bit. :-)
Any advice about the component porting?
Is it feasible?
Anyone already did that kind of thing? If so, any examples or steps that could be useful would be nice.
Thanks
We're going to do the same in the next weeks and it looks like it's going to be pretty easy.
We've used react together with Typescript so we already have interfaces for props and state which just have to be rewritten using decorators #Prop() and #State().
Because in stencil you also have a render() function, similar to react class components, you can just copy the code of your react render() function (or if you've got a functional react component which basically just consists of a render() function, just copy everything).
One thing to note is that {children} in react is much more powerful than <slot /> in stencil. So if you've got bigger components with a lot of parent/child relations, translating won't be that easy as you can't do stuff like slot.map(item => <SomethingElse prop="stuff" />) as far as I can see.
Related
noticed that most ReactNative projects uses :
const Thing = () => {...
or
export default function Thing() {...
instead of using actual components like :
class Thing extends Component {
is extending Component more for ReactJS ? Cause I need this for lifecycle hooks like
componentDidMount() {...
is it possible to have those hooks in native (translated in ObjectiveC and Java) or is it purely JS ? My question is : how much I can keep from ReactJS in ReactNative ?
Thanks a lot, S.
React native works in a similar way to normal react.
There is the class based component approach and there is the function based approach in both cases.
You can use the class based approach if you need to but since React 16 sometime in 2018 the function based approach with hooks may be the better way to go. Both systems work so you can try whichever way is comfortable with you.
So to answer your question you can keep most of it but you would have to use items from react native like <View> instead of <div> and <TextInput> instead of <input>
To handle componentDidMount/componentDidUpdate you can using hooks you can use useEffect or useLayoutEffect in the functional case which in my opinion are better approaches but may take a while to get used to
Hello I'm trying to rewrite the swipeable cards example without hook (using render props), however I stuck in how to communicate Gesture with Spring. appreciate any help.
This is the official example with Hooks: https://codesandbox.io/embed/j0y0vpz59
This is my code trying to replicate the example with render props https://codesandbox.io/s/4j45p88qkw
what I'm unclear is the bind function, once I computed the new x rot scale, how to I pass it to the card?
This example came from this discussion: https://spectrum.chat/react-spring/general/how-to-flick-something-off-the-screen-using-react-spring~37848d54-55ba-4a74-9a98-9aa42041177d Someone converted the hooks example, here's the thing running in codesandbox: https://codesandbox.io/s/jnoqzplmj9
I would recommend hooks, though. There is nothing like it, renderprops start to have severe limits since they're mantling the view, while hooks are basically utility functions that bear no relation to any view, which makes it easier to combine them with things like gestures and so on.
I'm using Redux, Immutable.JS, and React. I want to pass an Immutable.JS list into my stateless React component. This component maps through the list and renders a child per item in the list.
Example:
function Cats(props) {
function Cat(p) {
return <li key={p.id}>p.name</li>;
}
return <ul>{props.cats.map(Cat)</ul>;
}
The {p.id} part breaks, because props.cats is an Immutable.JS list of maps, so I'd have to update my React component to say {p.get('id')} instead.
I'd be okay to do this, but are there better ways for a stateless React component to consume a list without having to know that it's an Immutable.JS list? This usage violates the best practice in the Redux + Immutable.JS + React best practice, "Use Immutable.JS everywhere except your dumb components". 1
I'm certain other people have dealt with this problem and I don't want to reinvent the wheel.
Can relate with your pain, I have documented this here - What are disadvantages to using immutable state in React?.
For Redux
You can use mapStateToProps to convert immutables into normal JS (state.toJSON()). So the dumb (don't like that term) components should be abstracted from the actual structure of your state.
Otherwise
This is an issue anywhere you want abstraction between your state library and your views. One way I have been able to isolate this to some extent is to use (lenses)[https://medium.com/#drboolean/lenses-with-immutable-js-9bda85674780]. If they seem too complicated, you can make a get([key path], source) method and send that in props to your components and use it to fetch the value. This at least provides some abstraction.
You are not wrong.
If using ImmutableJs what you should do is p.get('id') the other way would be something like props.cats.map(elem => <Cat id={elem.get('id')} key={elem.get('id')}/>)
or IMHOP less elegant props.cats.map(elem=>elem.toJs()).map(Cat) but its just different ways of doing the same thing.
Hope it helps
I'm using React and Redux and it's my first project in React overall. As of now I have a bunch of Components that all "get" and "set" the global data through Redux. So basically every component has this :
this.props.actions.UseInfo(this.props.commonData);
function mapStateToProps(state) {
return {
commonData: state.something.commonData
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(someActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName)
Now I noticed in React without Redux.. you have to structure your app to pass your data through parameters like
<SomeComponent someParam={this.commonData} />
<SomeComponent someParam={this.commonData} />
Is there any reason I should take the time to restructure my app to pass more information through parameters and use the Redux actions/reducers less unless if needed?
It seems like structuring to combine the best of both worlds .. maybe having the main components connect to the store and then pass that information down to it's sub components is probably the most ideal, but is there any reason why i "should" be doing that over just connecting everything through the store?
At the end of the day I feel like it's accomplishing the same thing.
Thanks for any input
Have a look at this article by Dan Abramov, the creator of Redux.
It says, basically, that container components get data via connect, and presentational components get data via props.
There are a couple of advantages to splitting out presentational or "dumb" components that simply react to their props. Namely, reusability and centralization (you know where to look for things, dumb components rarely require much maintenance).
In the real world it's never black and white, of course. Do the best you can but don't obsess over it, just do what makes sense for your app. Without knowing more about the hierarchy of your project, it's hard to know if you have a problem or maybe just a simple app and it doesn't make much difference. In general I would say watch out for nested "smart" components.
I have a component which contains a textarea. Whenever I enter text I run a set of validations against the text and depending upon results I update the UI. You can assume the code to be like this:
onTextChange(e) {
const results = this.runValidations(e.target.value)
}
Now, the problem is this.runValidations is like 100 lines of code sitting right there in the component but doesn't affect the UI directly and is specific only to the component and its child components. But, it makes my component file bloated.
So, is there any convention that other people follow in their React-Redux apps to handle such logical code that is specific to the component but is not part of the UI logic? Where do they place such code?
At the end of the day, most business logic doesn't have a lot to do with React/Redux - so they can usually be shovelled out into their own utility functions or classes. Which is great for a few reasons
a) easier to test because it hasn't zero linkage to React/Redux and
b) keeps your actions light, and
c) more encapsulated - having minimal knowledge of react/redux is not a bad thing.
It's all just Javascript - there is nothing wrong with importing custom business classes or utility functions.
Edit
My folder structure will typically look like:
my-component
child-components
Child1.js
_Child1.scss
Child2.js
_Child2.scss
helpers
util1.js // with a single default export
util2.js // with a single default export
_MyComponent.scss
MyComponent.js
MyComponent.spec
Where child components are (or should) only be pulled into this component. Ie. they shouldn't be used by other components.
This hashnode article also has a great structure if you are using redux as well: hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale-civrlqhuy0keqc6539boivk2f
It seems that you are missing the concept of components vs containers (or dumb components vs smart components, as some like to name it). Basically, it is a good practice to apart your business logic from you pure presentational components.
Have a look at Presentational and Container Components, by Dan Abramov.