React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium

#ReactJS Progressive #Web Apps:  by @GethylK #JavaScript

  • How to create your first PWA app and/or convert your existing app into PWA.In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.You need to understand the lifecycle of a SW, which…
  • Here is the code snippet from index.htmlRegister SW if browser supportsIf the above registration step was successful, then the SW file will be downloaded.
  • Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.Updating Cache / Making network calls — Fetch eventSW listens to fetch event, and in our example since we handle only the basic case of caching only the static files,…
  • Adding your app to the Home Screen.Perfect!Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.Step 2, tells you how you can run it from your virtual device.And now let us make it feel a bit more like an app,…
  • I would highly recommend you to use it to generate a report of you webpage.Here is an example of this github example.Webpack run on dev mode yarn startWebpack dev server with prod build yarn start:PRODWhen I first ran the report, the scores where much worse, and I went through the suggestions…

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA. If you haven’t heard of…
Continue reading “React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium”

Key concept and Its necessities in React component – Shubham Akodiya – Medium

Key concept and Its necessities in React component  #es6 #react #reactjs

  • /ChildKey’;class ParentKey extends Component { constructor() { super(); this.state = {activeIndex: 0}; } updateIndex = () = { const {activeIndex} = this.state; this.setState({activeIndex: activeIndex + 1}) }getContent() { const {activeIndex} = this.state; let element; switch(activeIndex) { case 0: element = ChildKey name=’abc’ updateData={this.updateIndex} / break; case 1: element = ChildKey…
  • getContent() method returns the ChildKey component as per the activeIndex value.So Because the activeIndex default value initially set to 0, The initially getContent method returnselement = ChildKey name=’abc’ ChildKey component, we’ve initiallize the state i.e state = {childName: props.name} and when clicking on change parent component state link, then parent…
  • So name ‘bcd’ is printed and the element var becmes like below -element = ChildKey name=’bcd’ here we’re not using the key props, In ChildKey component.
  • Here react assuming both are same, So when constructor is call (constructor is called only one time in component life cycle), It initializes the state childName to ‘abc’ and In second time (when activeIndex changes to 1) constructor is not called, because react don’t know that It is separate component….
  • /ChildKey’;class ParentKey extends Component { constructor() { super(); this.state = {activeIndex: 0}; } updateIndex = () = { const {activeIndex} = this.state; this.setState({activeIndex: activeIndex + 1}) }getContent() { const {activeIndex} = this.state; let element; switch(activeIndex) { case 0: element = ChildKey name=’abc’ key=’23422%%%%’ updateData={this.updateIndex} / break; case 1: element =…

Most of the user had faced the problem of ‘key error’ i.e Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of xyz component, while using the custom…
Continue reading “Key concept and Its necessities in React component – Shubham Akodiya – Medium”

React.js: The Hard Parts

State Management without #Redux:  by #ReactJS

  • If a user interacts with your application or refreshes the page, then we’ll look up state at that moment and rebuild the page.
  • In dynamic apps, like ones built using React, state change has to be dealt with immediately.
  • Managing state can get complicated if each component has some state.
  • Interaction with the components, like a mouse click, trigger these functions to update state.
  • For example to implement retweets: – – When the state is updated, the props will change too and render the child components again.

I am a full-stack software developer and passionate educator. I have been building for the web for almost two decades.
Continue reading “React.js: The Hard Parts”

React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium

#ReactJS Progressive #Web Apps:  by @GethylK #JavaScript

  • How to create your first PWA app and/or convert your existing app into PWA.In this example I created new React app with PWA in mind, but the idea should be quite similar if you have to convert your existing app into PWA.You need to understand the lifecycle of a SW, which are listed below, and you can read more about it in this link.Register the Service Worker(SW)If a browser supports SW, then the service worker will be registered.
  • Here is the code snippet from index.htmlRegister SW if browser supportsIf the above registration step was successful, then the SW file will be downloaded.
  • Well that is because SW can intercept the fetch event, and this will help if you want to cache something from the network.Updating Cache / Making network calls — Fetch eventSW listens to fetch event, and in our example since we handle only the basic case of caching only the static files, you can see below, when there is a fetch event within the SW’s scope (Refer the registration step to see the scope),it is intercepted, and we checked if request has a response already in the cache, then we return the response from cache.
  • Adding your app to the Home Screen.Perfect!Step 1 above showed you the importance of SW and how it helps to make your app to be offline first.Step 2, tells you how you can run it from your virtual device.And now let us make it feel a bit more like an app, but letting you add this to your homepage, so that you can launch it anytime later without the need to remember the url or bookmark it.This is where you need to under about web manifest json file, which was one of the topic I mentioned would be good to know.
  • I would highly recommend you to use it to generate a report of you webpage.Here is an example of this github example.Webpack run on dev mode yarn startWebpack dev server with prod build yarn start:PRODWhen I first ran the report, the scores where much worse, and I went through the suggestions provided against the areas the app scored bad and did some fine tuning.

Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the Create React App creates your project by default as PWA. If you haven’t heard of…
Continue reading “React Progressive Web Apps — Part 1 – Progressive Web Apps – Medium”

Framework Event Listeners

View and Remove JS Event Listeners in @ChromiumDev Tools:  by @umaar #JavaScript #ReactJS

  • You can view JavaScript event listeners in the Events Listeners pane within the Elements Panel.
  • You see all registered event listeners on the inspected element, for example , , etc.
  • This is useful for quickly figuring out whether a JS event listener is the cause of an unexpected bug.
  • As a solution, if you check the ‘Framework Event Listeners’ checkbox, DevTools can resolve the original code (e.g. your source code).
  • Note: I have only tested the ‘Framework Event Listeners’ feature with jQuery.

Chrome DevTools – View and remove JavaScript event listeners – Subscribe to Dev Tips to get these in your inbox
Continue reading “Framework Event Listeners”

5 Projects to Help You Learn React

  • Variations of this UI can be found all over the web – Twitter, Facebook, Pinterest, Airbnb, Redfin, and so on – and it serves as a solid building block for the sort of app where you want to display an image + some data.
  • It’s also good practice for breaking down a UI into React components.
  • You might notice that the “days” look a lot like social cards…

    For added practice, here are a few ways you could expand on the app:

    You can see how this app starts off simple, but can be expanded at will to increase the challenge and the learning.

  • Hacker Hunt is an aggregator of Hacker News stories with categories, but more importantly, it’s a good app to build for React practice.
  • This app will give you some practice with lists of components that are a little more complicated than todos.

Here are 5 projects that’ll be fun to build, and do not involve any todo lists.
Continue reading “5 Projects to Help You Learn React”