Learning Path: React: Make Stunning React Websites

Learning React.js User Interfaces 27 lectures 03:16:21 Setting Up our Foundation Project In this video, we will start up our foundations for our project.

• Get an overview of the topics of the course
• Start up NPM
• Set up our basic HTML structure

Setting up Webpack and WebPack-Dev-Server Most interactions that we will do in the modern web happen within a real server and as such we must aim to have our development tested in a web browser environment as well.

• Set up webpack and webpack-dev-server to act as our server- throughout the next few sections
• Understand the power of both of them as they relate to React development

Bootstrapping our HTML Now that we got the basics of the technical things behind us it is time to move into exploring a bit of Bootstrap 4.0.

• Improve on the visuals using Bootstrap 4
• Set a full screen fluid Jumbotron with a button with the help of the Bootstrap 4.0 CSS library

Hot Reloading with WebPack-Dev-Server We are almost ready to start building React components but just before we start building them we need to configure our JavaScript entry point and add it into our HTML.

• Have webpack-dev-server refresh content automatically
• Get one step closer to building React applications.

Adding Support for ES6 and JSX with Babel The most common way to develop in React is developing in ES6 and with JSX to be able to do so we need to configure our Webpack to automatically convert our ES6/JSX into ES5 code. By the end of this video, we will have our setup ready for us to code with ES6 and JSX.

• Familiarize ourselves with webpack
• Take a look at hot reloading and loaders of ES6/JSX support
• Build our first JSX react component

Building our First JSX React Component Now that we have everything configured it’s time for us to meet JSX for the very first time as we create our first react component.

• Take our Bootstrap-HTML sample we created in the last video and convert it into a JSX react component
• Learn about the basics of JSX and React

Creating an ES6 React Component We ended the last section with the creation of a JSX React component that was baked right into our main client.js file. In this video we will extract our component into its own ES6 class and in the process start to understand the importance of organizing and componentizing your code in React.

• Get to know ES6 classes
• Learn how to import and export modules in Node.js
• Know more about JSX

Building a Reusable Bootstrap React Button The core premise behind React is building out extremely small and reusable components that do one thing really well. In this video, we will extract out a Bootstrap button and place it in its own dedicated class and then use it.

• Understand the importance of having a good strategy to create components
• Build out a Bootstrap React button

Creating Dynamic JSX Tags In the official documentation of Bootstrap buttons, it is encouraged for users to use the “button” tag and not the “a” tag whenever their button will act as a button. Part of that is because of rendering limitations in various browsers. This is turn gives us a great opportunity to talk about dynamic tagging in JSX.

• Match up with the Bootstrap documentation
• Create a button based on the documentation

Understanding JSX Spread in Depth While our button is now already dynamic and can do most of the things that a Bootstrap button can do we still need to repeatedly add copy. In the following videos we will be working on making our component take on more work to reduce our needs of typing.

• Understand what Spread is and how to use it in JSX
• Learn the usage of React props

Adding Features to Our Button Component For our Button component to be even more useful, it would be great if we can cut down on the amount of typing we need to do when using it.

• Create a dynamic engine that will add class information
• Reduce our need to type when working with the component while maintaining backward compatibility for users that are not aware of our new addition
• Learn about the new ES6 string templates and components

Making Disabled Tags Work While buttons can have disabled states, “a” tags cannot and as such we want to fix this issue so that our “a” tag will be disabled as well whenever the user adds the disabled command to our component.

• Disable buttons
• Follow Bootstrap 4.0 documentation
• Complete the creation of our first production ready button

Creating Reusable Utilities While React is highly optimized to create reusable components, one of the common struggles of developers working with the library is figuring out where to place the code that needs to be shared among multiple components. In this video we will solve the first type of content – non-visual content and where to place it in the lifecycle of a React component.

• Understand what we need to do with non visual logic
• Get introduced to external reusable utilities

Creating the Jumbotron Component Now that we have everything ready it’s time for us to create our second Bootstrap react component – the Jumbotron.

• Create a Jumbotron component from scratch
• Create components that have children and know how to integrate them

Building a Reusable Container Class Bootstrap uses containers often and as such we need that base class created. In the process we will learn more about planning components and dynamically modifying their settings. Let’s see this is action.

• Check out reusable component assets
• Take a look at how to create a container
• Understand the importance of reusability

Removing Unknown Props from HTML React has recently added to its features a debugging feature that announces whenever you add non-valid HTML into a document. We’ll see this feature in action.

• See how to remove the extra “helper” properties from the props
• Check out the exception React throws

Completing Our Jumbotron with a Dynamic Fluid Child For our newly created Jumbotron to match the current Bootstrap 4.0 documentation, we don’t need to add a container into it when the Jumbotron is not fluid. To address this we will learn of new ways to integrate children into components.

• Take a look at props.children
• Create a dynamic child
• Have a fully complete Jumbotron

Dynamically building CSS files with Webpack One of my favorite features that work so wonderfully with React is using component-based CSS files. To get us to that goal we first need to know how to integrate CSS files modularly into our application. By the end of this video you will have webpack configured to grab CSS files as it is building up and output them into one single CSS output file.

• Work with css-loader
• Understand the usage of extract-text-webpack-plugin

Creating SASS Variables In this video we will set up our project to accept SASS and SCSS files. Once we get all of our webpack configurations ready we will learn how to create variables in SASS and output them into CSS.

• Set things up with webpack
• Know what variable are

