What is React?
React
is an open source Javascript library for building dynamic apps. React is a lightweight library for building fast and interactive user interfaces. Unlike Angular, which is a framework (or a complete solution), React
is essentially a ‘view library’. It only takes care of the view or what is rendered in the DOM. It doesn’t have an opinion about other aspects of an app such as routing
, calling HTTP
services, etc. For those concerns, you need to use other libraries. This means you get the freedom to choose the libraries that you’re familiar with or prefer.
React is Declarative
With the help of React, you can make very interactive UI without much pain. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
React Components
Components
are the building block of React apps. A component is a piece of UI. It has data and describes what that piece of UI should look like. When building React apps, we build a bunch of small, independent and reusable components and compose them to make complex UIs. So every React app is essentially a tree of components. If you’ve worked with Angular 2+, this should sound familiar.
React is Component-based Architecture
React is based on
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep
Reusable Components
You can develop reusable components without much hassle.
Prerequisites
We’ll assume that you have some familiarity with HTML
and JavaScript
, but you should be able to follow along even if you’re coming from a different programming language. We’ll also assume that you’re familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
Setting up the Development Environment
Before going to create your first react app, let’s first setup the development environment.
First check, whether you have Node.js
NPM
Node
Once you have installed Node and NPM in your machine, choose your code editor. Feel free to use any editors you prefer. My preferred editor is Visual Studio Code/VSCode which you can get from code.visualstudio.com
Create Your First React App
Once everything is setup, let’s start creating your first react app.
Type the following command to create a fresh new react app.
[crayon-5fdb3b3f2d92f421566027/]This command will create my-app
folder having react app files. Now, go to my-app
folder and type this command.
Now, type this command to run your react app.
[crayon-5fdb3b3f2d940247534134/]This command will show below message in your terminal window, and open the app in browser window. The app http://localhost:3000/
in your browser tab.


React App Project Structure
Now, open your code editor, here I have Visual Studio Code, so I am going to open our my-app in the VS Code editor to see the react app project structure.
This is very basic project structure.

You will node_modules
public
src
my-app
package.json
- node_modules: where all the 3rd-party dependencies (libraries) are stored. We never have to touch this.
- public: where we have public assets of our app such as index.html, logo, images, etc.
- src: where we have the source code of our React app.
Open up package.json. Chances are you’re already familiar with this file. If not, package.json is like an identification card for a project. It includes the project’s name, version, dependencies, etc.
Note that under dependencies, we only have 3 dependencies:

Next is the index.html
page, located in the public
folder. If you do link up any external stylesheets, or need to add bootstrap, or another feature, this is where you would add it.
You can also change the title here. Other than that, you won’t usually need to touch this file very much. You will also notice the div with the id of “root”. This is where all of the content will be output. You don’t need to change that, but just know that it’s there.

The next file you may want to look at is index.js
root

Create Your First React Element
Now, we are going to create our first react element. So, first of all, delete all files from src
folder, and create a index.js
Write the below mentioned code in this file, and save the file.
As soon as you saved your file, our first element H1 will be displayed on the browser window.

Code Analysis
Let’s have a look at above code.
On the top 2 lines, we are importing react modules.
import React from ‘react’;
import ReactDOM from ‘react-dom’;
element
Finally, the last line of code will render our react element.
ReactDOM.render(element, document.getElementById(‘root’));
ReactDOM.render() will render this element in DOM. If you notice, we root
root
element in /public/index.html
file.
<div id=”root”></div>
So, here we learn, how to setup and run our react app very easily without any hassle.
Pingback: itemprop="name">Update Angular 7 to Angular 8 - ZeptoBook
Pingback: itemprop="name">Create A React App With Webpack And Babel - ZeptoBook
And what to do with the database? Is it a must to use the database of MongoDB with Node.js in react or any other option is available for it? I have made a static app using react JS but never experienced with the dynamic application.