Caching images in React Native – React Native Training – Medium

  • The example app using images from Unsplash.This is the result of opening and closing the app five times.
  • The app downloads the images every time it launches, which is very much undesired and poor design.
  • Not only does this result in exponential data usage, which is an unpleasant surprise for your customers, it also makes your apps reliant on network connection every time external images are shown.
  • To provide our apps with minimal data usage, faster reponse time and improved offline capabilities, let us take a look at how we can cache external images.
  • import { CachedImage } from ‘react-native-cached-image’;In my example app, I set up a FlatList to show the images.

I can still recall the moment where I realised something was terribly wrong.
I was on the verge of publishing my first app. I had gone over everything and I felt I had my bases covered. It was then…
Continue reading “Caching images in React Native – React Native Training – Medium”

Understanding React — Component life-cycle – Bartosz Szczeciński – Medium

Understanding React — Component life-cycle

☞ 

#Reactjs #programming

  • In all other instances remember to use this.setState – DO – set initial stateif not using class properties syntax — prepare all class fields and bind functions that will be passed as callbacksDON’T – cause any side effects (AJAX calls is a somehow special case — componentWillMount does not differ much from constructor -…
  • DO – update state via this.setStateperform last minute optimizationcause side-effects (AJAX calls etc.) in case of server-side-rendering onlyDON’T – cause any side effects (AJAX calls etc.) on client function will be called in each update life-cycle caused by changes to props (parent component re-rendering) and will be passed an object…
  • DO – use for increasing performance of poor performing ComponentsDON’T – cause any side effects (AJAX calls etc.)call nextState)If the shouldComponentUpdate function is not implemented, or it decided that the component should update in this render cycle, another life-cycle function will be called.
  • == this.props.myProp) { – // this.props.myProp has a different value – // we can perform any operations that would – // need the new value and/or cause side-effects – // like AJAX calls with the new value – this.props.myProp – } – }DO – cause side effects (AJAX calls etc.)DON’T…
  • DO – cause side effects (AJAX calls etc.)DON’T – call this.setState as it will result in a re-renderAn exception to the above rule is updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes)….

React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which allows us to update the UI and application state. Knowing when to use which of them…
Continue reading “Understanding React — Component life-cycle – Bartosz Szczeciński – Medium”

Get Rich Quick With React Context

Slides from my talk at #reactfinland about #reactjs context:

  • So when my advertising provider component is initialized, it constructs an internal advertising module with my configuration.
  • It configures my ad slots with my ad server.
  • When one of my advertising slot components mount, they call an activate function that is passed to them by the provider.
  • This causes my advertising module to tell the ad server: OK, go ahead and fill that slot with some advertising creative.
  • The ad server then uses a system called Prebid to make an online auction to sell the advertising space to the highest bidder.

Continue reading “Get Rich Quick With React Context”

Setting up React Project with Parcel zero configuration approach.

Setting up React Project with Parcel zero configuration approach.

☞ 

#Reactjs

  • Setting up React Project with Parcel zero configuration approach.Learn how to configure React with Parcel module bundler in this brief tutorial – Parcel is a new module bundler for Javascript applications.
  • Setting up React with Parcel bundler: HTML and friendsBefore processing any HTML in webpack you must install two dependencies: the HTML plugin and the HTML loader.
  • Setting up React with Parcel bundler: setting up BabelReact components are mostly written in Javascript ES6.
  • As with webpack, Parcel should transform raw React components into a meaningful Javascript bundle.
  • Setting up React with Parcel bundler: wrapping upParcel is a new module bundler for Javascript that promises blazing fast speed and zero configuration bundling.

Parcel is a new module bundler for Javascript applications. It offers faster compilation times and zero configuration bundling. Webpack is a powerful tool. I know, webpack can’t be compared to Gulp…
Continue reading “Setting up React Project with Parcel zero configuration approach.”

React’s ⚛️ new Context API – DailyJS – Medium

