Starting with React.js
4.7 (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.
54 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Starting with React.js to your Wishlist.

Add to Wishlist

Starting with React.js

Develop React apps and UIs like the pros
4.7 (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.
54 students enrolled
Last updated 7/2017
Curiosity Sale
Current price: $10 Original price: $100 Discount: 90% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 2 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Code a React with an Online IDE
  • Understand and use React Components
  • Compose Components in React's Component-focused paradigm
  • Use React's State and Props to manage Component data
  • Learn to handle Events in React
  • Implement React's powerful Router
  • Implement Flux to super-charge a React app
  • Style a React app with React CSS & Bootstrap
  • Understand what React is all about, and how it can help you as a developer ... and much, much more!
View Curriculum
  • Before taking this course, a student should ideally (but not absolutely) have some experience in:
  • Creating web UI’s with normal Javascript tools (i.e. jQuery, Bootstrap, ASP.NET, AngularJS, etc.)
  • Programming with a common object-oriented or scripting language (i.e. Java, C#, Python, PHP, etc.)
  • JavaScript development of complete client-side solutions.

Many new or intermediate developers struggle to see how React.js differs from other JavaScript frameworks and libraries, or how it fits into application architecture in general. Simply put, React allows you to develop user interfaces like the pros; and this course will show you exactly how it works.

 Make Interactive UIs with Ease 

  • Understand and use React components
  • Code a React app with an online IDE
  • Learn how React can help you as a developer
  • Style a React app with React CSS and Bootstrap
  • Use Flux, State and Props, Routers and more

 The Must Have JavaScript Library

 This React online course was designed with web developers in mind. If you design UI/UX solutions for mobile or the web, learning React.js will vastly improve how you work. And if you want to design with React as easily as with other JavaScript frameworks, this course is a must.

 This course focuses on building simple components and composing them to create complex, rich, functional component solutions. You'll get to grips with event handling, routing, implementing Flux architecture, and much more to master React fundamentals.

 We start from the very beginning and stick with you every step of the way, kicking off with an introduction to React and getting progressively more challenging as the course continues. Don't worry – you'll soon be working on React projects with ease.

 By the end of this course, you'll be productive and efficient in using this versatile library, and you'll be able to build great looking web apps faster than ever before.You'll walk away with a working knowledge of the framework, it's various facets, and you'll understand how it fits into your process. But most of all, you'll have a valuable and time-saving new skill in your developer toolbox.

 What is React?

 React.js is a JavaScript library that makes building user interfaces simple and painless. It is a view layer rather than a complete framework, so while it's not suitable for building a fully functional dynamic app, it adds the finishing touch to make your websites look flawless. React is maintained by Facebook, Instagram and a wider community of developers and can be used with React-based add-ons or in conjunction with other JS libraries and frameworks.

Who is the target audience?
  • This course was built for web developers who design and build UI/UX solutions for mobile and the web.
  • This course is designed for those developers who want to design with React as easily as they can with other JavaScript frameworks.
  • Of course, the info presented here is just as valuable for architects, testers, and product managers as they too should understand how React is designed and used in a complete web solution.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
43 Lectures
Welcome to Starting with React
4 Lectures 15:17

Downloadable Support Documents here

Let's introduce ourselves to React

Preview 02:12

React is an excellent approach for building scalable, high-performance Web apps with JavaScript

Preview 02:38

Let's undestand what we're going to learn and how we'll learn it!

Preview 03:56

We can get a devlopment environement and a project set up and be ready to begin coding in React

Preparing for React
React Components
6 Lectures 20:10

Components are the core building blocks of React.  Let's learn to create and use them.

Section Introduction

Components are JavaScript classes with logic and presentation

Component Basics

Let's start to code React components

Preview 04:23

React Components are composed with other components.  Let's learn how this works.

Component Composition

Let's write composable components

Composition Implementation

With an understanding of React Component basics we can dive deeper into how they work for us

Section Conclusion
React State & Props
4 Lectures 11:16

State and Props provide data management within and among React Components

Section Introduction

With a clearly defined for managing state and passing data, working with Data in React is simple

Managing Data in React

Let's code State Objects into or Components and pass data among them.

State & Props Implementation

Implementing State and Props for proper, consitent data management in React is a breeze

Section Conclusion
React Event Handling
4 Lectures 09:38

Events in React can be both caught and triggered to drive application logic

Section Introduction

Let's learn to leverage React's event handling capabilities and make our Components react

React-ing to Events

We can code event handling syntax to trigger actions within our Comonents

Event Handling Implementation

Handling events in React is an important part of an application's functionality and binding to events is trivial when we know how 

Section Conclusion
Routing in React
6 Lectures 20:53

Routing is a major feature in React and is quite simple to begin implementing.  Looking further into the API, we find many rich features to make navigation highly functional 

Section Introduction

Let's discover how to configure the Router and routes in a React app

Applying Routing

Let's apply routing in our app and have our view display dynamically

Router Implementation

Basic routing works well for us, but we can advance our configurations to use parameters

More Routing Concerns

Let's update our routing with parameter driven logic

More Routing Implementation

We now know how to stucture effective navigation in an app with React's router

Section Conclusion
React Flux
9 Lectures 51:28

React Flux provides a pattern and a supporting library to add a new dimension to React applications

Section Introduction

The four steps to the Flux model are laid out for us

The Flux Pattern

We can start using the Flux pattern in our app with a partial implementation

Implementing a Flux Store

Adding data to a DataStore is the next step in our understanding of Flux

More Flux Details

We can upgrade our application with the full Flux pattern

Implementing Flux Shoutouts 1

Dynamicly updating our Shoutouts DataStore provides a nice, neat Flux implementation

Implementing Flux Shoutouts 2

Introducing React Forms to our application takes us even deeper into React

React Forms

Our Shoutouts feature is properly designed and coded with React Forms

Implementing a React Form

Understanding and implementing Flux isn't as difficulat as we'd thought.  We now know how the Flux Pattern works within React. 

Section Conclusion
Styling React
5 Lectures 28:29

Styling Components in React can be done in a number of ways.  Let's discover them.

Section Introduction

React has a specific pattern and syntax for embedded styling at the Component level

Component-Level Styling

We can use React's embedded styling, or we can implement CSS

Applying Style

Let's complete our application's features and style them appropriately

Flesh Out Characters

Styling in React can happen with an embedded approach or with CSS, or as we've done, with both

Section Conclusion
Course Conclusion
3 Lectures 05:43

We covered a lot of ground to become familiar and capable with React basics

Content Review

With a solid understanding of basic React, options abound

What now?

Get out there and use React!

Final Thoughts
Bonus Material
2 Lectures 01:19
Bonus Lecture: Certificate of Completion

Bonus Lecture: Course Discounts
About the Instructor
Stone River eLearning
4.2 Average rating
16,628 Reviews
274,986 Students
201 Courses
270,000+ Happy Udemy Students

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 450,000 students currently taking Stone River eLearning courses. We currently offer 100+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.