A blog for everybody who loves coding.

How to use react js

In this lesson we will see how to use React js to create your first react application.
For Getting start with React here essentials that should be install in your computer like- Nodejs and a Code editor.
To install Nodejs go to Nodejs official website nodejs.org and download latest version of Node and install it in your computer.
For Code editor we reccomend to download Visual code editor . For it go to visual code studio official website and download then install into your computer.

Create your First React App-

After installing Those essential things It’s time to start learning React by Creating React Application.To create a React js App we have to do some task such as-
1.Create a empty folder for your React Application.
2.Open your command prompt or Terminal and go to the location of your project folder.
3.Type npx create-react-app firstReactApp
example-
4.After running that command npm create a new folder named as firstReactApp inside the Project folder.
5.for starting The created React App type npm start in your Terminal. Then NPM open your a new browser window on localhost port 3000.
The React Application look like this-

Hello world Program in React-

So let’s change the code that say hello React.Follow the steps given below to say hello React-
1.Open the Folder that created by NPM in this tutorial we named it as firstReactApp, so go to firstReactApp folder.
2.Find the src Folder.
3.Open a file named as App.js This file look like it-

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    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>
    );
  }
}
export default App;

4.Replace the all element inside the <div className=”App”>….</div> with <h4>Hello world</h4> for example-

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World!</h1>
      </div>
    );
  }
}
export default App;

Save the file and reload the browser Hurray we have successfully created hello world React Application.

In this post we have saw how to use react js and how we can create our first application in react js.

Keep coding.
Keep smiling:)
See you next lesson.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp