Name: React for Beginners: A Complete Guide to Getting Started
Rating: 4.3 (306 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byOne Month

Last updated 6/2019

English

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

Course content

4 sections • 37 lectures • 3h 41m total length

Start Here4:46
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!
What is React?6: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.
Building a Single Page Application (SPA)5:07
A 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.
The Hard Truth About React2:00
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.

React's Hello World9:48

<!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>

The Clock App13:03

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 Virtual DOM4:24
Resources

The Difference Between Virtual DOM and DOM
What is Virtual DOM
http://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode
Reading More Complex React Applications7:11
Links

To Do List by Chris Nwamba
To Do List by Kirupa Chinnathambi
Install NPM (Node Packing Manager)6:27
Update:

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

A New Social Media App Begins Now!2:13
We're going to start by building an app that displays user profile cards with dynamic status updates.

Planning the Social Media Card6:14

<!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>

Create the Class Card7:55

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 Your First Component4:13
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:
Create All The Components5:23
See if you can make components for our bio, photo, and updates. Follow the same pattern we used to set up our card component.
Installing Babel via Terminal16:06
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
Props5:54
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.
Connect To Our Data2:12
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:

We can do so by specifying it after occupation.
Loop Through Updates8: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.

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.
Homework0:41
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.

Pomodoro Timer1:15
Check out the Pomodoro Timer.
What is the Pomodoro Technique?2:29
Resources

Learning Hack: The Pomodoro Technique
Tomato Timer App
Build the Pomodoro Timer App8:17
Download the Pomodoro Template from the resources!
Build the Pomodoro Component5:46
State3:32
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.

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.
The Component Lifecycle17:11
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:

constructor()
componentWillMount()
render()
componentDidMount()

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

Unmounting

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

componentWillUnmount()
Alert Conditional5:21

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.
Homework2:33
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.

Product Search App2:33
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.
Installing React as a Dependency6:52
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

Build Your HTML Shell8:33

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'));

Capture The Input6:36
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:

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
Pass the Query9:42
Now that we're pulling in inputs from the user via the search bar, let's actually return some data!

Search the Product7:36

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'));

Show Each Product Result9:16

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>
    )

Make Component Files3:26
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.
Homework1:49
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.
Completed Projects0:03
The final One Month React projects can be found on Github:
https://github.com/onemonth/react

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

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.

What you'll learn

Explore related topics

Course content

Week 19 lectures • 1hr

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

2. Looking for the Command Line Crash Course?

Resources

Links

Update:

Week 210 lectures • 59min

Week 38 lectures • 46min

Week 410 lectures • 56min

Requirements

Description

Who this course is for: