React JSX: How to Do It the Right Way, Part II

In the previous part of React JSX series, we took a look at how to correctly loop through arrays and objects in React. In this article, we’ll help you learn how to write conditional statements when rendering components.
Everything below applies to React Native as well!

Link: https://dzone.com/articles/react-jsx-how-to-do-it-the-right-way-part-ii-1?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React JSX: How to Do It the Right Way, Part I

Usually, when developing a website, you’ll need some dynamic rendering, like a listing of items, showing some element under a certain condition and so on.
You’re all aware of the standard JS syntax – a for loop, or an if/else – but when you try to write those under a render method in React, you’ll most likely get some weird looking errors.

Link: https://dzone.com/articles/react-jsx-how-to-do-it-the-right-way-part-i?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Build User Registration With Node, React, and Okta

Today’s internet users expect a personalized experience. Developers must learn to develop websites that provide that personalized experience while keeping their user’s information private. Modern web applications also tend to have a server-side API and a client-side user interface. it can be challenging to get make both ends aware of the currently logged in user. In this tutorial, I will walk you through setting up a Node API that feeds a React UI, and build a user registration that keeps the user’s information private and personal.
In this tutorial, I won’t use any state management libraries like Redux or ReduxThunk. In a more robust application, you’ll probably want to do that, but it will be easy to wire up Redux and ReduxThunk and then add the fetch statements used here as your thunks. For the sake of simplicity, and to keep this article focused on adding user management, I’ll be adding fetch statements into componentDidMount functions.

Link: https://dzone.com/articles/build-user-registration-with-node-react-and-okta?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

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

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 and Setup
React Chat Part 2: Creating the UI and React Components
React Chat Part 3: Adding Websockets Using SignalR
React Chat Part 4: Authentication and Storage
React Chat Part 5: Deployment to Azure

I also set-up a GitHub repository where you can follow the project. 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?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Web Dev Roundup: Don’t Over React(.js)

Welcome to this edition of the roundup! Last time, we covered Spring Boot for web developers. Today, we take a look at another framework (or, I guess, technically it’s a library) for front-end developers, React.js. Originally cooked up by the JavaScript wizards over at Facebook, React has gained a vast and growing following of developers. So, try not to over React about how awesome this article is (I already know). 
And, as a quick side note, if you’re interested in writing for DZone, but don’t have a topic in mind, come check out our Bounty Board, where you can win prizes for providing great content, and our Writer’s Zone which has plenty of prompts, tips, and tricks! 

Link: https://dzone.com/articles/web-dev-roundup-dont-over-reactjs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Fade in Lazy Loaded Images With React and CSS: A Quick Guide

Say you want to lazy load some images on your website. You don’t want them to just pop into existence and scare the user. A nice fade in effect works much better.

Here’s the problem: There’s no good pre-built React component for this. Or I suck at finding it.

Link: https://dzone.com/articles/fade-in-lazy-loaded-images-with-react-and-css-a-qu?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this:
…most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and …

Sketching in the Browser is a post from CSS-Tricks

Link: https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526

Top 10 JavaScript Errors From 1000+ Projects (and How to Avoid Them)

To give back to our community of developers, we looked at our database of thousands of projects and found the top 10 errors in JavaScript. We’re going to show you what causes them and how to prevent them from happening. If you avoid these “gotchas," it’ll make you a better developer.
Because data is king, we collected, analyzed, and ranked the top 10 JavaScript errors. Rollbar collects all the errors for each project and summarizes how many times each one occurred. We do this by grouping errors according to their fingerprints. Basically, we group two errors if the second one is just a repeat of the first. This gives users a nice overview instead of an overwhelming big dump like you’d see in a log file.

Link: https://dzone.com/articles/top-10-javascript-errors-from-1000-projects-and-ho-1

Building a Chrome Extension Using React

Last week I finished building a chrome extension for a customer. The extension was built with React as a view engine to render a popup. So I thought to myself — wouldn’t it be nice to write about how to build your own extension with React?
In this post, I’m going to guide you through the process of building a simple Chrome extension using React. After this intro, you will have a starting point to continue and build your own extension functionality.

Link: https://dzone.com/articles/building-a-chrome-extension-using-react?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React.js for Noobs Part II: Flux

This post is a continuation of my earlier React.js for Noobs post; if you haven’t read it already, first go through it before continuing with this article. React is a library to manipulate the web page DOM, and, when building a complex web app, it is paramount to manage the state of the application as most of the time React components want to talk with each other.
If all the components start to talk with each other, the whole app will be a mess and debugging an issue will be a nightmare. Hence, Flux can be used to make our lives easier. Flux is a data unidirectional architecture pattern. It is mostly a concept, rather than an implementation. First, let’s get a good conceptual understanding of what Flux is and later on move on to an example implementation to get hands-on experience.

Link: https://dzone.com/articles/reactjs-for-noobs-iiflux?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev