Building Mobile Applications with React Native. A brief introduction.

Building Mobile Applications with #reactnative. A brief introduction.

  • If you open your App.js you’ll encounter something along the lines of: – Components are the core of React Native, every visual element of your app is a component.
  • This styling cheat sheet is very handy when you’re getting started to check on what properties are available when styling components, but for a complete description the go to place is the online React Native documentation.
  • There are many basic elements that React Native provides as starting points and building blocks for our components: Views, ScrollViews, Text, TextInput, Touchable components that respond to touch input, Image, etc… As your UI starts growing and you have the need to add more and more Native components you’ll start…
  • Props and State – These are important concepts that will bring functionality, customisation and the ability to reuse components throughout your application.
  • We’ve created a new component that makes use of props and state to render a few text elements to the screen of our app’s.

The number of mobile devices is estimated to cross the 5 billion [1] mark between 2018 and 2019. This is pushing the mobile application development market forward, with the ever increasing demand for…
Continue reading “Building Mobile Applications with React Native. A brief introduction.”

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”

Creating your first React component – Paritosh Pundir – Medium

Creating your first React component  #javascript #es6 #programming #react #reactjs

  • If you already understand how the setup process works continue reading, otherwise check this post: Quick guide to starting with React js using ES6Here is the code on our main react file, where we will call our first component.Code on Github to follow alongmain.jsxNow lets create a new folder Component and than create FirstComponent.jsx inside it.
  • js go ahead and use it, things will work the same way.In this file we will first import React and Component from react to use it for creating our first react component.import React, {Component} from ‘react’;With react and component ready for use, now go ahead and create a simple ES6 class as follows:class FirstComponent {}At the moment this is an ES6 class but not a react component, so lets extend it to make it a react component:class FirstComponent extends Component {}Now we have a react component but it is of no use.
  • React components has a function called render() which generates the view of our page.
  • Lets go ahead and create one h1 element that our component will render:class FirstComponent extends Component { render() { return ( h1I am the First Component/h1 ); }}We are almost done, but still we need to export this class.
  • So the final code looks like this:Now lets use this component in our main.jsx, just import it from the path and use it as you would use a HTML tag (don’t forget to close it with / ).

In a recent post we learnt how to get started with react and setting up webpack and react modules. If you already understand how the setup process works continue reading, otherwise check this post…
Continue reading “Creating your first React component – Paritosh Pundir – Medium”

intro-to-react/ at master · ericvicenti/intro-to-react · GitHub

  • We can modify our component to display the data being passed in:

    Near the top of the file, lets add some different places that we might want to display weather for:

    Now, upgrade the App’s render function to iterate over each place, and render a tag for it.

  • We want our app to be able to switch between places, so we can use state to keep that data in our App component.
  • Let’s use the and in our App component:

    At this point, your file should look like this.

  • Let’s install it, alongside which provides the React components for it:

    In the top of the app file, import the css from the bootstrap module:

    Next, import the components we want to use from .

  • Now, replace the App component’s render function to use the bootstrap components:

    Now our app is starting to look more polished, but it would be nice to have a custom theme.

intro-to-react – A Hands-On Walkthrough of your first React Web App
Continue reading “intro-to-react/ at master · ericvicenti/intro-to-react · GitHub”