Annu Agarwal's Blog
Get Started with React

Get Started with React

Annu Agarwal's photo
Annu Agarwal
·

4 min read

Table of contents

Intro to React

React is a library to build single-page applications. It is maintained by Facebook(meta).
Now, what does a single-page application mean? It means that our application runs without reloading the page again which gives a seamless experience to the user.

If you are someone looking ahead for a career in web development then you can learn React.

React has become one of the popular frameworks because of its principle to 'write once and use it multiple times', which can be achieved by component features in React.

So what are you waiting for, let's get started.

Installation

Quickly install the below to get started:

  1. NodeJs - https://nodejs.org/en/download/

  2. VS code - https://code.visualstudio.com/download

  3. React Developer Tools

    Consider adding the below extensions on VS code to make your life easier:

    1. Thunder Client

    2. ES7 React/Redux/GraphQL/React-Native snippets

    3. Bracket pair colorizer

    4. Auto Rename Tag

    5. Live Server

    6. Prettier- code formatter(optional)

Creating the first React app

npm - node package manager is used to install packages in nodejs

npx - allows using packages without downloading, its like renting package features

Command to create React project: npx create-react-app my-app

Once the project is created you will be able to see the below file structure:

Node Modules- Contains all the packages used by the project

Gitignore- Used by git while pushing code(Details of what should not be pushed)

package.json & package-lock.json- contains declaration of packages

README.md - We modify this when we push the project in GitHub to give basic information about our project

So here most important folders are-

public and src

In src - we add our react components here

The most important file inside the public folder is index.html

we can delete or modify the rest of the files but as a beginner, you are suggested not to modify index.html because the whole content will be rendered from here and if you make any mistake it will not be rendered.

With the help of javascript the div with id as 'root' will be populated.

Now let's talk about the src folder. Here we have the App component and index.js as entry points which render App.js to root.

Let's jump into the command to run the project(make sure you are pointed to the project directory before running this command):

npm start

You will be able to see in localhost:

Now let's modify App.js to check if the changes will be rendered:

Save the file to get compile and check the browser:

npm run build -- used for a production build.

Previously npm create-react-app was used to create a class-based component now it creates a function. If you are not confident about file structure and terminologies used, don't worry we are going to cover it all.

Javascript Refresher

Now, yes javascript is a prerequisite to start with React. You should know at least the basics of JS to start with React.
Here you can get a list of all the important javascript concepts you must know to work with React. You can have a brief idea about these topics.

  1. Data types - numbers, string, boolean, undefined, null, objects

  2. const, let, var

  3. Arithmetic operators

  4. Functions

  5. JS string methods -

    String length
    String slice()
    String substring()
    String substr()
    String replace()
    String replaceAll()
    String toUpperCase()
    String toLowerCase()
    String concat()

    String trim()
    String trimStart()
    String trimEnd()
    String padStart()
    String padEnd()
    String charAt()
    String charCodeAt()
    String split()

  6. JS number methods:

    toString()

    Returns a number as a string

    toExponential()

    Returns a number written in exponential notation

    toFixed()

    Returns a number written with several decimals

    toPrecision()

    Returns a number written with a specified length

    ValueOf()

    Returns a number as a number

  7. Arrays

  8. Arrow Function

  9. Conditional operators

  10. Loops

  11. Callbacks

  12. Promises

    If you are interested to learn about the core concepts of javascript you can refer to a very good playlist by Akshay Sahini. Link below:
    https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=1&t=0s

If you don't understand a few concepts of JS for now even then you can continue learning React. We will discuss React in the easiest way so that it can be understood better.

Stay tuned until the next blog and don't forget to post your reviews and queries in the comment. Thanks!!

Web DevelopmentReactbeginnerreact jsJavaScript