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
Related
Today in React it is much more common to use functional components with React hooks rather then class components. I am wondering, though, whether or not it is better to use a normal function or error function when creating a react component in a functional component.
For example, this:
// normal function
function MyComponent(props) {
...
}
or this:
// arror function
const MyComponent = (props) => {
...
}
There are discussions of this question before as relate to class components, but I was not able to find any information with regards to functional components.
I am wondering, therefore, what are the advantages and disadvantages of each approach. Please note, I'm not looking for personal preference, but rather factual differences and/or benefits of one approach over the other.
Any thoughts?
I am wondering, if classes are just syntax sugar for prototypes, and es6 enhances functional coding, can we write reactJS code purely functionally(and without missing out on lifecycle methods)?
[edit]
Think of the most complex react app, can that be written purely functionally - and would it make sense to do that?
EDIT 2019 May:
React Hooks is here: https://reactjs.org/docs/hooks-reference.html
ES6 classes are syntactic sugar for functions and (with some exceptions) it's possible to rewrite them as functions, this is what transpilers like Babel and TypeScript do.
Since component class inherits from React.Component, it needs to prototypically inherit from it. React.Component doesn't have static properties, so a component doesn't need to inherit them.
This component
class App extends React.Component {
state = { name: 'foo' };
componentDidMount() {
this.setState({ name: 'bar'});
}
render() {
return <p>{this.state.name}</p>;
}
}
becomes
function App(props) {
React.Component.call(this, props);
this.state = { name: 'foo' };
}
App.prototype = Object.create(React.Component.prototype);
App.prototype.constructor = App;
App.prototype.componentDidMount = function () {
this.setState({ name: 'bar'});
};
App.prototype.render = function () {
return React.createElement('p', null, this.state.name);
};
This is what now-deprecated React.createClass originally did, create-react-class helper serves this purpose.
if classes are just syntax sugar for prototypes, and es6 enhances functional coding, can we write reactJS code purely functionally(and without missing out on lifecycle methods)?
We can, but functional component isn't the same thing as a component written with desugared JavaScript class. Functional component is specific React term that refers to stateless functional component. Stateless components don't have a state and lifecycle hooks. It's impossible, or at least impractical, to write real React application with stateless components alone.
Think of the most complex react app, can that be written purely functionally - and would it make sense to do that?
Deliberate avoidance of ES6 class syntax doesn't make sense in general because the lack of syntactic sugar results in verbose and unexpressive code without any benefits. A regular React application still needs to use build step and Babel to transpile JSX syntax because desugared JSX is a hierarchy of verbose React.createElement calls. It is practical only if few React components are used in non-React ES5 application that doesn't need build step to be introduced.
However, this may be possible with third-party libraries, e.g. recompose. It's intended to be used with functional components, e.g. lifecycle helper allows to attach lifecycle hooks to them. Of course, it uses component class internally to do that.
you can use stateless component
This article explain
https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
example: for stateless component
import React from ‘react’;
const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
export default HelloWorld;
NOTE :
my example lacks lifecycle methods implemented by #estus,so if you don't need those lifecycle methods than you can use below code
Yes you can
import React from ‘react’;
function MyComponent(){
return <div>Hello</div>
}
export default MyComponent;
Live Example
No this is not a way of doing stuff. React gives us two types of components. We use them for a particular purpose.Not everything could be written in stateless components (functions). Stateless components are usually presentation components which only render jsx and have no local state. We can't write methods in stateless components and here comes the Stateful components (class based) where we manage our own state and write methods into it. Further it gives us more control to render our child components. So everything in react follows a pattern and it allows to utilize the power of one way binding.
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
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.
Coming with php background not sure how to implement a design with reusable code,
the problem:
we are creating a react/redux app with a lot of similar components that share a lot of functionality... I've read about HOC but was wondering if there are another solutions that would help in this situation!?
Component inheritance.
You can extend one component from some ComponentBase to share some functionality between them. But actually its different way from creating HOC. Hoc just allows you to pass some props to child, inheritance give you an ability to share methods and state.
There is something called function as child components (not sure if that's an official name but anyways)
The basic idea is that react accepts functions as child components, so for example instead of the react redux's connect HOC component you could do something like this
<Connect mapStateToProps={myMapper}>
{({ users, isLoading })} => {
//renders the user
}}
and the connect implementation is quite simple compared to a HOC.
render() {
return this.props.children(
this.props.mapStateToProps(this.state)
)
}
You can check a pretty interesting video about it here: https://www.youtube.com/watch?v=BcVAq3YFiuc