This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended.
At the end of this course you will:
- Be familiar with client-side Javascript application development and the React library
- Be able to implement single page applications in React
- Be able to use various React features including components and forms
- Be able to implement a functional front-end web application using React
- Be able to use Reactstrap for designing responsive React applications
- Be able to use Redux to design the architecture for a React-Redux application

Taught By

Jogesh K. Muppala

Associate Professor

Transcript

Now that we have scaffolded out our first React Application using create React App, you're obviously, curious about how this application is actually constructed, and how does it correspond to what we see in the browser as we have seen in the previous exercise. So, let's pay a quick visit to the folder, the confusion folder where the application has been scaffolded out, and then take a look at several files that have been created there by the create React App in order to understand the structure of our React application. Taking a closer look at our React Application, you'll notice, what is contained in the view that we see here in the browser. So, you can notice that, there seems to be a logo, that is continuously rotating. There seems to be some text here and then a comment here saying to get started, edit source/app.js to C and save to reload. Now, having seen the structure of that page as rendered in the browser, let's now go to see how this is actually created, by our React Application. So here, I have my React Application open in Visual Studio Code, and in the view here, you can see that in the confusion folder, there are 2 some folders here, public and source. And then we have the node modules folder here. From your previous course, you understand what the node modules folder should contain. And let's pay a visit to some of these files in order to understand the structure of our react application. So, as you would normally do, If you look at a web page, you would be immediately drawn towards looking at what is inside the index.html page. So when you open the index.html page, you can see a few things here where it says link manifest here, and then link shortcut. So this two refer to the manifest, and the favorite icon here, favorite icon here. And then down below here, you don't see anything else being important in the head of the file here, and you see the title of the page as React App. And then as you go down below here, you'll notice that this html page contains nothing except, for this body which contains this div id root here. And then there's no script here. Nothing else here to indicate that this is a React Application. So, that leaves us with very few clues. Let's pay a visit to a few more files, before we come back to see why this index.html page, is structured as seen here. So, after this, let's go into the source folder in the index.js file, and in the index.js file, also you'll see a few imports here and some line here saying ReactDom render app and so on. That's about it. And this again leaves you with no clues about how your React Application is structured. But recall, we saw a comment in the browser window that we just saw a short while ago, which says, edit app.js file. So, maybe that's where all the action is. So let's pay a quick visit to app.js file. And when we come into the app.js file, you immediately notice some things that are familiar from what you have seen in the browser. You can see here this words, welcome to React, and which you obviously saw in the browser window there. And also you saw this to get started edit source app.js save to reload. So you seem to notice that something here indicates that this is sort of giving me the structure of the React Application that I see rendered in the page. And if you're thinking in that direction, you all getting there, but before we dive into the details here, let me introduce a couple of things about the structure of what you see here. Now let me draw your attention to this particular line here. It says h1 classname, app title, welcome to react and then slash h1. This looks like html code. Is it? That something that I will answer in the next lecture. But for the moment, let's go back and see what this represents in React. You saw me drawing attention to this particular line in the code there, which is h1 plus name app title, welcome to React there. Now this is the smallest building block for a React application, what we refer to as a React Element. In this React Element, you're noticing this h1 tag here, which seems to remind you of the html h1 tag. What this represents in React, is plain Javascript object. And so in React, all these elements are plain JavaScript objects, that are very cheap to create and so you can create a lot of them for use within your React Application. Now how exactly do we make use of them, that we will come to as we go through this course. But also, you have heard me using the term component in one of the previous lectures. A component in React is made up of elements like this. And a component in React as you saw in the code earlier, is defined like this. Class App extends Component. Now, having seen this, let's go back and revisit the code and take a closer look. Going back to our code, you'll notice that, in the app.js file, you have a ES 6 class definition here, saying class app extends component. So obviously from your knowledge of ES 6, you'll know that component is some kind of ES 6 class which you are extending to create the app class. What is this component class? So if you look up from here, you notice that, in the very first line, it says import React and within braces component from React. So we are importing this from this React module here. Then component, class from there. And that is what we are using to create this subclass here called app. And then inside this App class, you'll see that there is a single method here called render here. The render method contains, as you can see React Elements that are grouped together. Innovate to create the view that you saw in the browser a little bit earlier. So, this is returned by this render method of this render function of this class component here. So, this is the typical structure of the React component. We'll deal with the React components a bit more in the next lesson where we will look at how you can create React components and so on. But this has already been scaffolded out for us, so that's why I'm drawing your attention to some of these details here. And also, you'll see the header in div and p being defined here, but notice that unlike HTML where we would specify a class, as in class equal to and then we'll specify the CSS class here. Instead, here, we are saying class name. The reason for using class name here is because since we are including this inside my JavaScript code here, if you don't use class name, instead if you just use class, this could be easily confused with this word, the reserve keyboard class that is used by es6 here. So, that is why in React, you would see that we will express any CSS classes that we attach to any element by saying, class name, and then this is of course CSS class here. Now, where are the CCS classes defined? You can open this app.CSS file here and then this is where the corresponding CSS code for all those CSS classes are defined here. So, that will show you how we are making use of this CSS classes inside here and applying them to these various React elements that we use within our JavaScript component here. Again, I have drawn your attention to a few things will come back to, why we define these things this way? And is this real HTML or something else? That, I will answer to you in the next lesson. But for the moment, you can now begin to see why you are viewing the browser is rendering exactly what we are seeing here. Similarly, here, you can see that there is an image with the source as specified as logo and so on. So, this looks very much like HTML code, but it is composed of React elements. Now, having seen the app.js file, let's now go to index.js file. Now, in index.js file, again, let me draw your attention to a couple of things here. So, this is again a JavaScript file here which contains imports of various items from the JavaScript modules here. So, you can see that you're importing React from React, and then you're importing ReactDOM from react-dom, and then you're importing the CSS file here, and then you're importing App from.App. So now, again, going back to App.js, you'll notice that if you scroll down here, it says export default App; So, this app is an export from this App.js file. Also, notice that we are importing App.css here before applying it to our application. Again, switching to index.js, you can now see that your App is being imported from the App that you've just defined here. Let's leave this aside. We'll not discuss this at the moment, but notice how I am including a statement here, it says ReactDOM.render. So, this ReactDOM, as you see, is imported from react-dom and then you're calling the render method of ReactDOM and then for that, you are supplying the first parameter as App. So this is a tag here, the App here refers to this App that we are just importing, and so that is a self closing tag that we have enclosed here, and then the second parameter here that says document.getElementById('root'). Now from your knowledge of JavaScript, document refers to the HTML document that we have seen and then says getElementById('root') here. And so, you can interpret the statement saying ReacDOM.render. This particular thing, and then attach it to this DOM element in my index.html page. Now that we have interpreted this appropriately, let's now go to index.html and page and in the index.html page, let me draw your attention to this particular element in there written div id root here. That now completes the story. So what you can see here is that in the index.html page, I am rendering that particular DOM element, onto this element in my index.html page. So this is going to be replaced by what is rendered by index.js, and put in there in place of that, and which is nothing but what is included inside this app component, which is nothing but what we just saw here which is being rendered by the app component, and this is exactly what we saw being rendered to the browser window that we've seen. So now, you see the connection between all the three items in my React application code that we have seen here, being scaffolded around by Create React App. Again, coming back and summarizing what we have just seen here, how do we render the view to the DOM? So, to render the view to the DOM, as you noticed, we have used this particular statement which is in the index.js file that says ReactDOM.render.(<App/>, document.getElementByld('root'). And so, that is how we render that into the index.html page. And furthermore, where is it rendered? As we have seen, this is the div which is going to be used as the Root DOM node onto which that dom elements created by my app.js is rendered in my page. And so, that is how the view of your React application gets created. So, now that we have seen all these different parts, you'll see how the whole thing comes together to render our React application. With this quick examination of what we have just scaffolded out, the React application, we'll now move onto the next lecture, where we'll look at more details about this curious code HTML-like core that we saw in the app.js file, and then understand why we write the code that way, and what is the HTML-like code doing inside my JavaScript file.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.