Categories
Uncategorized

How to install React.JS

React is used to do changes on web browser what needs to be changed! To use React, you should already be knowing JavaScript, HTML5, and CSS. React can be installed to two ways.

  1. React code can be written directly in HTML page using CDN urls.
  2. React app can be fully installed on your system.

How to add react to a HTML file on your website

It can be done using two files. First is HTML file and second is JS file.

In HTML file,

1) Create a div and give it id, for example:

<div id="like_button_container"></div>

2) At the bottom of page’s body, add CDN urls and url to link JS file:

<!– Load React CDN –>

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<!– Load our React component JS file –>
<script src="like_button.js"></script>

In JS file,

1)  Add the starter code. This code could be anything related to your need:

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}

render() {
if (this.state.liked) {
return 'You liked this.';
}

return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}

2) At bottom of the page, add following two lines to attach this code’s functionality to HTML file’s div:

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);


How to create a new React app

To install React on your computer, first there is need to install NodeJS . Once NodeJS is installed, open Command Prompt, select the folder in Command Prompt where you want to install React.JS and run following code: 

npx create-react-app my-app

Once installed, go to my-app in Command Prompt using 

cd my-app

And run the command:  

npm start

It will open the window in your browser which show output of default code written in file located at my-app/src/index.js

To learn React.JS or to make a full app, we can write further code in index.js file.

Whatever changes made in this file, immediately shows in output browser page at http://localhost:3000/ without manual page refresh. 

Leave a Reply

Your email address will not be published. Required fields are marked *