× logo API Integration What is API Fetch Data From APIs Axios-vs-Fetch DataBase SQL/NoSQL Agile and Scrum processes Responsive Web App Desing
  • React-Login/sign Up
  • Top-10 Javascript Algorithms Fullstack interview Q/A Fullstack My Disney Experience logo
    logo

    The roadmap to learn React

    logo

    The library for web and native user interfaces...



    What is React?

    React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". We can build any type of modern web apps such as single-page apps, progressive web apps by using React.

    What are the major features of react?
    - React Features
    - JSX.
    - Components.
    - One-way Data Binding.
    - Virtual DOM.
    - Simplicity.
    - Performance.

    Basic Folder Structure Explained

    When you created the project, you would have noticed that it created a bunch of files. Here I will list out some of the important files and folders that you should be aware of .

    public/index.html:When the application starts this is the first page that is loaded.This will be the only html file in the entire application since React is generally Written using JSX which I will cover later. Also, this file has a line of code. <div id= "root"></div> This line is very significant since all the application components are loaded into this div.

    /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for "source code".

    Like:::
    src/index.js: This is the javascript file corresponding to index.html.
    This file has the following line of code which is very significant.
    ReactDOM.render (, document.getElementById('root'));
    The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root.
    This is nothing but the div element present in index.html.

    src/index.css: The CSS file corresponding to index.js.

    src/App.js: This is the file for App Component is the main component in React which acts as a container for all other components.

    src/App.css : This is the CSS file corresponding to App Component

    gitignore: This file tells git which files it should not track / not maintain a version history for.

    Package.json: This File has the list of node dependencies which are needed.

    package.json: A manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc). This manifest is how npm knows which packages to install for your project.

    Package-lock.json: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project.(You won't change this file directly).

    README.md: A text file containing useful reference information about your project.

    build:This is the folder where the built files are stored. React Apps can be developed using either JSX, or normal JavaScript itself, but using JSX definitely makes things easier to code for the developer :).
    But browsers do not understand JSX. So JSX needs to be converted into javascript before deploying. These converted files are stored in the build folder after bundling and minification. In order to see the build folder Run the following command

    npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents.

    logo