Getting Started – React

Also named as a single page application and it’s a JavaScript library to build user-interfaces. So, we can say react is basically used for front-end designing, developed by Facebook. You only need to have lit bit idea about HTML, CSS and JavaScript languages. 

How it works

It creates a virtual DOM (Document Object Model) in to memory. All the manipulation will be done in this virtual DOM and at the last into browser’s DOM. 

Setting up React environment

To start with react, one need to install node.js in the system. Create a new application by using

npx create-react-app app_name 

If there is an error or you have already installed create-react-app globally then just uninstall by using 

npm uninstall -g create-react-app 

And again, run above command to create your new react application. It will include some default html code to show on the browser. To run the application go to the project directory and then run by using below commands: 

cd app_name 

npm start 

A new browser window will open with the default html code and look like below screen: 

Open your app in code editor like VS code and go to src folder. Open App.js file and you will see the html content here. Change the content of add something, just save the file and your browser will refresh automatically with the changes you made. Default App.js will look like below code: 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

To show only a title or some paragraph, you can remove the imports of logo and CSS file. If you have another files, you can import them here and easily use into the code.