React is a JavaScript library built by Facebook.
It is an open-source JavaScript library built to create interactive user interface.
This library is used in the frontend development.
With react we can develop reusable UI components. React is famous for it’s ease of implementation.
As we can use react in our project as little or as more we need, means we can add small components of ract to our existing HTML project, or create a new complex react app with multipe features.
Add React to a Website
Adding react to a website is very easy. It takes less than a minute to do so.
You just need to copy the below three cnd links to your HTML file, and that’s it you can start adding react components to your website.
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
In above three scripts, first two allow us to write the react code in our JavaScript, and the third, is Babel which allows us to use the JSX syntax and ES6 in the older browsers.
Let’s write our first example of react js.
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
</head>
<body>
<h1>My First React JS Code</h1>
<div id="react_component" ></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Awesome extends React.Component {
render() {
return <h2>React is awesome.</h2>
}
}
ReactDOM.render(<Awesome />, document.getElementById('react_component'))
</script>
</body>
</html>
Another Method of Using React JS
Now when you have learnt how to add React JS and its components to a webpage, we can proceed to setting up the react environment, so that we can create our first react app
Setting Up The React Environment
For this very purpose we need to install NPM and Node.js on our PC. You can download them from their respective websites.
After installing the NPM and Node.js we start creating our first react app. To do so we need to install the create-react-app.
Open your terminal or cmd and write the below code
C:UsersYour Name>npm install -g create-react-app
It will install the create-react-app, now we can create our first react app. Let’s name it as awesomereact
Write the below command in your terminal
C:UsersYour Name>npx create-react-app awesomereact
Boom! Your first react is created, Let’s run it now.
First point to the directory with same name as our react app.
C:UsersYour Name>cd awesomereact
Now run the react app.
C:UsersYour Nameawesomereact>npm start
A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.
