This course will be retired on March 31, 2024. We recommend "React Basics" for up-to-date content.
Start a free Courses trial
to watch this video
React introduces a more efficient and flexible way of building, organizing, and maintaining your UI code. One of the main benefits of working with React is that it lets you build your application's user interface by breaking it up into small, reusable pieces of code called components.
Resources
Recommended courses
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up