React State From the Ground Up

#ReactJS State From the Ground Up #JavaScript

  • State, in React, is a plain JavaScript object that allows you keep track of a component’s data.
  • The initial state of the App component has been set to a state object which contains the key username, and its value using .
  • Initializing a component state can get as complex as what you can see here: – – An initialized state can be accessed in the method, as I did above.
  • Your component should look like this; – – A state can be passed as props from a parent to the child component.
  • This method will be used to update the state of the component.

As you begin to learn React, you will be faced with understanding what state is. State is hugely important in React, and perhaps a big reason you’ve looked into using React in the first place. Let’s take a stab at understanding what state is and how it works. What is State? State, in React, is a plain JavaScript
Continue reading “React State From the Ground Up”

Why do we need to understand the ReactJs life cycle methods?

Why do we need to understand the ReactJs life cycle methods?  #javascript

  • When you build an application in ReactJs you will have to split the UI into reusable components and think about each of them in isolation.When the user interacts with our application in ReactJs, for example, by hovering, pressing a key, clicking… These actions trigger many other events on the UI…
  • So, why is understanding lifecycle methods so important?Let’s imagine that you are building an application in ReactJs, for example, a video player app, like Vimeo, Twitch or Youtube .
  • Now, your user is using the player app on his/her laptop and decides to search for a fun video to watch, found the video, and then selected to watch it.Let’s suppose that the player app is consuming only resources like network data and the battery power.After some time watching videos…
  • When we build an application in ReactJs , we can predict different type of actions by the user, placing some hooks and triggers.These triggers and hooks are available by component lifecycle methods in Reactjs.
  • They will help us to create the most efficient piece of the software as possible.To place correctly the hook methods into the components we need to learn more about the four stages of ReactJs component.The ReactJs component goes through the Four following is a little diagram to demonstrate those phases.InitializationIn…

Components are the core of ReactJs. When you build an application in ReactJs you will have to split the UI into reusable components and think about each of them in isolation. When the user interacts…
Continue reading “Why do we need to understand the ReactJs life cycle methods?”

React Functional Components vs. Class Components – codeburst

  • Let’s have a look at an example:import React from “react”; import PropTypes from “prop-types”; const Person = ({firstName, lastName}) = ( div h1 {firstName} {lastName} /h1 /div ); Person.propTypes = { firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired } export default Person;As you can see, functional components are basically just the render function…
  • Instead, they focus solely on the UI and not on the behavior of the app.Also something worth mentioning: When you’re using functional components, you don’t have a this keyword to use.Now let’s have a look at class components, before we compare them and work out their different use cases.Class ComponentClass…
  • Have a look at the above example, rewritten as a ES6 class component.import React, { Component } from “react”; import PropTypes from “prop-types”; class Person extends Component { render() { return( div h1 {this.props.firstName} {this.props.lastName} /h1 /div ); } } Person.propTypes = { firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired } export default…
  • If needed, you can always rewrite them to class components later on, but most of the time you will just use them to arrange your UI and let the container components handle the state and logic.Container Components need their own state or make use of life cycle methods, therefore I…
  • You learned, that functional componentsdon’t have statedon’t have life cycle methodsdon’t have a thisare pure functions and therefore easy to testare easier to read and understandencourage you to keep in mind the best practicescan also be called presentational componentsIf you need anything that functional components don’t provide, use class components.Call…

Functional components are simpler and easier to test in comparison to class components. However, both of them have pros and cons and today you’ll learn the differences and when to use which type of…
Continue reading “React Functional Components vs. Class Components – codeburst”