What is React and how to build your first hello world app

React is a free, open source front-end JavaScript Library which is used to build user interfaces.

React is ;

- Component Based: It lets you build complex UIs from small and isolated pieces of codes called "Components".

- Declarative: You can design simple views for each state of your application and react will update and render just the right component when your data changes.

Basic Set up and First App

  1. Download and Install Node JS - JavaScript Runtime
  2. VS Code - Code Editor to write your code.
  3. React Developer Tools Chrome Extension - Helps you in Debugging React.

Creating Your First React App - Hello World

  1. Go to the folder in which you want to create your react app.
  2. Run the following command in the terminal

           npx create-react-app your_apps_name
    
  3. Using the above command you will have your react app created.

  4. Now from your project open the file index.js by going to;

    your_project_folder->src->index.js

  5. Replace the already existing ReactDOM.render function call with the following

          ReactDOM.render(
              <h1>Hello World</h1>,
              document.getElementById('root')
         );
    
  6. Go to your project's folder using the following command in your terminal

           cd your_apps_folder_name
    
  7. Start your application in the terminal by using the command;

        npm start
    
  8. This will start the application on localhost:3000.

  9. Your hello world app is ready!

image.png

Appendix

npx npx is a command available in npm starting version 5.2.
It allows you to run commands without first installing them.

Create React App Create React App helps you create the basic structure of your App.

  • Sets up developer environment by providing the necessary files and folders, so that you can use the latest JavaScript feature.
  • Provides a nice developer experience.
  • Optimizes your app for production.

Prerequisites of using Create React App;

  • node >= 14.0.0
  • npm >= 5.6

Best Resources