Basics of React by Humanitarians AI Fellow Raghu Teja | Powered by Bear Brown & Company
A comprehensive React primer covering what React is, its key features like JSX and the virtual DOM, environment setup, and a hands-on counter app built with useState.
Most React tutorials jump straight into code, but skipping the theory tends to leave beginners typing syntax they don't actually understand. This nearly 35-minute walkthrough by Humanitarians AI Fellow Raghu Teja takes the opposite approach: it starts with what React is and why it matters before opening a single file, then moves into a full environment setup and a working counter application built live.
What React actually is
React is described as a declarative, efficient, and flexible JavaScript library for building reusable UI components. It lets developers assemble complex interfaces out of small, isolated pieces of code called components. The video's running example is a video player interface made up of a thumbnail component and a like-button component, both reusable pieces that can be combined to build out screens, pages, and full applications. React was originally developed by Facebook in 2013 and now powers products like WhatsApp and Instagram, though its use today extends far beyond those two apps. There's also React Native, a separate framework built on the same principles for creating mobile applications.
Why React exists: the virtual DOM
The main reason to reach for React is speed. Before tools like it existed, even a small interaction, clicking a button, updating a form field, would often trigger a full page reload, an expensive operation in terms of both processing time and user experience. React solves this with the virtual DOM, a JavaScript object that represents a lightweight copy of the actual page. When something changes, like a like button being clicked, React updates the virtual DOM first, compares it against the previous version, and then updates only the parts of the real DOM that actually changed. That targeted updating is what makes React fast enough to use extensively on both the client and server side, and it pairs with a component and data pattern that keeps larger applications easier to read and maintain.
The five core features
The video organizes React's defining features into five points. JSX, JavaScript XML, is a syntax extension that lets HTML-like markup live directly inside JavaScript functions, rather than keeping markup, logic, and styling in fully separate files the way vanilla JavaScript projects often do. Components are the building blocks of any React application, each with its own logic, and their reusability and scalability are a major reason React scales well on large projects, since the same thumbnail component, for instance, can be reused across many videos rather than rebuilt each time. One-way data binding means data flows in a single direction through the application, which gives developers tighter control and keeps components effectively immutable rather than allowing unpredictable changes to ripple in multiple directions. The virtual DOM, covered above, is listed again here as a feature in its own right, since it's what makes React's approach to rendering distinct. And simplicity rounds out the list: because React is built around small, reusable, JSX-based components, the resulting code tends to be easier to read, write, and reason about, even for developers newer to front-end work.
Setting up the development environment
With the concepts covered, the video moves into a live setup. Getting started with React requires Node.js installed locally, which the video recommends downloading directly from the Node.js website for whichever operating system you're using, Windows, Mac, or Linux, and Visual Studio Code as the recommended editor for a smoother overall experience. Confirming Node is installed is as simple as typing node in a terminal and checking for a version response.
From there, a new project is created with npx create-react-app my-app, run from inside a dedicated projects folder. This command downloads React's dependencies and scaffolds a full project structure automatically, including the node_modules folder holding all the underlying packages, a public folder containing index.html, the page where the entire application ultimately renders inside a <div id="root">, and a src folder containing App.js, where the actual application code lives. Running npm start launches the development server, and the video walks through exactly how the default "Learn React" text traces back to App.js, and how that component gets imported and rendered inside index.js through ReactDOM.createRoot() targeting that same root div.
Building a live counter
To make state concrete, the video clears out the App.js boilerplate, briefly hitting a compile error along the way because a component function must always return valid JSX, resolved here using an empty fragment as a placeholder. From that clean state, the tutorial builds a counter: importing useState from React, creating a count variable initialized to zero, and rendering it inside an <h2> alongside a button. Clicking the button calls setCount(count + 1), incrementing the state by one each time.
The video uses this simple example to explain what state actually is: an updatable structure that holds the data belonging to a component, and one that can change over time based on user interaction. A component that holds state like this is called a stateful component, and it's described as the heart of a React component because it governs both behavior and rendering. To make the mechanism visible rather than abstract, the tutorial adds console.log statements to show exactly when the component re-renders, first on initial page load, and then again on every click, confirming that React re-renders only the parts of the interface tied to the changed state rather than reloading the whole page.
Key takeaways
- React is a component-based JavaScript library that builds interfaces out of small, reusable pieces of code.
- The virtual DOM lets React compare a lightweight in-memory representation of the UI against the real DOM and update only what changed.
- JSX lets HTML-like syntax live directly inside JavaScript functions, keeping markup and logic together.
- One-way data binding keeps data flow predictable and components effectively immutable.
create-react-appscaffolds a full project, includingnode_modules,public/index.html, andsrc/App.js, in one command.- The
useStatehook is the mechanism for adding and updating state, demonstrated here with a simple click counter.
Who this is for
This video is built for complete beginners to React, or anyone who wants a refresher that connects the "why" behind React's design to the actual code. It's a solid entry point before moving on to more applied builds, such as the to-do list app and weather app covered later in the React Basics series from Humanitarians AI.
Full transcript(auto-generated, with timestamps)
[0:00]Hello everyone um welcome to this quick guide on react uh the JavaScript library for building user interfaces so whether you are a beginner or you know looking to brush up your skills well this would be helpful to you know create uh a simple react project and getting up to speed with what react essentially is so react is a declarative uh efficient and flexible JavaScript library you know for building your reusable UI components it lets us create complex uis from small and isolated pieces of code which is called components so here in the example that I provided you uh for the function video so here it returns um jsx uh
[0:47]Inside of which we have a particular component called thumbnail so and like button so these are custom components uh and these are reusable components you know which can be used and and which can also be created based on the requirements of uh the project or uh you know uh we and also the reusability is a big part of react and you know combine this is used to combine uh uh screens pages and applications so this is uh a small overview of what react is then the question comes uh why do we use react so the main objective of using react is to develop user interface bis you know that
[1:31]Improves the speed of the applications so react uses a virtual Dom uh it's a JavaScript object so which improves the performance of the app so the JavaScript Dom virtual Dom is faster than the actual regular Dom so you know when uh the small actions that we Implement on a web page like you know clicking on a button you know getting updates on a form field uh any interaction that the user uh has with the uh web application so usually without react I mean if you go back to the olden days uh the whole application used to reload and this is a very expensive operation in terms of you know the in
[2:15]Terms of the time that's being used and the the time taken to you know accomplish that particular task so what react essentially does is it works on a virtual dor so we do have a virtual tree and uh so uh as you can see here uh in this particular example we have a div right so instead of the div we do have the a tags and we do have the thumbnail component and we don't have the like button so if we consider this particular fragment as uh an isolated piece of code so for example tomorrow if you were to make a specific change for this
[2:49]Particular component for example you've clicked on the like button click the like here usually the operation is that uh to implement this particular State change the whole application use to reload so with react we have this virtual Dom through which only this uh this particular uh uh this particular piece of code uh is changed and U the state change is implemented in the virtual dorm so we can use react on the client and server side and um this you know extensively and uh improves the performance of the application so it uses uh the component in data P patterns and which you know can which can improve
[3:34]The readability and you know this helps to maintain larger applications so yeah so what is react so like I mentioned react is a declarative efficient and a flexible JavaScript library for building reusable UI components it is open source and it's a component based frint Library which is responsible for the view layer of the application so it was initially developed by Facebook in 20 13 and it's used in its products like WhatsApp and Instagram so it's not just um you know U restricted to these two applications in today's world react is widely used by different applications as their view layer because of its um you know univers
[4:19]Universality of uh uh its uh the ease of use and the intuitive nature of the application of the framework on as a whole and we also have a react native Library you know which is used predominantly to create mobile applications so that is another u a framework of react so why do you use react like I mentioned the main objective is to develop user interfaces which improves the speed of the applications so like I mentioned virtual Dom is a very important part of react which uh you know improves the performance of the application so what are the features of react so coming to the features of react we
[5:02]Have uh uh jsx and uh we do have the components there's one way binding data binding um virtual term uh the Simplicity of the framework and the performance so coming to jsx jsx stands for JavaScript XML so it's a JavaScript syntax extension so it is an XML or an HTML like syntax uh used by react JS so this syntax is processed into JavaScript calls for of react framework so you know you know it kind of makes sure that HTML like text can coexist with the JavaScript react code you know essentially in um vanilla JavaScript projects we do have the JS files the HTML file and the CSS files uh you know
[5:50]All separated with within the own within the project so what GSX does is uh inside of a JavaScript function um like this instead of this uh function you know you can return a complete uh HTML like syntax so this is jsx you're incorporating HTML like syntax inside of the jav inside of the JavaScript function so this is one of the advantages of react so you know you can Implement uh what the view is going to be instead of the function so it's pretty Dynamic and gives the developer more control on how um they can Implement a particular comp component more effectively and efficiently um coming to the second
[6:33]Feature it's the components so like I mentioned react is it's all about components so reactjs application is made up of multiple components and each component has its own logic and controls and the confidence you know can be reused and which can you know help us maintain the code when you're working on large scale projects so one reason why react is so popular and was so widely used is because of the reusab ility and scalability of these components so for example like the example that I provided you here so as you can see uh here we are implementing a thumbnail component and uh we're also having a like button
[7:11]Component so if you were and this is an isolat to one particular video for example so if you were to uh have multiple videos the same component of thumbnail can can be used multiple times for example if you have three videos we can have three different three components uh the three same thumbnail components and the like button components as well so that's the uh benefit of uh uh having components the reusability and the scalability of uh those components uh the third point is uh the oneway data binding so react is designed in such a way in such a manner that follows unidirectional data flow or
[7:54]Oneway data binding so the benefits of this oneway data binding is that it gives uh the developer a much better control throughout the application so if the data flow is in another direction or then it kind of requires additional features so it's because components are supposed to be you know immutable and the data within them cannot be changed so so we uh that is one of the reasons why oneing is uh used in react so uh we can see that there's a there's a pattern called so it you know keeps uh the data unidirectional and it makes the application more flexible and it leads to
[8:38]Efficiencies uh and the fourth point is virtual Dom uh the virtual Dom it's an object uh represented of the original Dome so it works like a oneway data Bing so whenever any modifications happen in the web application like I mentioned like a click or some form Fields you know are updated based on user activities or the data coming from the back end so the entire UI is rendered in Virtual Dom representation and then checks the difference between the previous Dom representation and the new Dom so on once that has been done the real Dom will update only the things that have actually changed so like I
[9:14]Previously mentioned that sometimes you know uh only a particular component of the whole uh web page uh you know is under a change so the whole web page uh need need need not be you know completely refh test or rendered in Dom that's the reason we have virtual Dom where in all the re-rendering is taking place so the real Dom uh you know it'll only cross check uh uh uh the changes that have happened and only the things which have been changed get updated so this makes the application faster and there's no wastage of memory and the fifth point is Simplicity um so like I
[9:56]Mentioned react JS uses GSX file file which makes the application very simple to use and code and as well as to understand so we know that reactjs is a component based approach which you know makes the code reusable as we need so this makes it uh simple and easy to learn so coming to Performance uh reactj is a very is a very good performer uh and and you know it's much better uh suited in performance compared to other Frameworks and uh of course we do have uh uh great new uh Frameworks coming out like next year is uh and we also have angular from Google but uh comparatively
[10:37]On the universality and also the ease of use the intuitiveness and um if someone were to start out on their first web development application uh react would be a very good place to start because it you know creates this foundational uh knowledge and it incorporates all the bu building blocks of web development especially on the front end side and uh uh yeah that's pretty much it for the react features so um coming for the example um let's first set up our environment um so what we can do is uh we'll start with creating a basic application and um let's get on with that so let's create a basic application
[11:30]So for that uh let's set up the environment to start with react we'll need nodejs installed uh on our computers or the uh on our personal machines so uh if you have uh a Mac or a windows so it doesn't really matter you would have uh you need to have Visual Studio code installed so this I mean this is uh the um uh IDE that I would um recommend to any New Comers or beginners you know this would you know give them a much better uh all around experience you know for web development or uh for web development so after you start Visual Studio code you know you can just go to
[12:14]The terminal start a new terminal and all you can do is just type node so if node is installed on your computer it just says that you know welcome to nodejs version so and so so if it is not I would suggest you to install node uh it's better that you go to uh the nodes website nodejs nodejs installation and uh you can just choose whatever uh OS that you're using whether it's Windows Mac Linux it's better first download node and then proceed with the uh react development so so now that we've confirmed that we have uh node installed in our computers so let's start with
[13:08]The uh application creation so so let's create a new react project so let me go to so first let me see what all do I have uh okay okay so so these are the files I have so let me go to my documents inside documents I do have a a file called a folder called react projects so let me go to the folder react projects and here let me create uh a new application react application by typing npx create react app my app so uh this is the standard uh procedure that you know you need to follow to create uh a new react
[14:18]Application so with this command npx and create react app you this initializes and creates a react app uh uh downloads all the documentation of react and um it creates a project for you and um yeah and my app is the name that I gave here and you can give any name uh for your application but for now I've given the name as my app so let's go ahead and uh start it so like you know you're seeing that it's creating a new react application in this particular directory and it's installing the packages and U like create react Dom react scripts so so that you know it's
[14:58]Much easier for uh react development so now once uh and it takes a couple of minutes to do it ideally but I think uh yeah so let's wait okay all right I think it everything is uh installed well and as you can see it's saying success created my app at this particular directory inside the directory we can run several commands like npm start npm run build npm test and npm run eject so for now I think we would not need all all these three but what we need is npm stat so because this is what starts the development so let's look at the directory um okay
[16:05]Let's just open the folder documents react projects um my app okay so as we can see here so there are a couple of folders and files that which are installed which are for us here so we can see note modules node modules are very important so these are the standard packages uh uh node packages which we know which are installed and are very basic and essential in creating re applications so all of these are packaged and bundled together in this particular folder called not modules and here we have the public folder in which we have uh the basic index.html and um we can delete all the
[16:55]Other ones we really not need all of those and index HTML is very important because this is where our whole application is going to be rendered and if we can see um just expand this okay so this is the basic uh um react uh HTML and here all that everything that we're going to render is going to be rendered here inside of this inside of the body inside of this diff id. R so this is where the whole rendering is going to take place and in Source inside of source we have uh the files for CSS app.js so this is where the rendering is taking place uh so this this is what the
[17:48]ACT this is what is being rendered I'll I'll just show you in a second so if we start this application so to start the application all we have to do is we have to go to that uh folder where we have installed uh where where our project is so for example so it has already it's already inside the folder which is my app so if it is not all you can do is you CD type CD and go to that particular uh folder wherever you are so now that I'm inside of my folder all I'm going to do is npm start so it's running the development
[18:24]Server and um yeah as you can see comp successfully and says it's you can view the my app in the browser and this is the URL so let's copy it here let's start it there you are so this so we just seeing this okay what is this I haven't coded anything but why we seeing this it's because of this so as you can see in the source We There is this uh uh app do uh this is app function and this function this function is returning something if you can see so but there's some text here it says edit source appjs and app.js and save to reload as you can
[19:13]See this is the text which is being rendered learn react learn react so this is what is being uh rendered and how so where is this and here we're seeing export default app so we are exporting this app uh function so as a component but where where are we exporting it to so in react uh what we're doing is we create uh components we create functions and we export them so we then import these particular functions uh for our use for our specific use cases so for example this index.js is where uh the root uh uh rendering is going to take place so for example we are first initializing our
[20:04]Root so how are we doing that we want to we using react Dom so react and react Dom are installed as packages when we creating the react application so that's that so we using reacton do create root and we are getting the root element so that is document doget element by ID the root so why is this U there by default let it's not there by default it's not pretty random as I've shown you before we already have this in our HTML which is this div ID root so this inside of this is our whole application inside of this particular div um um our our whole
[20:45]Application runs so this is where the whole thing is and um so we' initialized it inside of root and inside and we're seeing root. render so we seeing inside of of this R render all of this we're going to render app component and for that we are importing the app component froma which is app.js so we importing it so that's the advantage of creating components so we just created it we exported it and just because we need it we going to Ender it now if I delete it if I delete app from this you really can't see anything pan go on I put it back it's back
[21:30]Okay react strict mode um and Report vit these are not really important for now so this this a basic understanding of what react is so I think you would uh probably get an idea of what react is going to be so uh as in more as in we'll keep increasing the uh the information that you know we can uh you know create or the data that U the application that we can create through incremental steps so first let's study this app.js so this is all there is so what we can do is so this is an a tag as you can see the learn react is an
[22:11]A tag so there is a link so if you click to it if we click this particular link we going to react. Dev so it's what uh it's asking us so react. org so that is the old uh uh you so I think it redirect redirects to react. right now so let's remove all of this for Simplicity purposes let's remove all of this and so when I remove all of this there is a there's an error whoa there's an error it failed to compile so the reason why it failed to compile is that uh it always so when you're returning a function uh it always
[23:09]Expects uh jsx tags so we use this some we use something called fragments so these are like placeholders so this you know kind of not wring anything it's it is a convention to you know use fragments to signify that this is an empty component so now we do not have any um uh errors we just have uh compilation one so yeah so it's fresh so what we can do now is let's create a counter let's create a counter so what we can do is so like you understand so by counter we can just create a particular uh counter and whenever we click on a particular button
[23:54]The count has to increase so let's let's work on that so so this example will kind of demonstrate the power of reacts State Management and we'll start modifying uh the app.js to include a counter that increments every time we click the button so the basics are let's import react US state from react okay so inside of the app inside of the function we can create a state so to create a state what we can do is we'll use const set count to set the use state to zero so wow we got errors here okay so why did we get errors here okay it's because instead of count I said count so uh
[25:06]React is very strict uh in terms of um the uh any errors that we do so we always have to be very conscious conscious of what we're typing and uh how we doing it yeah let F so here we using the use State hook so hooks are are something you know uh used spe specifically for State Management state is nothing but U the uh the data that we have inside of uh a particular react uh application so how the states are being used and how they are changing it's a very important part of what uh uh uh react application is so in term in in simple terms I can
[25:55]Say that a state is an updatable structure which is used to contain the data and information about the component so the state in that in a component you know can change over time to time so for example in this uh in this function on this component app uh there is I've created a state called count and if sometimes if you realize that okay some of the data in a particular or some of the information in a particular uh component is going to change through the user activity or the UI changes we can use uh um hooks like a use State hook you know initialize a particular uh
[26:32]State and then you know update it over over time and U and a component with a state is known as stateful component and it is the heart of a react component because it determines the behavior of the component and how it will render so they're also responsible for making a component Dynamic and interactive so also another thing that you have to keep in mind is that state has to be kept as simple as possible and U you know it can be set using the set state so uh so for now uh all you're seeing here is UST state so UST state is you know uh uh is just to show the
[27:13]Initial state of uh uh uh of that data of the of U of this particular value which is for count and I've initialized it to zero so what how so we going increment it through user activity so that is the reason we going to initialize this by zero first and through user activity user interaction we're going to update the state dynamically so yeah so let's uh start uh creating a counter so now that we have initialized the state let's create jsx for it so we do have the div and let's create an H2 of counter and in this counter let's display the count so this count
[28:11]Would be increasing we you increment every time we uh click a button so let's have a button and um so we have this button tags and instead of that I'll say on click so on click is a property so which is that you know uh is it's a property which you know which is used to uh specify what happens to this uh comp this particular tag or what happens when you click a particular button so let's implement it so on click what we can do is we're going to set the count like I mentioned we can set state or set count because now we've uh so this is the
[29:02]Variable and this is the function so what we want to do here is as a set count we'll say the count increases by one so okay so let's name this as increment count so now you can see there you go now you can see that this whole component has been U has been rendered and it has been compiled successfully so let's click so before we click Let's uh inspect what's happening and also uh console log what's happening it's and uh as a beginner I'm uh it's very essential to have a console as to log the each and every every step as much as possible so that you know and you
[29:59]Understand what's happening internally and how it all works Let's uh console log the count uh say count yes and uh yeah so let's go to the console here okay so as you see uh I haven't clicked anything I haven't done anything the counter is zero I haven't done anything it's just that I've refreshed the page and you can see that uh I'm also displaying the console log here in the console so that is because uh when you first rendering uh the application the app here instead of index.js the whole function function or the whole component is getting um you know uh rendered before so just a second I I'll create
[31:07]Another console op you know this helps you to uh understand this in a much better way okay let's do this okay so let's click on increment count okay as you can see it's incrementing the count there you so why is this why are we incrementing so why is what is happening internally that uh is making the count go up dynamically it's not that uh the whole uh uh page is uh uh rendered is just that whatever is being changed so what uh all the uh all the states which are being changed only that is being rendered uh for example uh let's have
[32:17]This not Hello cool right yeah so every time you update or every time something is being updated the whole fun uh the whole component gets rendered so what that's one important characteristic of react so that's what we need to keep in mind and as we can see so what is actually happening is that uh whenever I click on uh clicking the each click of the button triggers a rerender of the component and this reflects the new state so uh as you can see when I click on increment count which is this it says on click set the count to count plus one so it triggers this rendering of the
[33:08]Component as because we're using the US state hook and um it increments the count by one which is this and it displays the count here the cter and uh yeah that's pretty much uh the basic uh react counter and um yeah so this is pretty much the basics of what react is what are the different what what is react why we use react and what are the different features of react and um a basic overview of how to set up the environment how to create how to set up a basic project of react and how do we create a simple uh counter application for react so this should have given you
[33:56]A basic uh idea of what react is uh and yeah for any uh additional um knowledge or information that you need to gather you can get it through this particular uh domain Called react. Death it is maintained by uh Facebook uh and it's a community it's an open source uh um uh portal where you know you can you can learn and it has a community has blogs where you know you can have extensive uh data and it's a treasure to of knowledge of react so I believe you have understood uh the basics of react and yeah that's it from me thank you
