Introducing React

[MUSIC] 0:00 Hi everyone. 0:09 I'm Guil, a developer and JavaScript teacher here at Treehouse. 0:10 In this course, I'm going to teach you the fundamental concepts of React. 0:13 A JavaScript library for building user interfaces. 0:17 React introduces a more efficient and flexible way of building, organizing and 0:20 maintaining your UI code. 0:25 One of the main benefits of working with React, 0:27 is that it lets you build your application's user interface by 0:30 breaking it up into small reusable pieces of code called components. 0:33 For example, 0:38 let's say that you're building a book review app using only HTML and JavaScript. 0:38 You'll almost likely create the UI by combining elements like divs, 0:43 spans, inputs and others. 0:47 There are sections or pieces of the UI that you will likely reuse over and 0:50 over again. 0:54 For instance, there might be a star rating widget and a comments area for 0:55 each book review. 0:59 While those sections are composed with HTML elements like divs, headings, 1:01 paragraphs and images, each section can be thought of as a self-contained component. 1:06 React provide tools for us to create our own custom components, 1:12 then quickly compose or combine them together to build complex interactive UIs. 1:16 This means we can design, build, even test a component once and 1:21 then reuse it as needed in our application. 1:25 The other big benefit is that React keeps your application's data or at state and 1:28 the UI in-sync and can efficiently update you UI when data changes. 1:33 This is one of the most difficult parts of building interactive user interfaces. 1:37 When building UIs with JavaScript, we often have some sort of data model. 1:41 For example, we might use arrays and objects to describe our data. 1:46 In the book review app for instance, reviews might be represented as an array 1:49 of objects, with each object being one book reviewed. 1:54 Imagine maintaining an application with hundreds or thousands of reviews. 1:57 The programming or bookkeeping needed to manually keep visual elements like 2:01 comments and ratings for all reviews in-sync with their JavaScript data model, 2:05 can quickly go out of control, specially as you add more and more features. 2:09 So React includes clever features that remove much of the complexity around 2:14 building your UI and keeping it in-sync with your application data. 2:18 Allowing you to focus more on what your application should look like at 2:22 any given moment, instead of how to change it over time. 2:25 You're gonna learn more about components, applications state, organizing and 2:29 managing your UI code and other core features of React, 2:34 as you progress through this course, building your first react app. 2:37 Since React makes use of the JavaScript language and 2:41 relies on modern JavaScript principles, 2:43 you should have some familiarity with programming in JavaScript. 2:45 It's really challenging to learn both React and JavaScript at the same time. 2:49 And I don't recommend it. 2:53 So to help you be successful in this course, 2:54 be sure that you've completed the prerequisites and 2:56 review the suggested resources posted in the teacher's notes with this video. 2:59 Also, React changes frequently. 3:04 So make sure that you read the teacher's notes associated with each video. 3:05 Up next you'll get started by learning the ways you can use React in your projects. 3:09

You need to sign up for Treehouse in order to set up Workspace

Sign up