Header Ads

ad728

REACTJS GETTING STARTED

November 10, 2020 4


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.

Setup Option 1: Write Code in the Browser

This is the quickest way to get started!

First, open this Starter Code in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial.


You can now skip the second setup option, and go to the Overview section to get an overview of React.

Setup Option 2: Local Development Environment
This is completely optional and not required for this tutorial!


Optional: Instructions for following along locally using your preferred text editor
Help, I’m Stuck!
If you get stuck, check out the community support resources. In particular, Reactiflux Chat is a great way to get help quickly. If you don’t receive an answer, or if you remain stuck, please file an issue, and we’ll help you out.


Now that you’re set up, let’s get an overview of React!

What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

React has a few different kinds of components, but we’ll start with React.Component subclasses:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />
We’ll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.

Here, ShoppingList is a React component class, or React component type. A component takes in parameters, called props (short for “properties”), and returns a hierarchy of views to display via the render method.

The render method returns a description of what you want to see on the screen. React takes the description and displays the result. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div'). The example above is equivalent to:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
); 

Introduction to ReactJS JavaScript Framework

This is a ReactJS tutorial for beginners to understand the basics and basics of ReactJS. The tutorial was written by app developer Orilio de Rosa on tellerik.com. This tutorial discusses the reverse axial principles such as Oriole Virtual Dome, Server Side Rendering, Data Binding, React Components, Indicators and State, JSX Syntax and finally explains how to use React JS. How to make Hello World application.

Using Todo Application React and Flux Architecture

This tutorial is for intermediate level users who are already familiar with the basics of ReactJS. In this tutorial, Chris Harrington builds a simple Todo application using ReactJS and Flux architecture. This tutorial covers two key aspects of application development: user interface visibility and access to data. You will learn how to present multiple ideas using Racket JS and how data is accomplished using Flex Architecture with the help of Religion Server.


Respond to apps using Flux and Backbone

This tutorial was written by Elect Rutri on Total.com and is not for the faint of heart. In this tutorial, Alex talks about the most powerful concepts and patterns for creating racquet JS apps using Flux and Backbone.

The Backbone Library is used to fill the gap in the Flex architecture, so if you have already tried your hand at creating Racket JS Apps with Flex, you can quickly grab it.

5 practical examples of learning

This tutorial is for you if you are a person who believes in walking around with a code of conduct and examples to learn instead of going too far on the principle.

This React JS tutorial was written by Martin Engloff on TutorialZine.com and features an image app with five examples of JS fiddle code - timer, navigation menu, real time search, order form and Ajax.

Tags:
Author Image

About kahelath

4 comments:

Subscribe to: Post Comments ( Atom )

Post Bottom Ad

ad728