Importing SCSS Files with Webpack It’s time for us to turn back into Bootstrap and dynamically add SCSS as is needed (and only as needed). By the end of this video you will know how to import SCSS files locally and through the Bootstrap package.

• Understand how variables work
• Solve variable scope issues
• Import SCSS files

Introducing SCSS Mixins In this video we will show you the basics of how to work with mixins.

• Know what mixins are
• Integrate and get our CSS to dynamically be created based on the Bootstrap components that we are using

Animating in React with Add-ons We had fun building a few interfaces and it’s time for you to continue building your own interfaces but before we wrap things up there are two last major topics that will help you create better interfaces. We will start with animation in this video.

• Use the react-addons-css-transition-group module to get things to animate

Choosing Between Children and Props We almost didn’t notice that our button has a hardcoded value in it and in this video we will fix that.

• Fix our button to prepare it for our work ahead

Working with Events in React How can we not talk about user interactions as this whole title is about user interfaces? In this video we will learn how to work with react events and bind their scope.

• Understand constructors
• Explore events and scopes

Understanding How State Works In this video we will understand what state is and how it differs from properties.

• Know how to work with states in react
• Know the core competencies to become a successful React developer

Animating Children with ReactCSSTransitionGroup In this section so far we created one animation that faded our full component in when it was instantiated. In this video, we will learn how to animate new children within a component

• Understand the use of the enter component
• Let’s see enter in action

Leaving Animations with SASS Nesting In this video we will complete our project and will have animations included into our React components as we explore a few more features of SASS – namely SASS nesting.

• Learn how to animate things out using the leave component
• Check out how to use SASS nesting to make things easier

v06316-video5_6.mp4 Learning React.js User Interfaces. 27 lectures 03:16:21 Setting Up our Foundation Project In this video, we will start up our foundations for our project.

• Get an overview of the topics of the course
• Start up NPM
• Set up our basic HTML structure

Setting up Webpack and WebPack-Dev-Server Most interactions that we will do in the modern web happen within a real server and as such we must aim to have our development tested in a web browser environment as well.

• Set up webpack and webpack-dev-server to act as our server- throughout the next few sections
• Understand the power of both of them as they relate to React development

Bootstrapping our HTML Now that we got the basics of the technical things behind us it is time to move into exploring a bit of Bootstrap 4.0.

• Improve on the visuals using Bootstrap 4
• Set a full screen fluid Jumbotron with a button with the help of the Bootstrap 4.0 CSS library

Hot Reloading with WebPack-Dev-Server We are almost ready to start building React components but just before we start building them we need to configure our JavaScript entry point and add it into our HTML.

• Have webpack-dev-server refresh content automatically
• Get one step closer to building React applications.

Adding Support for ES6 and JSX with Babel The most common way to develop in React is developing in ES6 and with JSX to be able to do so we need to configure our Webpack to automatically convert our ES6/JSX into ES5 code. By the end of this video, we will have our setup ready for us to code with ES6 and JSX.

• Familiarize ourselves with webpack
• Take a look at hot reloading and loaders of ES6/JSX support
• Build our first JSX react component

Building our First JSX React Component Now that we have everything configured it’s time for us to meet JSX for the very first time as we create our first react component.

• Take our Bootstrap-HTML sample we created in the last video and convert it into a JSX react component
• Learn about the basics of JSX and React

Creating an ES6 React Component We ended the last section with the creation of a JSX React component that was baked right into our main client.js file. In this video we will extract our component into its own ES6 class and in the process start to understand the importance of organizing and componentizing your code in React.

• Get to know ES6 classes
• Learn how to import and export modules in Node.js
• Know more about JSX

Building a Reusable Bootstrap React Button The core premise behind React is building out extremely small and reusable components that do one thing really well. In this video, we will extract out a Bootstrap button and place it in its own dedicated class and then use it.

• Understand the importance of having a good strategy to create components
• Build out a Bootstrap React button

Creating Dynamic JSX Tags In the official documentation of Bootstrap buttons, it is encouraged for users to use the “button” tag and not the “a” tag whenever their button will act as a button. Part of that is because of rendering limitations in various browsers. This is turn gives us a great opportunity to talk about dynamic tagging in JSX.

• Match up with the Bootstrap documentation
• Create a button based on the documentation

Understanding JSX Spread in Depth While our button is now already dynamic and can do most of the things that a Bootstrap button can do we still need to repeatedly add copy. In the following videos we will be working on making our component take on more work to reduce our needs of typing.

• Understand what Spread is and how to use it in JSX
• Learn the usage of React props

Adding Features to Our Button Component For our Button component to be even more useful, it would be great if we can cut down on the amount of typing we need to do when using it.

• Create a dynamic engine that will add class information
• Reduce our need to type when working with the component while maintaining backward compatibility for users that are not aware of our new addition
• Learn about the new ES6 string templates and components

Making Disabled Tags Work While buttons can have disabled states, “a” tags cannot and as such we want to fix this issue so that our “a” tag will be disabled as well whenever the user adds the disabled command to our component.

• Disable buttons
• Follow Bootstrap 4.0 documentation
• Complete the creation of our first production ready button

Creating Reusable Utilities While React is highly optimized to create reusable components, one of the common struggles of developers working with the library is figuring out where to place the code that needs to be shared among multiple components. In this video we will solve the first type of content – non-visual content and where to place it in the lifecycle of a React component n fluid Jumbotron with a button with the help of the Bootstrap 4.0 CSS library Hot Reloading with WebPack-Dev-Server We are almost ready to start building React components but just before we start building them we need to configure our JavaScript...