Learning Path: React: Make Stunning React Websites
4.2 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
124 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: React: Make Stunning React Websites to your Wishlist.

Add to Wishlist

Learning Path: React: Make Stunning React Websites

Create attractive React user interfaces with pretty-looking visualizations
4.2 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
124 students enrolled
Created by Packt Publishing
Last updated 4/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create different UI components for your sites such as buttons and jumbotrons
  • Create button components using Bootstrap 4.0
  • Explore deeper integrations with JSX and ES6 to create reusable components
  • Understand hot reloading to update pages as a result of interface interaction
  • Understand how different types of data can be ingested into React
  • Create different visualizations from your data (charts, grids, maps, and more)
View Curriculum
  • Requires working knowledge of ReactJS and some experience with building React websites.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

Every great website needs a great user interface, and without one, your users will soon leave. The React stack is the perfect tool to create modern dynamic interfaces. It is also capable of rendering data reactively on the web, enabling users to interact with it and see the results in real time.

This Learning Path covers the practical skills needed to make great interface components that incorporate other web development tools, such as Bootstrap, SASS, and hot reloading. It will then show you how to ingest your data and display it on the web using a variety of techniques, such as charts and grids. It will run through the logic process, meaning that you will be able to take these skills and apply them in your own projects.

Beautify your React websites by leveraging the skills this Learning Path promises to deliver.

The goal of this Learning Path is to help you prettify your React web apps by equipping you with all the required skills.

This Learning Path is authored by one of the most recognized names in web development.

Ben Fhala

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of an online video training school, 02geek, and is an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Who is the target audience?
  • This course is ideal for web developers. In order to take this course, you should have some familiarity with React, Node.js, and NPM. You should also have a good knowledge of JavaScript.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
53 Lectures
Learning React.js User Interfaces
27 Lectures 03:16:10

In this video, we will start up our foundations for our project.

Preview 14:25

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.

Setting up Webpack and WebPack-Dev-Server

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.

Bootstrapping our HTML

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.

Hot Reloading with WebPack-Dev-Server

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.

Adding Support for ES6 and JSX with Babel

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.

Building our First JSX 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.

Preview 07:19

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.

Building a Reusable Bootstrap React Button

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.

Creating Dynamic JSX Tags

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.

Understanding JSX Spread in Depth

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.

Adding Features to Our Button Component

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.

Making Disabled Tags Work

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.

Preview 04:55

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

Creating the Jumbotron Component

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.

Building a Reusable Container Class

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.

Removing Unknown Props from HTML

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.

Completing Our Jumbotron with a Dynamic Fluid Child

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.

Preview 10:07

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.

Creating SASS Variables

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.

Importing SCSS Files with Webpack

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

Introducing SCSS Mixins

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.

Preview 06:29

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

Choosing Between Children and Props

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.

Working with Events in React

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

Understanding How State Works

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.

Animating Children with ReactCSSTransitionGroup

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.

Leaving Animations with SASS Nesting
Learning React.js Data Visualization
26 Lectures 03:05:43

For us to dive right into the deep, we need to have our environment up with a lot of configurations. To save us time, in this video, I will walk you through the structure that we will be using. This will enable us to develop in ES6/JSX, while our code will automatically get packaged into ES5 with a hot browser that refreshes when we make changes in our code.

Preview 08:52

In this video, we will startup our server and walk you through the basics of JSON rules.

Overview of JSON Basics

ES6 doesn't have built-in support for loading JSON files as imports, while a great workaround is using a webpack loader to enable this behavior before the file is outputted to the browser. In this video, we will learn how to use the import command to import JSON files into our main client.js file.

Importing JSON Files with webpack

In this video, we will learn how to create a React ES6 class; we will learn to export our class, import it into our main client JavaScript file, and render it out onto the screen. In the process, we will learn the basics of JSX.

Building ES6 React Classes

Throughout this section, we were introduced to React, JSX, ES6, and JSON. It's time for us to connect all the dots by integrating into our React component and our JSON data using JSX spread and React props.

