Skip to main content

React 

              -Is a java script library for build user interfaces.


              -Used to create single page applications.


              -Allows us to create reusable UI components.


              -Every component in react goes through a life cycle of  events.


              -Developed and maintained by Facebook and Instagram.


              -Acts as view in MVC architecture.


              -Classes are considered as components.


              -Simplicity and aim to performance are main benefits.


                                            Main features in React


(01)One way data flow

Data flows parent component to child component only.

But action flows from child component to parent component only.



 (02)Virtual DOM

 React maintain a virtual DOM.

Continuously monitoring users actions.

Only the changed element re enter.

(03)JSX

 JavaScript XML.

HTML like syntax.

Prevents cross site attacks.



--------------------------------------------------------------------------------------------------------------------------

                     How to print "Hello World" using React


class Test extends React.component{
           render(){
                     return <h1>  Hello World  </h1>;
           }
}


--------------------------------------------------------------------------------------------------------------------------



              How to setup React Environment to the machine


 In terminal type and run those commands.

 C:\Users\Your Name>npm install -g create-react-app





Give a project name (In here 'myfirstreact' is the project name).

 C:\Users\Your Name>npx create-react-app myfirstreact



Run bellow command to move to the project directory.

 C:\Users\Your Name>cd myfirstreact




Run this command to execute the react application.

 C:\Users\Your Name\myfirstreact>npm start





Then new window will open in browser with newly created React application.
If it does not open, we want to type localhost:3000 in the browser and get the application.



Small React form 

class MyForm extends React.Component {
  render() {
    return (
      <form>
        <h1>Hello</h1>
        <p>Enter your name:</p>
        <input
          type="text"
        />
      </form>
    );
  }
}
ReactDOM.render(<MyForm />, document.getElementById('root'));

                                       React Components



 Components are reusable and independent bits of code. There are two types of components.

                                            (01).Class components

                                            (02).Function components.


Component name must be start with an upper case letter. As well component has to include extends React.Component statement.

 The component also use render() method





Comments

Post a Comment

Popular posts from this blog

Restful Web Service Restful Web Service  is a lightweight, maintainable, and scalable service that is built on the REST architecture. Restful Web Service, expose API from your application in a secure, uniform, stateless manner to the calling client. Restful mostly came into popularity due to the following reasons: Heterogeneous languages and environments – This is one of the fundamental reasons which is the same as we have seen for  SOAP  as well. It enables web applications that are built on various programming languages to communicate with each other With the help of Restful services, these web applications can reside on different environments, some could be on Windows, and others could be on Linux. Restful Architecture An application or architecture considered REST full or REST-style has the following characteristics State and functionality are divided into distributed resources – This means that every resource should be accessible via ...
Post a Comment
Read more
GitHub link  https://github.com/chamoddissanayake/OnlineFashionStore Group Project - Online Fashion Store There is a use case diagram of the system . This diagram denotes a better understanding about the system online fashion store. It provides who are the users of the system and what are the functionalities of the each user. System Functionalities Main Roles in the system. User Admin Store Manager Guest Only users who logged in to the system can place orders   Once the admin creates a login for the store manager, it should be notified to the store manager via email Admin can create categories for the products The store manager can add products with details to the relevant category and add discounts to selected products User can add products to the shopping cart   Users can purchase the selected products in the shopping cart by selecting the payment method Users can c...
9 comments
Read more
          Application Framework Principles Frameworks In computer systems, a framework is generally a layered structure implying what kind of programs can or should be built and how they would interrelate. An Application Framework composed of a software framework used by software developers to implement the standard structure of application software. To give you an idea, let us consider the below scenario about the chassis of a car or the steel structure of a building. Application frameworks became famous with the growth of graphical user interfaces (GUIs) since these tended to promote a standard structure for applications. Developers usually use object-oriented programming (OOP) techniques to implement frameworks such that the unique parts of an application can simply inherit from classes extant in the framework.  Choosing a suitable framework among the available frameworks can be a tedious task. No...
Post a Comment
Read more