Let's take a look at the index.js file now. Following that, we have the header and then the image, and notice on the image source that we have our logo, which is actually a javascript variable that we imported at the top, so we must surround it with curly brackets in order to use the javascript within JSX, and then we have a paragraph, an anchor tag, and that's it for this component. Following that, we have a regular javascript function called App, which is known as a functional component in react, and this function returns a react-element that looks like HTML but is actually a jsx, as you can see there is a div tag with a className of APP, which we can't say class by itself because the class is a reserved word in javascript, so we have to use className in jsx. In this situation, we're simply using regular javascript to import react from react and logo from our logo. Look in the src folder for some stylesheets, javascript scripts, and SVG files.
#NOTEBOOK APP CODE#
Remember that all of our source code is housed in the src folder, and react will inject it into the root div element. So you're undoubtedly curious about the source of the content. Inside our body tag, you'll find a div with the id root, followed by the fallback noscript tag, which will only be visible if the user's browser doesn't support javascript. So far, it appears that this is a regular HTML file, replete with head, body, and meta tags. Then there's the public folder, where the index.html file is the only thing that matters.
![notebook app notebook app](https://www.sellmyapp.com/wp-content/uploads/featured_image56f12f1bdda3a.png)
All of our node dependencies are stored in a subdirectory called node module. Now it's time to look into the file and folder structure that create-react-app provides. Now it's time to start our development server, so simply run npm start and react-app will open in the browser immediately.
#NOTEBOOK APP DOWNLOAD#
Normally, we would use npm to get packages into a project, but here we're using npx, the package runner, which will download and configure everything for us so that we can get started with an excellent template right away. Installing it normally only takes a few minutes. Next, open the integrated terminal and type npx create-react-app react-firebase-notebook The app will be named react-firebase-notebook and will be created in the current directory using this command. Now create a folder and open it in your preferred coding editor.
![notebook app notebook app](http://s3.amazonaws.com/digitaltrends-uploads-prod/2016/12/windows-store-laptop-1200x0.jpg)
We require node js in order to use the NPM feature of the node package manager.
![notebook app notebook app](https://francescocolumbu.com/wp-content/uploads/2021/01/Best-Laptop-for-Downloading-Recording-Apps-1024x683.jpg)
To do so, go to the official Node.js website and download the relevant and necessary version.
#NOTEBOOK APP INSTALL#
So, if you don't already have Node.js installed on your PC, the first thing you need to do is install it. Let's get our first react application up and running. You can also view the application's final live version. However, before we begin, the final version of the app should resemble this. We will be creating everything from absolute scratch. In this blog tutorial, we are going to set up and build full-stack notebook applications using react.js from absolutely scratch.