ASP.NET Core Basics: React with an API – Eric L. Anderson

#aspNETCore basics: build a #ReactJs app with an #API

  • This post is going to cover adding a React project to the existing using the React template that is now built into Visual Studio.
  • The goal for the React project in this initial post will be to connect to the contacts API and download a list of contacts and render that to the screen.
  • The following is the resulting React project in the context of the full solution.
  • Next, make sure and run npm install from a command prompt in the React project’s directory to ensure all the npm packages get restored.
  • Since this is my first time working with React I took the  FetchData.tsx file and copied the contents and used that as the starting point for my contact list.

In the past, I have done some exploration on Aurelia and Angular via the ASP.NET Core Basics series. This post is going to take a similar approach as I start doing some exploration with React. The code for the project will be in the same repo as the previous basics examples and will be utilizing the same API to pull data. The code before adding the React project can be found here.
Continue reading “ASP.NET Core Basics: React with an API – Eric L. Anderson”

Why Angular 2 Is So Awesome – Jacob Gardner – Medium

Why Angular 2 Is So Awesome  #react #angular2 #angular #javascript #reactjs

  • First you start with a simple route that looks something like this:{ component: SweetComponent, path: ‘fabulousness/:someId’}Pretty straightforward, yeah?
  • Okay, time to dig down into that SweetComponent from earlier and see how it accesses those fields.Your route is polite enough to provide Observables so that the component can make any necessary updates when the route changes, like this:route.params.subscribe(({ someId }) = otherStuff }) = …Convenient, huh?
  • Simply put, it’s a hash of the names for component properties that have changed to corresponding SimpleChange objects.
  • On that note, I’ll just defer to a passage from my entirely hypothetical and nonexistent previous article, Why TypeScript Is So Awesome:Unfortunately, TypeScript’s philosophy tends to encourage a developer to encapsulate values in ES6 classes, much as one would use structs in other languages.
  • When we obfuscate the true nature of JavaScript’s dynamic typing and prototypal inheritance behind a facade of static types and classes, we directly harm inexperienced developers by giving them a false impression of how JavaScript actually works.

Did you want to know what’s so great about Angular 2? Man, that sure was rhetorical. I’m definitely going to tell you regardless. Let’s talk routing; every app worth its salt needs routing. First you…
Continue reading “Why Angular 2 Is So Awesome – Jacob Gardner – Medium”

Jetpack 4.3 Released, Features New React.js-Powered Admin Interface

Jetpack 4.3 Released, Features New React.js-Powered Admin Interface

  • Overall, the new interface in 4.3 feels faster, but I found significant lags with loading the Stats and Plan screens on multiple test sites.
  • Several sites would not load the Plan screen and instead showed a flashing “loading” display, even after disconnecting and re-connecting to WordPress.com.
  • The Plans screen is a sales funnel for Automattic to monetize self-hosted sites using Jetpack.
  • Jetpack 4.3 was released today with a new admin interface that has been completely rewritten in React.js.
  • There are two new screens featuring Apps (mobile and desktop) and Plans (paid upgrades on WordPress.com).

Jetpack 4.3 was released today with a new admin interface that has been completely rewritten in React.js. The Jetpack team has been working on the redesign for a year and received feedback from more than 8,000 Jetpack users before the official release.
Continue reading “Jetpack 4.3 Released, Features New React.js-Powered Admin Interface”

Better Prop Validation in React – Medium

Better prop validation in #ReactJS - for more stable, easier to read code:

  • const { shape, number, object, arrayOf } = React.
  • const { number, string, shape, objectOf} = React.
  • PropTypes const coworker = shape({ id: number.isRequired, name: string, }) Meeting.propTypes = { info: shape({ timestamp: number.isRequired, room: number, organizer: coworker, }).isRequired, participants: objectOf(coworker).
  • PropTypes Meeting.propTypes = { info: shape({ timestamp: number.isRequired, room: number, organizer: shape({ id: number.isRequired, name: string, }), }).isRequired, participants: arrayOf(shape({ id: number.isRequired, name: string, })).isRequired, }
  • PropTypes Meeting.propTypes = { info: shape({ timestamp: number.isRequired, room: number, organizer: object, }).isRequired, participants: arrayOf(object).

For more stable, easier to read code
Continue reading “Better Prop Validation in React – Medium”

An Introduction to React JS: Becoming a Cool Kid

An Introduction to React JS: Becoming a Cool Kid |  #webdev #webdesign

  • An Introduction to React JS: Becoming a Cool Kid
  • The second type of data is State data.
  • With React, you’re able to keep ALL of that logic within a single component javascript file, keeping all aspects making up a component in one place.
  • The article is by no means a complete introduction to React, but hopefully provided a few thoughts on why we’re very excited to be using React JS at Authentic F&F.
  • Unidirectional dataflow, the method React implements, is advocated as being more simple than bidirectional.

Read the full article, click here.


@authenticff: “An Introduction to React JS: Becoming a Cool Kid | #webdev #webdesign”


When it comes to client work, I’ve always enjoyed the pace and variety of projects. With multiple new projects per year, you’re able to begin anew, ut


An Introduction to React JS: Becoming a Cool Kid