We Believe in The Power of Single Idea
• ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open- source, component-based front end library responsible only for the view layer of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its newsfeed section, but it was released to the public in the month of May 2013. • Today, most of the websites are built using MVC (model view controller) architecture. In MVC architecture What is ReactJS
• 18.2.0 • https://github.com/facebook/react/blob/master/C HANGELOG.md#1701-october-22-2020 React Versions
• HTML ,CSS and Javascript • Fundamentals of ES6 . • Basic Of How To Use NPM(Node Package Manger) prerequisite for react js
• nstall NodeJS and NPM: Go to https://nodejs.org/en/ Download the latest version of NodeJS LTS with Administrator privileges. • Node –v To Create React App
• Create React App npx create-react-app my-app To Create React App
• create-react-app <projectname> • Run project: COPY cd <projectname> npm start To Create React App
Deploy Project On Live Server • set "homepage": url package.json • cd <projectname> • Npm run build
• create-react-app <projectname> • Run project: COPY cd <projectname> npm start To Create React App
• Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following. • JSX • Components • One-way Data Binding • Virtual DOM • Simplicity • Performance React Features
• JSX • JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML like text can co-exist with JavaScript react code React Features
• Components • ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects. React Features
• One-way Data Binding • ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. • data binding in UI is the binding of UI fields to a data model. There are two approaches of data binding : one way data binding and two way data binding React Features
• one way data binding -> model is the single source of truth . whatever happens on UI triggers a message to model to update a part of data. So data flows in single direction and which becomes easy to understand. • two way data binding -> any change in UI field updates the model and any change in model updates the UI field. • one way data binding is better approach because of unidirectional flow of data. Also only model has the access to change the application state. React Features
Thank you! Visit Us 3rd Floor, Mk Plaza Amrapali West Marg, Vaishali Nagar Jaipur-302021 Rajasthan 503,Shri Kriti CGHS,Plot No.64,Sec.55 Gurgaon -122002,Haryana Call :+91-9057710001,2,6 Email: training@horizonss.co.in http://www.horizonss.co.in/

react js training|react js training in mumbai|

  • 1.
    We Believe inThe Power of Single Idea
  • 2.
    • ReactJS isa declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open- source, component-based front end library responsible only for the view layer of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its newsfeed section, but it was released to the public in the month of May 2013. • Today, most of the websites are built using MVC (model view controller) architecture. In MVC architecture What is ReactJS
  • 3.
  • 4.
    • HTML ,CSSand Javascript • Fundamentals of ES6 . • Basic Of How To Use NPM(Node Package Manger) prerequisite for react js
  • 5.
    • nstall NodeJSand NPM: Go to https://nodejs.org/en/ Download the latest version of NodeJS LTS with Administrator privileges. • Node –v To Create React App
  • 6.
    • Create ReactApp npx create-react-app my-app To Create React App
  • 7.
    • create-react-app <projectname> •Run project: COPY cd <projectname> npm start To Create React App
  • 8.
    Deploy Project OnLive Server • set "homepage": url package.json • cd <projectname> • Npm run build
  • 9.
    • create-react-app <projectname> •Run project: COPY cd <projectname> npm start To Create React App
  • 10.
    • Currently, ReactJSgaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following. • JSX • Components • One-way Data Binding • Virtual DOM • Simplicity • Performance React Features
  • 11.
    • JSX • JSXstands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML like text can co-exist with JavaScript react code React Features
  • 12.
    • Components • ReactJSis all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects. React Features
  • 13.
    • One-way DataBinding • ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. • data binding in UI is the binding of UI fields to a data model. There are two approaches of data binding : one way data binding and two way data binding React Features
  • 14.
    • one waydata binding -> model is the single source of truth . whatever happens on UI triggers a message to model to update a part of data. So data flows in single direction and which becomes easy to understand. • two way data binding -> any change in UI field updates the model and any change in model updates the UI field. • one way data binding is better approach because of unidirectional flow of data. Also only model has the access to change the application state. React Features
  • 15.
    Thank you! Visit Us 3rdFloor, Mk Plaza Amrapali West Marg, Vaishali Nagar Jaipur-302021 Rajasthan 503,Shri Kriti CGHS,Plot No.64,Sec.55 Gurgaon -122002,Haryana Call :+91-9057710001,2,6 Email: training@horizonss.co.in http://www.horizonss.co.in/

Editor's Notes

  • #16 You can remove this slide if you need. But we will strongly appreciate that you help us to spread the voice and let your colleagues and audience to download our free templates. Here are a free resources: Prepare your presentations: SlideHunter.com lets you download free templates for your presentations. Share online: SlideOnline.com lets you upload presentations for free.