React Hands on & Tips

100DaysOfCode

React

100DaysOfCode – Days 8 to 12 – React

 I’ve spent the last few days learning more React, I needed to get to a point where I could solve simple tasks without copying the answer from other fellow, so I came back to freeCodeCamp and continue with the Front End Libraries Certification, just where I abandoned it because it was not getting the React concepts. Now after a week having my hands on in some code and easy problems, it has been quite a smooth path to follow and founding some interesting knowledge to keep in mind about React.

Here my list of things to have into account for my future React proyects:

  • The best practice with React is to place API calls or any calls to your server in the lifecycle method componentDidMount(). This method is called after a component is mounted to the DOM.
  •  The first is unidirectional data flow. State flows in one direction down the tree of your application’s components, from the stateful parent component to child components. The child components only receive the state data they need.
  • complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. 
  • state updates may be asynchronous – this means React may batch multiple setState() calls into a single update. This means you can’t rely on the previous value of this.state or this.props.
  • Using a function with setState guarantees you are working with the most current values of state and props.
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
  • One common way is to explicitly bind this in the constructor so this becomes bound to the class methods when the component is initialized.
  • stateless functional component is any function you write which accepts props and returns JSX.
  • stateless component, on the other hand, is a class that extends React.Component, but does not use internal state (covered in the next challenge).
  • stateful component is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.
  • The componentDidMount() method is also the best place to attach any event listeners you need to add for specific functionality. 
  • React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user’s browser – even if the native events may behave differently between different browsers. (Cool!!!!)
  •  FYI: As a rule, any hyphenated style properties are written using camel case in JSX.
  • Since React is a JavaScript view library and you can run JavaScript on the server with Node, this is possible. In fact, React provides a renderToString() method you can use for this purpose.