Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
What’s New In Create React App 4

Create-React-App allows us to scaffold new React applications. It’s an incredibly useful tool for building React applications. It keeps all of our dev dependencies like webpack, ESLint and babel inside of react-scripts. That means, that in order to update these dependencies, we need to wait for an update to Create-React-App. Lucky for us, that day is here.

Yesterday Create-React-App version 4 was released.

Let’s go over the new features you can expect from updating, and the migration steps you may have to go through to successfully upgrade.


Read more
 
Building a sexy, mobile-ready navbar in any web framework

I've been building a lot more static sites recently, and every one of them needs the same thing:

  • A nice and responsive navigation bar with logo on the left, links on the right 💪
  • For mobile screens, collapse those links on the right into a hamburger menu with a dropdown 🍔
  • Hit all the marks for accessibility: semantic HTML, keyboard navigation, and more ♿️
  • Add some polished animations for that sleek, modern feel ✨

Oh, and implement it using whatever framework the team is using. This may sound daunting... but after bouncing between ReactSvelte, and plain-ole JS, and I think I've found a solid solution you can take with you wherever you go.

Onwards!


Read more
 
End-to-End TypeScript: Database, Backend, API, and Frontend
This is a walk-through of a real commercial system written in TypeScript. Static types are used to ensure that the backend code uses the database's data correctly, that the backend sends the correct data over the API, and that the frontend consumes API data correctly.

Watch video
 
Mastering Props And PropTypes In React
Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTypes. So, you will also learn how to integrate PropTypes in React.

Read more
 
React Forms Tutorial: Access Input Values, Validate, and Submit Forms

HTML elements like headings <h1><h2>, paragraphs <p>, or simple textual output <span> are meant to display information.

On the other side, the forms <form> and input elements like <input><select><textarea> collect information from the user. Working with forms and input fields requires more effort: you have to access input values, validate the form, submit form data, and handle submission result.

In this tutorial, I’m going to show you how to access the form input values, how to validate and submit forms in React.


Read more
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
21 React Example Projects to Learn From (Open-source, Beginner-Intermediate Level)

This post was originally published at https://www.devaradise.com/react-example-projects

Learning React.js can be done in many ways. One of the most effective ways to learn React is by learning from case studies, or example projects.

With an example project, you will figure out the principles and best practices of React.js faster. It will develop your problem solving and analytical skill that needed in the real-world project.

In this post, I'll share with you the list of React example projects to learn from, from beginner to intermediate level.

But before you jump to learn from an example project, you should know the basic React.js. At least, you should know the React syntax (JSX), states, props, components, etc.


Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2020 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp