Header Ads

ad728

REACTJS GETTING STARTED



What is the reaction?
React is a JavaScript library - the most popular book, with over 100,000 stars on GitHub.
Reaction is not a framework (unlike Angular, which has high opinion).
React is an open source project created by Facebook.
Reaction is used to create a User Interface (UI) on the front end.
The response is the optical layer of the MVC application (Model View Controller).
The most important aspect of React is the fact that you can create components that, like custom, reusable HTML elements, can quickly and efficiently build the user interface. Reaction also simplifies how data is stored and handled using state and tapas.

We'll go over all of that and more in the article, so let's get started.

Setup and installation
There are a few ways to set up a react, and I'll show you two so you can understand how it works.

Static HTML file
This first method is not a popular way of determining feedback and it is not how we are going to perform the rest of our tutorial, but it will be easy to know if you have ever used a library like jQuery, and Here's the least scary way to get started if you're not familiar with Webpack, Babel, and Node.js.

Let's start by creating a basic index HTML file. We're going to load three CDNs in the head - React, React DOM and Babel. We're also going to create a Div with an ID called root, and eventually we'll create a script tag where your custom code will live.


index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>



I'm loading into the latest stable version of libraries as of the time of this writing.

Response - High response API
Reaction DOM - DOM combines specific methods
Babylon - a JavaScript compiler that lets us use ES6 + in older browsers
The entry point for our app will be the basic element, called the Convention. You will also see the text / Babel script type, which is required for Babel use.

Now, we write our first code block. We will use ES6 classes to create a reactive element called ES.


index.html
class App extends React.Component {
  //...
}



We will now add the Render () method, the only required method, in the class components used to render the DOM nodes.

index.html
class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}
Inside the return, we're going to put what looks like a simple HTML element. Note that we're not returning a string here, so don't use quotes around the element. This is called JSX, and we'll learn more about it soon.
index.html
class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}
Finally, we're going to use the React DOM render() method to render the App class we created into the root div in our HTML.
index.html
ReactDOM.render(<App />, document.getElementById('root'))
Here is the full code for our index.html.
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>
Now if you view your index.html in the browser, you'll see the h1 tag we created rendered to the DOM.

1 comment:

Post Bottom Ad

ad728