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’s React Native so promising?

Why is #ReactNative so promising? Read Valentin's blog post to find out!

  • React Native looks a lot like React: roughly the same syntax, classes, JSX, state, props… but React Native is a framework, which means you have more features than just rendering in React Native.
  • To do that, the Facebook team created a bunch of APIs to interact with the camera, the keyboard, the vibrations… – – One of the big advantages of using React Native is that, while the core app runs in a JavaScript Engine, it uses JSX to render native code.
  • You use classes, ES6, states and the like, with a few notable differences: – – Not much to say here except that Redux, the React developers’ favourite state management library, also works with React Native with absolutely no difference in the way you’ll dev.
  • Here’s an example of a small Menu component: – – This article is not about HOCs; just know they allow a greater flexibility around the way you compose your components and you can use them in React Native.
  • With React Native you can compose your styles and properties, combine them and then have them applied onto your component.

Continue reading “Why’s React Native so promising?”

Understanding higher-order components

  • Why use HOC: Promote reuse of logic across React components.
  • How to use HOC: The core structure of a HOC is a function that takes a component and returns a new component.
  • HOC are pure functions with no side-effects because the component passed in, is wrapped in a new component.
  • The HOC looks like this: – – State now has a property to inject data from the API fetch into the wrapped component via the prop.
  • React Redux connect has a different function signature of a function returning a function which accepts one argument (ie, ‘component’) to create a HOC.

Understand why and how to use higher-order components with React JS

Continue reading “Understanding higher-order components”

Lessons learned testing React & Redux apps with Jest and Enzyme

Lessons learned #testing #reactjs  & #Redux #apps with #Jest and #Enzyme  #javascript

  • It makes things much easier, and you can pattern match (hit p then type part of your file/folder name) to make sure you’re not running a ton of things every save.Make sure you don’t close off your test() statements early.Parentheses man… 😢Is perfectly valid Javascript, but your test (while it…
  • I only noticed that I had this copy and pasted for one section of my unit tests when I made an error and realized the test didn’t fail.Which leads me to…Make sure your tests failIf you’re awesome and use TDD, then props to you you’re already doing this 🎉For the rest…
  • Time to move on.”However this leads to errors like the aforementioned one, and it’s surprisingly easy to grab and test the wrong element or mocked function — especially if you’re copy pasting from a similar test.It’s not hard to just comment out an essential section of a test and make sure it…
  • It’s also easy to copy to another component with a similar need for testing.In fact all of the little conventions I’m following here (beforeEach mounting a wrapper, what I name things, spreading a props object) are great to have defined somewhere so people can easily understand and copy test functionality…
  • It also makes testing quite simple and separates rendering vs data concernsI try to extract any complex data manipulation to pure functions and test thoseI use end to end (Selenium) and integration tests to check on sections of my app to make sure it all fits together.It’s not perfect, I’m…

If you don’t work at a primarily tech company, it can be a bit difficult to convince managers of the importance of things like unit testing. After being a enthusiastic supporter for quite a while, I…
Continue reading “Lessons learned testing React & Redux apps with Jest and Enzyme”

React.JS — Component Data Transfer – codeburst

  • If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through state.So what is state?The heart of every React component is its “state”, an object that determines how that component renders behaves.
  • That might look something like this:class component_A extends Component { constructor() { super(); this.state = { data: [], };}In this case, we are defining the state of data.
  • Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components.
  • [callback] in the child, and pass in the data as an argument.From our above example, our code might look something like this:class component_A extends Component { constructor() { super(); this.state = { listDataFromComponent_C: “ “, };}myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponent_C});Now from within the child component (component_C) we can pass something to props are static, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component.
  • It might look like the following:class component_A extends Component {constructor = {dataFromComponent_C: “ “};},myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponentC });This is just a brief explanation of how to change data within a component, and transfer data to other child and parent components.

In React JS, there’s often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done…
Continue reading “React.JS — Component Data Transfer – codeburst”

How to use Presentational/Container components in a Redux app – Jakob Lind

I wrote about when and how to use presentational/container components #reactjs #redux

  • Either present something visual (presentational component) OR fetch data (container component).
  • You can use the container/presentational pattern when using both regular Ajax calls inside your components, or when you are using Redux to fetch data.
  • When you start coding your Redux app, you usually start with a wrapper component that receives the data from the Redux store.
  • It is possible to connect Redux to any React component in your application.
  • In a real world application you might need to do more advanced refactorings of the presentational components.

Have you read about Presentational/Container pattern but are still not sure how it looks when it’s used correctly? When should you use it and when should you NOT use it?
Continue reading “How to use Presentational/Container components in a Redux app – Jakob Lind”

Share Code between React and React Native Apps – Hacker Noon

  • Share Code between React and React Native AppsDevelopers are adopting Higher Order Components (HOC) Stateless Functional Components, and for good reason: they make it easier to achieve code reuse, a coveted aspiration of developers.There are many articles on HOC and Functional Stateless Components.
  • But here are a few benefits to consider:UX consistency, both within an application and across devicesMake cross-cutting upgrades: improve a component and update all its uses easilyreuse routing and authorization rulesSwitch libraries (for example, the apps below uses MobX for state management, but Redux could be swapped in)I’ll focus on using HOC and Functional Stateless Components to achieve reuse.
  • It will not use routes nor multiple scenes as the focus is on component reuse.We will add a second pair of applications (React and React Native), which will reuse the components we extract.This GitHub repo branch has the baseline applications (The final result is here.)
  • You have to “see” the duplication, which might require rearranging code blocks.Applying these ideas is like moving puzzle pieces around, to find where they meet and what patterns they reveal.Let’s start by looking for duplication.Seeing DuplicationThe web and mobile applications have two main components.In the web application, App.jsIn the mobile application, SearchView.jsThe following outlines their structure.Almost the same, but the platform differences between React and React Native are in the way.The two components have similar structures.
  • But they are in the README for the GitHub repo branch.Instead, I’ll focus on the refactoring to a common SearchBox, which our web (React) and mobile (React Native) applications will both use.Extracting a Shared Component for Web and MobileFor clarity, I’ve renamed SearchInput.js, SearchResults.js and SearchBox.js to WebSearchInput.js, WebSearchResults.js and WebSearchBox.js, respectively.Let’s look at (Web)SearchBox.jsLines 2–10, 19, 20, 26, 27 are specific to React.MuiThemeProvider, a container for Material UI components, is the only direct dependency on Material UI.

Developers are adopting Higher Order Components (HOC) Stateless Functional Components, and for good reason: they make it easier to achieve code reuse, a coveted aspiration of developers. There are…
Continue reading “Share Code between React and React Native Apps – Hacker Noon”