Integrating JSON into React Components

In this section, we will be using a visual map to help us illustrate how to work with map related data. Through this video, you will learn how to work with web services and how to integrate their response into React component.

Preview 04:46

Before we can use a web service, we will need to figure out what area on the map we clicked on. To figure that out we will calculate our mouse position and figure out our relative x and y positions for our image in this video.

Finding Points on a Map

Now that we have a point on the map, it's time for us to convert that point into latitude and longitudes. As the web service we will be using will require that information to return the name of the cities that are near the point we clicked onto us.

Calculating a Map's Latitude and Longitude

For us to call the web service, we need to send to it four parameters. The easiest way to do that in ES6 is to use string templates to build up our URL. In this video, we will learn how to useES6 string templates to dynamically create our web service URL.

Using ES6 String Templates

We are finally ready to connect to the web service.

Connecting to the Web Service

React components that expect to undergo changes need to declare these changes in advance to enable React to be prepared for changes within the component. In this video, we will enable our component to update itself based on the point on the screen that is clicked on.

Changing a Component's State

Before we continue our journey into the data world, let's take a detour to understand the environment that we are working within. In this video, we will learn more about how packages are installed in NPM, the basics of version controlling package and how to deal with incompatible modules; and we will add a new loader for webpack that will enable us to load CSV files.

Preview 10:05

In this video, we start our journey to create a React component that leans on a component that is not supported by React. As our first step, we need to create a standard component that has some CSS styles. By the end of this video, we will have a canvas element with a few style attributes.

Modifying Style Attributes in React

Before we can start building out our data, we need to have a data source. Let's work on it in this video.

Preparing the Chart Data Object

In this video we will learn how to integrate ChartJS into ReactJS. By the end of this video we will have a fully interactive bar chart.

Creating a Bar Chart with ChartJS

One of the most important skills you need to develop is the skill of formatting data.When you format data, you are converting it to fit your application instead of creating extra rules within your core component.This is the best way to keep your components small and agile. By the end of this video, we will have a ChartJS bar chart running with data driven out of a CSV file.

Formatting Data

The future of JavaScript is here today, and as a React developer, you need to start getting your mind around the concepts of idiomatic JavaScript. Although this course is not about Idiomatic JavaScript, this video will prepare you mentally for this environment. At the end of this video, you will understand your client better, and know how to create JavaScript files that are more reusable—making your code idiomatic.

Preview 07:44

In this video we will solve the problem from the last section where all of our bar component elements were in the same color. To solve the color problem, we will use a node.js module that generates random colors.

Adding Random Colors

Now that we have a wonderful component that can render out any chart, let's fix a big issue it has that relates to memory leaks. Our component currently assumes it will never get updated, but in reality it could get updated, and when it does we will need to clean out any leftovers. To fix that issue, we will use some built in callbacks that are triggered by ReactDOM.

Cleaning Up Memory Leaks

React is a library that leans on properties and states. In this video we will learn more about how to configure and setup properties to make our new component completely reusable without backed data.

Diving Deep into Properties

Before we move on to a new topic, let's get more familiar with ChartJS.

Exploring the Options in ChartJS

In this video, we will show you the steps you will need to take to setup and configure the MongoDBdatabse. By the end of this video, you willhave MongoDB running and you will know the differences between MongoDB server and its drivers.

Preview 04:31

In this video, we will see how MongoDB leans on the noSQL standard that enables the creation of databases that are based out of standard JavaScript.

Database, Collection, and Document

In this video, we will create our last dataset for this course.

Preparing Our Data for MongoDB

Now that we have data inside of our MongoDB server it's time for us to setup a server that can fetch the data.

Setting Up NodeJS with Express and MongoJS

Time to wrap things up! In this video, we will use jQuery to load in our JSON data that has been created in the last video and send it into our Chart component.

Creating a Radar Chart with MongoDB
About the Instructor
Packt Publishing
3.9 Average rating
7,349 Reviews
52,642 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.