Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learning Path: React: Make Stunning React Websites
Rating: 3.8 out of 5(28 ratings)
291 students

Learning Path: React: Make Stunning React Websites

Create attractive React user interfaces with pretty-looking visualizations
Created byPackt Publishing
Last updated 4/2017
English

What you'll 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)

Course content

2 sections • 53 lectures • 6h 21m total length

  • Setting Up our Foundation Project14:25

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

  • Setting up Webpack and WebPack-Dev-Server8:11

    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.

  • Bootstrapping our HTML7:20

    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.

  • Hot Reloading with WebPack-Dev-Server5:20

    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.

  • Adding Support for ES6 and JSX with Babel10:46

    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.

  • Building our First JSX React Component13:37

    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.

  • Creating an ES6 React Component7:19

    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.

  • Building a Reusable Bootstrap React Button10:14

    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.

  • Creating Dynamic JSX Tags4:04

    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.

  • Understanding JSX Spread in Depth4:55

    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.

  • Adding Features to Our Button Component7:32

    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.

  • Making Disabled Tags Work3:04

    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.

  • Creating Reusable Utilities4:55

    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.

  • Creating the Jumbotron Component5:26

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

  • Building a Reusable Container Class9:25

    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.

  • Removing Unknown Props from HTML4:23

    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.

  • Completing Our Jumbotron with a Dynamic Fluid Child5:14

    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.

  • Dynamically building CSS files with Webpack10:07

    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.

  • Creating SASS Variables5:48

    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.

  • Importing SCSS Files with Webpack11:34

    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.

  • Introducing SCSS Mixins7:36

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

  • Animating in React with Add-ons6:29

    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.

  • Choosing Between Children and Props3:28

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

  • Working with Events in React4:56

    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.

  • Understanding How State Works3:38

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

  • Animating Children with ReactCSSTransitionGroup8:47

    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.

  • Leaving Animations with SASS Nesting7:37

    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.

Requirements

  • Requires working knowledge of ReactJS and some experience with building React websites.

Description

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 this course is for:

  • 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.

Report abuse