#ReactJS’s ⚛️ new Context #API:  by @kentcdodds #JavaScript

  • Here’s the simplest useful example I can come up with: – Here’s an even simpler version so you don’t have to open the codesandbox: – const ThemeContext = ThemeProvider extends React.Component { – state = {theme: ‘light’} – render() { – return ( – ThemeContext.Provider value={this.state.theme} – {this.props.children} – /ThemeContext.Provider…
  • , but if that’s not your jam, you could easily implement a Higher Order Component or something else using the context API (which is why it’s the best).
  • The React team will remove the warning about context being an experimental feature because it’s now a “first-class featureâ€� of the framework.
  • Here’s an example: – const ThemeContext = ThemeProvider extends React.Component {/* code */} – const ThemeConsumer = ThemeContext.Consumer – const LanguageContext = LanguageProvider extends React.Component {/* code */} – const LanguageConsumer = AppProviders({children}) { – return ( – LanguageProvider – ThemeProvider – {children} – /ThemeProvider – /LanguageProvider – ) -…
  • react-fns: Browser API’s turned into declarative React components and HoC’s by Jared Palmer ğŸ‘�react-composer: Compose render prop components (what I use in the codesandbox above) by jmeasreact-contextual: Tiny helper around Reacts new context API by Paul HenschelSome tweets from this last week: – P.S.

It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API! OH, AND IT USES A RENDER PROP! NOTE: This is a cross-post from my newsletter. I publish each email to my blog…
Continue reading “React’s ⚛️ new Context API – DailyJS – Medium”

How to handle state in React. – React Ecosystem – Medium

How to handle state in React. The missing FAQ.

☞ 

#Reactjs #javascript

  • Each one corresponding to the way you create the component: – // Using React.createClass – var Counter = React.createClass({ – getInitialState: function() { – return {counter: 0}; – }, – …});// Using ES6 classes – class Counter extends React.Component { – constructor(props) { – super(props); – this.state = {counter: 0};…
  • Let’s exemplify: – // Don’t duplicate data from props in state – // Antipatternclass Component extends React.Component { – constructor(props) { – super(props); – this.state = {message: props.message}; – } – – render() { – return div{this.state.message}/div; – } – }The problem with the above example is it will only…
  • You can do better just by avoiding this situation: – // Better exampleclass Component extends React.Component { – render() { – return div{this.props.message}/div; – } – }The same applies when you hold state based on props calculation: – // Don’t hold state based on props calculation – // Antipatternclass Component…
  • // Antipatternclass Component extends React.Component { – constructor(props) { – super(props); – this.state = {count: 0}; – } – – render() { – return div{this.state.count}/div; – } – – componentDidMount() { – const interval = setInterval(() = ( – this.setState({count: this.state.count + 1}) – ), 1000); this.setState({interval}); – } componentWillUnmount()…
  • Let’s experiment a little bit to see what happens: – class Component extends React.Component { – constructor(props) { – super(props); – this.state = {count: 0}; – this.onClick = this.onClick.bind(this); – } – – render() { – return div } – – onClick() { – this.setState({count: this.state.count + 1}); – }…

Recently there has been a lot of debate about how to manage the state in React. Some claim that setState() doesn’t work as you might expect. That you have to externalize the state using a Flux-like…
Continue reading “How to handle state in React. – React Ecosystem – Medium”

React Router Dom Boilerplate – codeburst

Intro to React Router Dom V4.2.2

☞ 

#Reactjs #javascript

  • First we install new app using create-react-app – npm install -g introRouter – cd introRouter – npm start //to start appNow we want to install the react-router-dom – npm i –save react-router-dom Now create a router folder in src directory – In router folder create new file with name router.js…
  • /components/Posts”;import Header from “.
  • /header”;const ReactRouter =()={return (React.FragmentHeader /Route exact path=”/” component={App} /Route path=”/posts” component={Posts} //React.Fragment);}export default ReactRouter;we added exact it tells to load only these component – Now create components folder in src directory/folderDelete App.js file in your src folder – Add new App.js in the Components Folder – Add below code in…
  • we are importing Navlink from react-router-dom – to create link tags – import React, { Component } from “react”;import { NavLink } from “react-router-dom”;class Header extends Component {active = {fontWeight: “bold”,color: “red”};header = {display: “flex”,justifyContent: “space-evenly”,listStyle: “none”};render() {return (div style={this.header}NavLink exact to=”/” to=”/posts” default Header;Above Header component we already included…
  • /index.css’;import {BrowserRouter as Router} from ‘react-router-dom’;import ReactRouter from makes our index.js very less code and no confusion – We already separated router.js and header.js – Thanks for consuming your valuable time i hope you love these – Github repository for code

First we install new app using create-react-app. “React Router Dom Boilerplate” is published by Sai gowtham in codeburst
Continue reading “React Router Dom Boilerplate – codeburst”

Redux vs MobX: Which Is Best for Your Project?

Redux vs MobX: Which Is Best for Your Project?

☞ 

#Reactjs #javascript

  • I’ve migrated this CRUD Redux project to MobX to use as an example in this article.
  • The code for the projects mentioned in this article can be found on GitHub: – – If you enjoy this post, you might also like to sign up for SitePoint Premium and watch our course on working with forms using React and Redux.
  • If you prefer writing object-oriented code, you’ll be pleased to know you can use OOP to implement state management logic with MobX.
  • Believe it or not, the logic defined in both versions do the same tasks, which are: – – In Redux, we’ve used 33 lines of code.
  • A major benefit of the MobX version is that you can reuse the base code in almost all the domain store classes with little or no modification.

For a lot of JavaScript developers, the biggest complaint with Redux is the amount of boilerplate code needed to implement features
Continue reading “Redux vs MobX: Which Is Best for Your Project?”

React Foundations — Exclusive Workshop

  • This workshop is for React beginners and those looking to get a better understanding of React fundamentals.
  • With a focus on React fundamentals, you’ll come out of this course knowing what problems React can solve for you and how it goes about solving those problems.

The full-day workshop focused on getting developers up and running on React to build faster and scalable single-page applications!
Continue reading “React Foundations — Exclusive Workshop”

How to Create a Component Library From SVG Illustrations

How to Create a Component Library From SVG Illustrations  #SVG #webdev #reactjs

  • It makes SVG illustrations from unDraw into customizable React components.
  • Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua: – – While using React to build the Little Lingua website, I discovered that converting SVGs into React components made them much more manageable and even…
  • Because of this usefulness, I wanted to release a library of unDraw React components as an open source npm package to bring the beauty of unDraw to the largest of JavaScript audiences in a simple way: – – John Hannah, who authored the the JavaScript Frameworks by the Numbers report:…
  • Let’s make those colors easy to change: – – We can use the benefits of React to make the illustration customisable by adding *props* as placeholders that are used to fill the *color attributes* of the SVG/JSX in your component: – – To make sure you’re replacing the right fill…
  • To learn more about transforming SVG illustrations into components, check out Elizabet Oliveira’s talk about her side project, React Kawaii which was also nominated as “Fun Side Project of the Year” at the React Amsterdam Open Source Awards:

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. Here’s a GIF that shows what I mean: What’s unDraw? While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is
Continue reading “How to Create a Component Library From SVG Illustrations”