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

The React Newsletter

Hi <<First Name>>,
 
How to use React.lazy and Suspense for components lazy loading

React 16.6 brought code-splitting to a new level. You can now load your components when it’s really needed without installing additional libraries.

What are code-splitting and lazy loading?

Webpack defines code-splitting as:

“technique of splitting your code into various bundles which can then be loaded on demand or in parallel”. [Source]

Another way to say: “loading on demand or in parallel” is lazy-loading.
Opposite of lazy-loading is eager-loading. Here everything is loaded no matter if you use it or not.


Read more
 
How to use ReactJS with Webpack 4, Babel 7, and Material Design

For the past year and some, I have been working with React at Creative Tim. I have been using create-react-app for developing some nice products. There have been a lot of clients asking how can someone migrate our product templates on Webpack.

So after a number of requests, we created this little tutorial about how to start using React with Webpack 4 and Babel 7. At the end of the tutorial, I am going to show you guys how to add Material Dashboard React on top of the newly created app.

Before we get started please make sure you have the latest versions of npmand Nodejs installed globally on your machine. At the time of writing this post, the latest versions were 6.4.1 for npm and 8.12.0 (lts) for Nodejs on my machine.


Read more
 
React Hooks: a Guided Tour
Hooks are an exciting new experimental proposal that make it possible to add state to function components, and aim to make it easier to reuse logic. Dave will give an introduction to hooks and the motivation behind them, show examples of hooks in practice, and explain how you can try them out yourself.

Watch video
 
Hello, Create React App 2.0!

Create React App provides an environment for learning React with zero configuration, developed by the React team at Facebook Open Source to help you jump-start your application. As the go to CLI tool for React developers (since it's V1 release in 2016), Create React App (CRA) has had opinions on what to use for your tests and test runner, what production minifier and bundler to use and how to set up a modular JavaScript codebase. These are decisions that you won't have to make to get your app up and running quickly, relieving you from a good deal of JavaScript fatigue when all you want to do is get straight to building your app and components.

Don't worry, you will still be able to make plenty of decisions on your own around state management, data retrieval, etc. CRA does not go as far as to make decisions like those for you. What it does do is create an out of the box front-end build pipeline that you can use with any back-end API or data retrieval options that you want.


Read more
 
Create a Component Library with React and Storybook

In this blog post, through Guillermo's insight, we are going to explore how the Account Center Team is using React and Storybook to optimize UI development and promote consistent branding by creating a component library that can be shared across different projects.

Don't Repeat Yourself (DRY)

Auth0 Support Center, a customer-facing site, and Customer Success Tools, an internal site, have similar elements on their interfaces. For example, despite having a different business context in each interface, the Quota Utilization feature in both interfaces uses the same structure to report data to the user.


Read more
 
How to autogenerate forms in React and Material-UI with MSON

Implementing great forms can be a real time-waster. With just a few lines of JSON, you can use MSON to generate forms that perform real-time validation and have a consistent layout. And, MSON comes with a bunch of cool stuff like date pickers, masked fields and field collections.

Disclaimer: this post is geared towards those wishing to use Material-UI with React. Future versions of MSON will support other rendering layers.

What the heck is MSON?

MSON is a declarative language that has the capabilities of an object-oriented language. The MSON compiler allows you to generate apps from JSON. The ultimate goal of MSON is to allow anyone to develop software visually. You can also use pieces of MSON to turbo charge your form development.


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp