Master Advanced JavaScript: React
4.5 (124 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.
7,433 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Master Advanced JavaScript: React to your Wishlist.

Add to Wishlist

Master Advanced JavaScript: React

A Four Week Intermediate Course to Build Projects with React
Best Seller
4.5 (124 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.
7,433 students enrolled
Created by One Month
Last updated 9/2017
English
English [Auto-generated]
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Article
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Have a firm understanding of the fundamentals of React.
  • Start developing powerful front-end features on your own using elements of the 3 real-world React apps
  • Make your website more interactive and engaging using JavaScript & React.
View Curriculum
Requirements
  • An intermediate understanding of HTML, CSS and JavaScript are necessary for this course.
  • Fluency in English
  • Come self-driven and motivated to learn!
Description

Advanced JavaScript: React is a series of video lessons and tutorials that show students who have a basic JavaScript background how to build three real-world projects that you can add to your website. You will learn how to make your website more interactive and engaging using JavaScript & React.

React was created by Facebook. Think about your Facebook timeline: There are a lot of different components there with a lot going on: the timeline updates when there are new status updates, you can “like” or comment on a status update, you can get messages from Messenger, you can search for people, right?

For a long, long time, creating interactive experiences like this in JavaScript was doable but led to messy code that was difficult to maintain. A common term for this is "spaghetti code" because all the different parts of it intertwine like the pasta on a plate of spaghetti and meatballs.

React gives us a way to organize our code. Our views (i.e. components) are self-contained and, ideally, do just a single thing. This helps us work with other people because when they come look at our code it will be easier for them to understand it. And it makes our code more robust because giving each component just one role to do cuts down on the likelihood of nasty bugs being introduced.

Week 1 - Fundamentals of React.js

In week one, we’ll build a simple React app! We’ll read through a complete React project so that you can begin to answer questions like: When do I choose between JavaScript vs. React? Why do I even need React? And why is React quickly becoming the most popular JS framework on the Web?

Week 2 - Social Media Card

If you’re building the next Twitter, Instagram, or any social media site that has user profiles then React can help you build your user interface. In this week, we’ll use API data, to populate a user profile page.

Week 3 - Pomodoro Timer

The Pomodoro Technique is a time management method used to break down work intervals: 25 minutes of deep work, followed by a 5 minute break. In this week, we’ll build an app to help us focus. The Pomodoro Timer we create will tell us when to work, and when to break.

Week 4 - Product Search

In the final week, you’ll build an app that searches through a list of products. This will be necessary for any app you create where you’d like to parse through lists of users, products, or any data set.

Who is the target audience?
  • Students with JavaScript experience
  • Students looking to excel at their current development job or make a career change.
  • Students who would like to add powerful front-end features to their own app or website.
Compare to Other React Courses
Curriculum For This Course
37 Lectures
03:41:25
+
Week 1
9 Lectures 59:32

1. Update: We no longer use Slack or Homework Grading for the React course! 

This course originally lived on One Month.com. Which means this version doesn't include Slack, code support or homework. Feel free watch as many of the videos as you like, and learn at your own pace. Enjoy! 

2. Looking for the Command Line Crash Course? 

It's here

Preview 04:46

You can check out how popular React is. 

Why is it so popular? Well, because when you're coding a complex page, like a Facebook profile, the number of sections can really pile up. It becomes so long and hard to read, the code becomes like a pile of spaghetti. 

React allows us to create better user interfaces. It allows you to divide and conquer your code. 

React doesn't store data, so it's the view layer (or front-end) and work with something like Rails in order to display it. 

In terms of the MVC (Model View Controller) paradigm, React is the View. 

Another great thing about React is that it's isomorphic - which means that the components we make with React can be used in a browser or on mobile by pulling in different react libraries. 

Preview 06:46

Single Page Application only loads once. It never reloads. Think about Twitter, or Gmail. The whole page doesn't reload based on a change that you make. And React really works well with SPAs.

It wasn't always the way that web pages worked. You'd actually have different files for different pages. Something like Ruby on Rails manages the data and the front-end components of a page and forms the site out of those parts. Combining the back-end and front-end code made things more scalable. But SPAs makes things much faster. 

Building a Single Page Application (SPA)
05:07

So here's React

But it changes quickly, and the best way to go through React is to use all the resources that are out there. So don't panic if your version looks different from the one in the video. Use your problem-solving skills to make it work. 

The Hard Truth About React
02:00

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>React Hello World</title>
</head>

<body>
  <div id="root">
  <!-- This div's content will be managed by React. -->
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js'></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


<script type="text/babel">

	ReactDOM.render(
  <h1>Hello, world!!!</h1>,
  document.getElementById('root')
);

</script>


</body>
</html>
React's Hello World
09:48

Clock App Starter Code: 

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Clock App</title>
</head>

<body>
  <div id="root">
  <!-- This div's content will be managed by React. -->
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js'></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</body>
</html>
The Clock App
13:03


Reading More Complex React Applications
07:11

Update:

Remember that there's no more homework grading. No need to submit your work! 

Install NPM (Node Packing Manager)
06:27
+
Week 2
10 Lectures 59:03

We're going to start by building an app that displays user profile cards with dynamic status updates.

A New Social Media App Begins Now!
02:13

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Social Media Card</title>
  <script src="https://fb.me/react-15.1.0.min.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <style>
    body {
      background: #1F98C7;
    }

    .card {
      width: 300px;
      font-family: Helvetica, arial, sans-serif;
      padding: 5px;
      padding-bottom: 12px;
      border: 1px solid #999;
      background: white;
      border-radius: 10px;
    }

    .photo {
      margin-bottom: 6px;
      width: 300px;
      height: 225px;
    }

    .bio, .updates {
      margin: 0 12px 18px 12px;
    }

    .bio h1, .bio h2 {
      margin: 0;
      font-size: 22px;
    }

    .bio h2 {
      font-weight: normal;
      font-size: 14px;
      margin-bottom: 3px;
      color: #8899a6;
    }

    .bio p {
      display: inline;
      font-size: 12px;
      color: #292f33;
      line-height: 20px;
    }

    .updates ul {
      padding-left: 0;
    }

    .updates li {
      list-style: none;
    }

    .update {
      margin-bottom: 8px;
      line-height: 1.3;
      padding-left: 5px;
    }

    .update.facebook {
      border-left: 2px solid #3b5998;
    }

    .update.twitter {
      border-left: 2px solid #00aced;
    }

    .photo img {
      border-radius: 10px;
    }

    .card.loading {
      text-align: center;
    }

  </style>

</head>
<body>

  <div id="app">
      
     <div class="card">
      <div class="photo">
        <img src="images/chris-merica.png" alt="Photo">
      </div>
      <div class="bio">
        <h1 class="name">Chris.name</h1>
        <h2 class="location">Brooklyn, New York</h2>
        <div class="occupation">
          <p>Protecting Freedom @ onemonthedu</p>
        </div>
      </div>
      <div class=updates>
         <ul>
           <li class="update">Updates</li>
           <li class="update">Updates</li>
         </ul>
      </div>
     </div> 

  </div>


</body>
  <script>

  </script>
</html>
Planning the Social Media Card
06:14

API Data

var person = {
  name: 'Chris Castig',
  location: 'Brooklyn, New York',
  occupation: {
    title: 'Protecting Freedom',
    employer: '@onemonthedu'
  },
  photo: './images/chris-merica.png',
  updates: [
    {
      platform: 'twitter',
      status: 'I\'m happy, hope you\'re happy too!'
    },
    {
      platform: 'twitter',
      status: 'The better the singer\'s voice, the harder it is to hear what they\'re saying'
    },
    {
      platform: 'twitter',
      status: 'Fear makes the wolf look bigger'
    },
    {
      platform: 'facebook',
      status: 'If you\’re working on something that you think is going to get accomplished in this lifetime then you’re not thinking big enough'
    }
  ]
}
Create the Class Card
07:55

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

We can build our first component like so:

react1

Create Your First Component
04:13

See if you can make components for our biophoto, and updates. Follow the same pattern we used to set up our card component. 

Create All The Components
05:23

1. Run npm init 

$ npm init 

2. Install Babel 

$ npm install --save-dev babel-cli babel-preset-env

You can always visit the Babel site for a refresher on how to install babel. 

3. Create a .babelrc file in the root of your project 

Add the following code: 


 "presets": ["react"] 
 }

4. Add the following to your package.json file 


...
  "scripts": {
    "babel": "babel app --watch -d build"
  },
...

5. Run Babel via the Terminal 

$ npm run babel 

Installing Babel via Terminal
16:06

Props allow us to pass in our text to our card class and have it populate all of our sub-components. 

Remember: If you're not seeing any updates, head back to the terminal and make sure that Babel is still running. 

Props
05:54

Once we're passing information from our JSON feed, we can get very specific and dial in on the exact information that we want. For instance, if we just want to grab our title: 

react2

We can do so by specifying it after occupation. 

Connect To Our Data
02:12

We can create a new function called updates in order to loop in all of the - you guessed it! - updates into the render function we already have. For that, we'll need Array.prototype.map(). We'll take a set of data and the map method to return our data. 

react3

Once we have our map function set up, we can go back to React for the Lists and Keys we need to pass through data. 

react4

Loop Through Updates
08:12

Your turn to finish our project and personalize it with your own information from the JSON feed!

Remember: You do not need to submit your homework, because it will not be graded. 

Homework
00:41
+
Week 3
8 Lectures 46:24

Check out the Pomodoro Timer

Pomodoro Timer
01:15

What is the Pomodoro Technique?
02:29

Download the Pomodoro Template from the resources!

Build the Pomodoro Timer App
08:17

react4

Build the Pomodoro Component
05:46

Props are things that we pass through a component, and they don't change. But state does change, coming from within the component. 

To set a state, we use the constructor. 

react5

The constructor will fire once each time that a given component is called, and so in our time elapse case, we want to set it to zero as soon as the call comes. 

State
03:32

The Component Lifecycle 

Each component has several "lifecycle methods" that you can override to run code at particular times in the process. Methods prefixed with will are called right after something happens, and methods prefixed with did are called right after something happens.

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM:

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

Unmounting

This method is called when a component is being removed from the DOM:

The Component Lifecycle
17:11

react6

You can also run componentWillUnmount in order to clear the timer just in case there are any changes in the DOM before the timer runs out.  

Alert Conditional
05:21

It's your turn to finish the pomodoro timer, and to add some more interesting functionality.

Remember: There's no grading, so no need to submit your homework. 

Homework
02:33
+
Week 4
10 Lectures 56:26

Welcome to Week 4! Congratulations. You've made it. And now we're going to build something that's applicable to a lot of use cases: a product search app. 

Product Search App
02:33

Until now, we've only used React via the CDN (ie. the http links in our .html file). But React can be installed as a dependency via Terminal, and included in your package.json file. 

Using React as a dependency is a more advanced way of including React into your project, and is likely the default setup for most professional devs. My advice, if you're working on a super small practice project the CDN is probably fine, and then when you're on a team or building up a site include React as a dependency. 


1. Install React 

Note: for this project use the @15.4.2 (aka. the version number) in order to ensure your version matches up with mine. But on new projects outside of this course you can omit the version number. 

$ npm install --save react@15.4.2 react-dom@15.4.2

2. Install all of your dependencies 

$ npm install 

3. Run the server 

$ npm run serve 
Installing React as a Dependency
06:52

Make a "Hello World" first. This is the basic HTML shell that we start out with: 

var React = require('react');
var ReactDOM = require('react-dom');

class Search extends React.Component {

	render() {

		return (

			<div className="search">
				<div className="search-bar">
					<input placeholder="Search" />
				</div>
				<div className="results">
				<div className="in-stock">
			        <h2><a href="#">Toothpaste</a></h2>
			        <p>$2.99</p>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor</p>
				     </div>
			    </div>
			</div>
		)
	}
}


ReactDOM.render(<Search />, document.getElementById('app'));


Build Your HTML Shell
08:33

Head over to your product.js file. It's basically a simulation of an API, or another database with a bunch of data. It's pretty straightforward, and you don't need to anything in it. But we want to be able to pull data from it, into our search app. 

The first component we're going to create from our index.js file is our search bar: 

react7

And then let's make sure we log what the user types within the search bar to the console, as well as grabbing that typing event so that it displays the value in the search bar

Capture The Input
06:36

Now that we're pulling in inputs from the user via the search bar, let's actually return some data! 

react9

Pass the Query
09:42

Your code at the end of the video should look like this: 

var React = require('react');
var ReactDOM = require('react-dom');
var products = require('./products.js')


class Results extends React.Component {

	componentWillReceiveProps(nextProps) {
		console.log("Results:" + nextProps.query);
		console.log(nextProps.products);
		
	}

	render() {

		return(
				<div className="results">
				<div className="in-stock">
			        <h2><a href="#">Toothpaste</a></h2>
			        <p>$2.99</p>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor</p>
				     </div>
			    </div>

			)
	}
}


class SearchBar extends React.Component {

	handleQuery(event) {
		this.props.onQuery(event.target.value);
	}

	render() {

		return (
			<div className="search-bar">
				<input onChange={this.handleQuery.bind(this)} placeholder="Search" />
			</div>
		)
	}

}



class Search extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			query: ''
		};
	}

	handleQuery(query) {
		this.setState({'query': query.toLowerCase().trim()})
	}

	render() {

		return (

			<div className="search">
				<SearchBar onQuery={this.handleQuery.bind(this)} /> 
				<Results products={this.props.products} query={this.state.query} />
			</div>
		)
	}
}


ReactDOM.render(<Search products={products} />, document.getElementById('app'));




Search the Product
07:36

1. Create your constructor in the Results component 

  constructor (props) {
    super(props);
    this.state = {
      foundProducts: props.products
    }
  }

2. Add the foundProducts Search function 

  componentWillReceiveProps (nextProps) {
    var foundProducts = nextProps.products.filter(product => {
      return product.name.toLowerCase().match(nextProps.query.toLowerCase()) ||
             product.description.toLowerCase().match(nextProps.query.toLowerCase());
    });
    this.setState({
      foundProducts: foundProducts
    });
  }

3. Send the search results to a new Result component 

render () {
    return (
      <div className="results">
        {this.state.foundProducts.map((product, i) => {
          return (
            <Result product={product} key={i} />
          )
        })}
      </div>
    )
Show Each Product Result
09:16

It's not uncommon to make a components folder, so we can keep things tidy, separate, and readable. Just remember, for each component file, you need to make sure you bring in var React = require ('react');

Also make sure that you export at the end of each component: module.exports = Search;, for instance. 

Make Component Files
03:26

Feel free to go through and make your search engine snazzier with some CSS, but make sure that you make a components folder with result, results, search, and search_bar as separate files. 

Remember: There's no longer any grading, so no need to submit your homework. 

Homework
01:49

The final One Month React projects can be found on Github: 
https://github.com/onemonth/react

Completed Projects
00:03
About the Instructor
One Month
4.4 Average rating
398 Reviews
18,806 Students
8 Courses
Learn Anything In a Month

One Month is an online teaching company started by two Columbia University professors. The platform provides tutorials for entrepreneurs and programmers, including One Month Rails, Project & Product Management, Ruby, Python, HTML, React, Programming for Non-Programmers, and more. The company's name comes from courses that are designed to teach a programming language in 30 days. The company has had over 50,000 users, including employees of Google, Bloomberg L.P., Singularity University and the School of Visual Arts in New York City.