Header Ads

ad728

Reactjs tutorial



React JS is a flexible, powerful and efficient front end JavaScript library for building user interfaces, created by Jordan Walke, a Facebook engineer. React is not another MVC frame work, It is simple a library for rendering your views, It is very popular front-end JavaScript library these days. It deals with View in the MVC, React is much faster. ReactJS can be used in the development of single-page applications and mobile applications. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC

BASIC REQUIREMENTS TO LEARN REACTJS


1. Basic HTML skills
2. Basic CSS skills
3. Intermediate JavaScript Skills
4. Basic NodeJS skills

WHO IS USING REACTJS?


Facebook
Netflix
Instagram
Dropbox
WhatsApp
The New York Times


BENEFITS:


Single Page Application.

Whole page remains same but few components change.

Easy to Learn, Easy to Use.

Code is very easy to maintain.

It is awesome for SEO  and mobile friendly .

It’s Easier to Write with JSX.

It ensures faster rendering.

Quickly Debug Faults.

ReactJS save 50% of your time.


IMPORTANT REACT COMPONENTS


Another preferred standpoint of React js is it offers the capacity to reuse code parts of an alternate dimension whenever. This is an important efficient impact. ReactJS parts are secluded and change in one doesn't influence the others. When you begin your project with React.js, remember to introduce the official chrome extension of React.js. It makes investigating your application considerably easier.



1st Example of react js With HTML code

Below code copy and paste in your code and run it in your browser.

var ele = <h1>Bootstrpaguruh1>

<!DOCTYPE html>
<html lang="en">
<title>Bootstrapguru</title>

Load React API

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

 Load React DOM

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

 Load Babel Compiler

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<body>

<script type="text/babel">

   JSX code goes here

</script>

</body>
</html>


2nd Example


<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<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>

<body>
<div id="id01">Bootstrapguru</div>

<script type="text/babel">
ReactDOM.render(
  <h1>Bootstrapguru </h1>,
  document.getElementById('id01'));
</script>

</body>
</html>

No comments

Post Bottom Ad

ad728