How To Develop Professional React Apps

First, we review the prototype you will develop in this course, Voice Record Pro. You have to build and code a real application in order to really understand how to develop software applications. This is a learning by doing course which is the only way to truly learn fast.

The React app you will develop in this course is a Web app, so it runs on any device. You're going to understand all of the advantages of building for the Web, designing with the URL in mind, and taking advantage of one of the Web's greatest strength: reach!

You'll get all of the final code for the Voice Record Pro app, access to the Github repos, and a way to reach out if you have any questions or problems. The final code of the course prototype is a full example of professional quality code.

You've heard of React because it's insanely popular and thousands of companies, teams, and products use it. And for good reason: it's an extremely good library for crafting UIs. In this module, you'll get a crash course on using React and the absolute essentials you must know to use it.

Front-End Engineers are in charge of setting up the foundation for the UI & UX of any user-facing software. Knowing how to implement a solid foundation for medium to large-scale React apps will save you time, pain, and frustration. Don't struggle trying to find the right foundation, it's here.

Even companies and startups with full-time designers on staff use third-party UI libraries. Knowing how to properly integrate a third-party UI library like Material-UI is essential since it can save you and your team a humongous amount of effort and time. Learn how to leverage the work of others!

Redux is an advanced design pattern that helps applications scale. It manages the data that flows through an application, and it lets you respond to user actions in a highly manageable way. Redux allows your application to grow in complexity gracefully. This is a major skill to have in your arsenal of skills.

In addition to data, Redux also manages application state. Application state is the visual state of your UI at any point in time. Redux helps you manage the state of your application in a predictable way. In the beginning, Redux has a learning curve but once you get the hang of it you're as good as gold.

Redux borrows heavily from functional programming, a style and approach to programming that has significant advantages. It has 3 main actors: Actions, Action Creators, and Reducers that work together to comprise the entire design pattern. All of the data that flows through the app, and the entire state, is stored in one object.

Webpack is an advanced tool that powers the entire front-end of your app. Webpack helps you do advanced things like code splitting, lazy loading, caching, tree shaking, UI library creation and much more. Knowing how to use and configure Webpack will distinguish you from other developers. It may appear intimidating at first, but after you take this course you'll understand how it works.

Structuring a professional React app is one of the most basic things you need to do. The ideal structure is one that lets you move around your code with the least amount of effort, and that carries the smallest cognitive load. The structure provided in this course is 100% the correct way to structure your React app. Don't use Create-React-App for a real project.

You must write the codebase for your application using the latest version of the JavaScript language. ECMAScript 6, also known as ECMAScript 2015 or just "es6", is the latest version of the ECMAScript (JavaScript) standard. However, not all browsers support all of es6, therefore you must "transpile" your code using Babel. But how do you configure Babel to transpile a modern app? I will show you.

In this module we begin coding the professional React application. Every application has a main shell that wraps the entire chrome of the UI. The shell usually contains top-level navigation and menus in the header. In this first part of this module, you'll establish the main shell of your React app using an "application shell architecture". Of course, we'll reuse Material-UI components when it makes sense.

The shell of your application needs to include a place where you define all of the routes that lead into your Web application. You're designing your React app by always keeping the URL in mind, so properly defining and managing the routes that lead into your application are critical. React-Router is the #1 library used to route a user throughout a React app and in this module you learn how to use it.

You can bring a huge amount of value to a team by implementing a solid CSS architecture. Every application needs to be styled, and using CSS in combination with an advanced tool chain that includes CSS Modules and SASS will reap huge dividends for you and your team. Also, knowing how to configure a centralized UI theme will save you time and money when implemented correctly. This module will help you add immense value to your project right now.

The first view you will develop is the Microphone view. This view will allow the user to record the user's voice from a browser, and it will display a cool wave oscillation as the user speaks. This view will work on both deskop and mobile. You won't have to code everything from scratch since you'll be using third-party components to make everything work and look right.

After the user records her or his voice, the recording will need to be stored locally in the browser's local storage mechanism. You'll also need Redux to store and retrieve audio recordings in any view that may need to render them. You'll be using the Redux design pattern to manage a critical piece of data your users need, their audio recordings.

As you implement the microphone view, you'll get expert guidance on key JavaScript language features like object destructuring, named and default imports/exports, template literals & string interpolation, arrow functions, lexical scoping and so much more. You would never write your application in an older version of JavaScript. You must write your app in the latest version of the JavaScript language.

In this module, you will code the audio playback view. Each recorded item will have its own unique URL so a user can access a recording directly. You'll add a cool frequency bar visualization that will display and synchronize with the recorded audio. You'll also get to play with the HTML5 Audio element and see how you can play, pause, and stop audio in the Web browser natively.

Once you've added the main code for the audio playback view, you'll add a sub-header of relevant controls. These controls will allow the user to delete an audio recording, edit a recording's title, and download the recording. Everything will be developed responsively, so it will look right for both mobile and desktop.

You never ever write a JavaScript application without linting it. Ever. In fact, your linter needs to be configured so it automatically checks your code before you can even commit it to Git. That's what every professional team does, and you'll learn how to configure this properly. Automatically linting your code when you make changes, and automatically fixing errors without your intervention is how you can save time and effort.

In this final coding module, you'll implement the view that displays the list of recordings for a user. Each recorded item will be stored in the browser's local storage mechanism which is where you'll retrieve each recorded audio item. When a user clicks on a recording, they'll get routed to the unique URL for the recording.

Properly configuring a medium or large-scale React application is necessary so your code is DRY (Don't Repeat Yourself) and easy to maintain. In this course, I'll give you best tips on how to configure your application from a centralized config file. Then, when you need to change a configuration that's universally used throughout your app, you just have to do it from one place.

When you're developing a complex Web application, you're making use of many open-source third-party components that save the community a ton of develpment time. So you have to know how to manage your third party dependencies with a package manager. You can choose to stick with the classical NPM package manager, or you can use the newer and faster Yarn package manager. The choice is yours.