Getting Started With React: 2020 Edition

React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

What is React?

React is a UI library built by Facebook. React can be used as a base in the development of single-page or mobile applications.

Prerequisites:

  • Knowledge of HTML & CSS
  • Knowledge of JavaScript

To learn or know about React the above Prerequisites is enough but to build the react app by yourself one should have knowledge about DOM also Node and NPM like how to install and use..etc

So best tool to Learn React as a beginner I believe is CodeSandox. Here one can easily create React Project and manipulate at realtime to see the result.

So Once you logged Into CodeSandbox you will see the window something like this.

codesandbox

Click on the React Section and you will see that a whole New React Project will be created for for.

It may take few minutes to load depending upon your Internet Connection.

codesandbox_2

Once Loaded you will see something like this.

Coming to the File Structure Of React you will See basically To main Folders

  • public
  • src

Public Folder Holds all the Important Files Ex: index.html where your whole react files get loaded, we wont touch the pubic folder if one mess up the files inside it it will affect whole project

Inside src as you see Default File index.js which is like the base inside which you will see an App.js basically it render all the files into the DOM. Inside App.js we can import different Component which we do further.

It also holds css files which is similar to how you do in traditional Website Development .

In React you cannot use regular HTML one has to use JSX(JavaScript XML) which is Combination of HTML and JavaScript. In shot If you know HTML and JavaScript Learning JSX is piece of Cake for you.

In above Image you see in App.js there is H1 and H2 tags which gets rendered into the right screen

Now Lets Create our Own Components(which React is Know for) and see how can we import.

codesandox_3

So first create a file inside src folder with extension .js. First thing is too import React in that file this can be done with following code.

import React from "react";

export default function means that you are exporting the particular function so that is available outside when we import this file

export default function HelloWorld() {
  return (
    <div>
      <h1>This is New Component</h1>
    </div>
  );
}

Anything you will do in React at the end it should be returned.

So inside return as you see we have created a basic div tag and h1 tag which says "This is New Component"

So basically whenever we will use this component it should render "This is New Component" in the screen.

Just Creating file is Not Enough we have to Import it in main App.js file.

codesandbox_4

So we come back to App.js and first we import it

import HelloWorld from "./HelloWorld";

Now we can use this component where ever we require as you can we have used the component in line no 9.

And when you save it you will see the content gets loaded in the web page at right side.

Similarly You can create various components and Import it as per the requirement.

If you followed each steps Congrats you have created your first react app successfully.

Remember we have just scratched the surface of React. Their is alot to learn in react.

Thanks for reading.!!!

Connect with Our Facebook and Instagram Page for more updates.!