Are you frustrated trying to figure out how an entire React App is organized and structured? All the answers are here.
React is an insanely populer JavaScript library.
The reason it's insanely popular is because it's good. And it's made the job of crafting complex UIs a million times easier than before. But you still need to know how to architect things the right way.
If you choose to master React and its ecosystem, you'll get to tap into a vast network of open source components that help you build your app. But understanding how to use React is just the first step. You have to figure out how to assemble a React app that's made out of many UI components and many moving pieces.
If you're a developer working on a large-scale React front-end, you need to learn how to architect things the right way. This course will be your guide.
Do you know how to manage application state? Do you know the best patterns to structure the data in your app?
Knowing how to manage the data that flows through your app is critical.
Redux, an advanced design pattern and collection of JavaScript libraries, helps you manage the state of your application and the data that flows through it. It's a collection of JavaScript libraries that allow you to implement a design pattern critical to helping your app scale.
When you develop a complex UI with user-facing data, the data has to be fed into your UI components. Also, separate UI components may need to talk to each, and when the data changes in one it must be reflected in the other.
Redux helps you do all this. Knowing how to manage application state is a skill you *must* have in order to develop real applications. Once you overcome this learning curve, you'll truly be empowered to build real apps.
Webpack, a module bundler, powers your entire app. If you master this tool, you'll have a powerful skill set in your arsenal.
Webpack is a major tool that manages all of the front-end assets of your app.
If you're building a complex front-end application with static assets such as CSS, fonts, images, etc., then you need to know Webpack.
If you want to write the code of your React app using the latest version of JavaScript, you have to use Webpack. 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.
Avoid mistakes and technical debt, and learn how to use an advanced React boilerplate to set up your foundation.
Setting up the right foundation for your app is everything.
Professional 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.
In this course, you'll learn how to use an advanced React boilerplate that has everything you need. You just need to test it out, understand how it's structured and configured, and put it to work. It's MIT licensed so you can use it for anything.
A user-facing app needs to be built upon a good foundation. What does a solid foundation look like? What needs to be in place so an entire team of developers can develop upon it?
All of the answers are here.
You don't have to be a Designer to give your app a professional design. You can build interactions into your app by using Material-UI.
Give your app a look and feel with the latest version of Material-UI.
Material-UI will give you everything you need to design the experience of your app. Thinks like icons, fonts, interactions, modals, buttons, and so much more.
After you complete this course, you will be able to use Material-UI to design any Web-based app. So put on your designer's hat and learn to give your users a good experience.
The only way to learn is by doing. You need to build and ship a product to feel confident that you can build React apps.
The only way to learn how to develop React apps is by coding and shipping them.
If you want to build React apps, you have a lot to learn. And the only true way to learn is by going through the process of writing real software.
You need to exercise your fingers-to-brain connection and build an actual product that you could ship. Then you can say: "I have these skills. I can right real software".
In this step-by-step course, you are guided through the development of a simple, yet complex-enough, React app that has already been shipped. The app is called Voice Record Pro, a Web-based voice recording application, and it has a solid architecture that you learn as you complete this course.
Design & build for the Web, the most ubiquitous software runtime on the planet.
Design your React App with the URL in mind
The Web has major advantages over native mobile applications. Mainly, it runs everywhere and on every device on the planet. When you build for the Web you build for one platform that runs everywhere. You don't have to build separate applications for both Iphone and Android like you do when creating a native mobile application.
The Web also has URLs baked right into the platform. You can link users directly to any section of your application, provided you design your application right. Linking into sections of a native mobile application is a major affair that comes with hurdles.
In this course, you'll learn how to design your React app by leveraging the URL every step of the way.
Stop suffering from JavaScript fatigue! Get the help you need now from an industry expert.
Get Step-By-Step Guidance & Instructions
In order to learn how a professional React app for the Web is developed, you need to create a *real* app. In this course, you will receive step-by-step instructions in video format.
A part of the course will involve hands-on coding so you can exercise your brain to fingers connection. Everything is designed to help you become a professional Front-End Engineer using React.
Join The Slack Channel For Support
When you're struggling with something or need support, you can post your questions in the Slack Channel. We're committed to getting you through to the end of the course successully, so please join our community.
Course Outline
- 1 Introduction
- The App You Will Develop In This Course (Voice Record Pro)
- Hello And Welcome
- Prerequisites
- How This Course Is Organized
- About the Instructor
- Getting Help
- 2 React Crash Course
- Introduction
- Install The UI Foundational Boilerplate Now
- Thinking In UI Components
- Your First React Component
- Props, Prop Types, & Default Props
- Lifecycle Hooks
- Managing Component State
- JSX (JavaScript XML)
- Container vs. Non-Container Components
- Presentational Components vs. Class Components
- Handling User Events
- Controlled Vs. Uncontrolled Components
- Method Binding
- Styling Components With CSS Modules
- ES6 Modules - Importing & Exporting
- Nesting Components & Composition
- Wrapping Third Party Components
- Review
- 3 Redux Crash Course
- Introduction
- Application State - What It Is, And How To Manage It
- Redux High Level Overview
- Redux Principles & Philosophy
- Redux Directory Structure & Middleware
- Actions & Action Creators
- Reducers
- Connecting React Components To Redux - Dispatching Actions
- Connecting React Components To Redux - Listening To Changes
- Review
- 4 Front-End Architecture Fundamentals
- Introduction
- Getting Started With The Foundational Boilerplate
- Directory Structure & Organization For Large-Scale React Apps
- The Package.json File
- Choosing A Package Manager
- Managing Third Party Dependencies & NPM
- Important Script Commands
- Your Local Development Server
- Webpack Directory Structure
- Understanding The Webpack 4 Configuration
- Babel And How To Configure It/span>
- ESLint & Configuration
- Automated Linting & Keeping Code Healthy
- The App Initialization Process
- The Main Application Shell Architecture
- Route Configuration With React Router 4
- CSS Architecture Part I - CSS Modules (You will want this!)
- CSS Architecture Part II - Centralized SASS Configuration
- CSS Architecture Part III - Material-UI Theming
- Review
- 5 Coding The App Part I - Implement The Main Application Shell
-
In this first guided coding module, I show you how to implement the entire shell of an application, including its main navigation.
- 6 Coding The App Part II - Develop The Microphone View
-
In this second guided coding module, you write the code for the first view and main feature: recording a user from a Web browser using a cool visualization.
- 7 Coding The App Part III - Develop The Recording Playback View
-
After a user's voice is recorded, the user needs to play back the recording. That's what you implement in this coding module.
- 8 Coding The App Part IV - Display The List Of Recordings
-
Finally, you develop the view to display the list of audio recordings for a user. You store the recordings in the brower's local storage, so the user can play back audio recordings at any time. Great job!
An 8 part video course. Invest the time to learn these skills, it will be worth it.
