React Guide to Props – Part III

Previously we’ve learned how to pass props in react and also how to indirectly communicate between components using props. Today, we’re getting to the finale of this props guide series, where we’ll talk about how to check whether we passed correct props.
React Props – Make Sure You Are Typechecking
As the application you’re working on grows, you’ll definitely want to add some kind of prop typechecking – you don’t want bugs you’ll work on for hours or days before you realize you just sent an empty array instead of an object!

Link: https://dzone.com/articles/react-guide-to-props-part-iii?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Adding a New Screen to the React Template Project

In this post, I started looking into React.js. Following getting the sample project running, I decided that I’d try adding a new screen. Since it didn’t go as smoothly as I expected, I’ve documented my adventures.
The target of this post is to create a new screen, using the sample project inside Visual Studio.

Link: https://dzone.com/articles/adding-a-new-screen-to-the-react-template-project?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

6 JS Frameworks to Learn in 2018

JavaScript (JS) is essentially the most used scripting language worldwide. All web developers swear by JS to design, animate and employ elements on the webpage. Along with HTML and CSS, JavaScript can move mountains… I mean, it can literally do anything and make the webpage more interactive and exciting.
Unlike HTML, JS doesn’t limit itself, instead, it keeps evolving because change is the new constant. JS knows how to keep its patrons engaged while they are working with it. JS is the most versatile programming language used worldwide owing to its ability to develop apps for a wide range of platforms such as Android, Windows, and iOS.

Link: https://dzone.com/articles/6-js-frameworks-to-learn-in-2018?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Snapshot Tests in React Using Jest

Writing tests might not have been the most enjoyable thing for you in the past but we hope that after reading this article, you’ll be able to increase your test coverage.
Today we’re talking about snapshot tests using Jest. They’re easy to write, they’re fast, and most importantly, we’ll for sure know if something is not right if we use them correctly. These snapshots will warn us about every change we make that affects the rendering: whether we’re doing something simple, or more advanced rendering that includes conditions or looping.

Link: https://dzone.com/articles/snapshot-tests-in-react-using-jest?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React Guide to Props – Part II

In the previous article, you were able to read about the basics of React props. In that article, we wrote about things like sending event handling functions as props, spread operators, and sending props with a cloning children prop. Overall, it was all the standard flow, where the parent passes the props to child components.
Today, we’re spicing up the game and covering a bit more advanced themes – how the component can send information to the parent via props, and how components on the same level (under the same parent) can communicate by using props. Note that there are other, more advanced ways to realize communication between components (using more advanced ways to manage app state, like Redux), but in this article, we’re talking about props only.

Link: https://dzone.com/articles/react-guide-to-props-part-ii?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Error Boundaries in React 16

Not long ago, React announced the release of version 16 with long-standing feature requests including error boundaries, fragments, improved server-side rendering, and more. Error boundaries are especially useful so that an error in one small part of the UI doesn’t break your entire application. Instead, it’s better to contain those errors to the affected components and recover gracefully.
You can try using error boundaries yourself in our working Codepen example. We forked it from Facebook’s initial version to show how to add Rollbar’s JavaScript error logging. When you open this page, you can activate an error boundary by clicking at least five times on the counter. You will then see the error message “Something went wrong.” Let’s dive deeper into this example to learn how error boundaries work.

Link: https://dzone.com/articles/error-boundaries-in-react-16

Reuse JavaScript to Improve Productivity

Great presentation at Okta Iterate 2018 by Cory House, Software Architect and JavaScript Consultant on “The Reusable Java Revolution."
According to Cory, "the future is here, it’s just not evenly distributed." There are Tesla automobiles and Tesla solar panels that enable grid-free homes and Amazon Go that let you shop without the need to go through a check-out line. However, access to these are limited by geography and wealth.

Link: https://dzone.com/articles/reuse-javascript-to-improve-productivity?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Creating a Chat Application Using React and ASP.NET Core – Part 4

In this blog series, I’m going to create a small chat application using React and ASP.NET Core, to learn more about React and to learn how React behaves in an ASP.NET Core project during development and deployment. This Series is divided into 5 parts, which should cover all relevant topics:

React Chat Part 1: Requirements & Setup
React Chat Part 2: Creating the UI & React Components
React Chat Part 3: Adding Websockets using SignalR
React Chat Part 4: Authentication & Storage
React Chat Part 5: Deployment to Azure

I also set-up a GitHub repository where you can follow the project: https://github.com/JuergenGutsch/react-chat-demo. Feel free to share your ideas about that topic in the comments below or in issues on GitHub. Because I’m still learning React, please tell me about significant and conceptual errors, by dropping a comment or by creating an Issue on GitHub. Thanks.

Link: https://dzone.com/articles/creating-a-chat-application-using-react-and-aspnet-3?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React Guide to Props – Part I

Disclaimer: This was intended to be part III of React JSX series, but as for props there’s a lot to be covered, so we have decided to divide it into a subseries!
In some of our previous articles, you had the opportunity to read about JSX specific stuff, like how to render content in loops and how to do conditional rendering in React.

Link: https://dzone.com/articles/react-guide-to-props-part-i?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev