Reactjs workshop

Nov 8, 2018Download as PPTX, PDF5 likes817 views

The document outlines a React workshop covering what React is, its core concepts, and coding with React. It begins with an introduction and overview of React. It then covers key React concepts like components, the virtual DOM, JSX, state and props. Finally, it demonstrates how to start coding with React by rendering a component, using state, and working with forms. Resources for further learning are also provided at the end.

Plan
◎What is Reactjs ?
◎Reactjs Core Concepts
◎Let’s code
2

Hello!
I am Rebai Ahmed
Who AM I ?
➢ React Lover
➢ Someone try to learn new
thing every day
3

I’m web developer
I want to create
this web page :)

Issues !
11
➢Search & modify elements
manually !
➢Data synchronisation!

Short summary
➢A Facebook & Instagram
collaboration.
➢Initial release from 2013
➢114.894 Star in GitHub
14

A library for creating User
interfaces
15

Core Problem !!!!!
20
Separation of Concerns :
➢app/partials/button.html
➢app/css/button.css
➢app/js/directives/button.js

21
➢ SEO Friendly - Components are client side as
well as server side render hence they are SEO
friendly and no 3 rd party plugin required
➢ Coding is simpler because of JSX
➢ Big minds are backing Reactjs

22
➢ Virtual DOM - Reactjs use the concept of virtual
DOM which helps in the performance
➢ Unidirectional Data Flow - Compare to the 2 way
data binding. Reactjs use the concept of
Unidirectional data flow which improve the over
all performance.

Reactjs installation:
Include as a plain Javascript
23

Reactjs installation:
Use live sandboxes
24

27
JSX Components
Unidirectional
Data Flow
Virtual
DOM

React Components
Self-contained reusable building
blocks
of web application
29

React Components
( reusable )
➢Pinterest open sourced its full React
component UI library
30

React Components
( reusable )
➢Office UI Fabric
31

44
React Virtual DOM ?
➢ Keep track of state in DOM is hard !
➢ It’ll be so easier to re-render the whole
DOM on every change
➢ Unfortunately the DOM API is not so fast.

45
React
Re-render everything for
every update

48
React Virtual DOM ?
➢ Use different algorithm with the browser DOM tree to
identify the changes
➢ Instead of creating new object, Reactjs just identify what
change is took place and once identify update that state

49
React Virtual DOM
Re-rendering process ?
➢Build new virtual DOM subtree
➢Diff with the old one
➢Compute the minimal set of DOM
mutations
➢Batch execute all update
DÉMO

51
React JSX ?
➢React components are written in JSX, a
JavaScript extension syntax allowing
easy quoting of HTML
and using HTML tag syntax to render
components
<div>
<h1> Shopping list for
{this.props.name} </h1>
<ul>
<li>Instagram </li>
<li>Whatsap </li>
<li>Oculus </li>
</ul>
</div>

52
React JSX ?
<div>
<h1> Shopping list for
{this.props.name} </h1>
<ul>
<li>Instagram </li>
<li>Whatsap </li>
<li>Oculus </li>
</ul>
</div>

React core concepts :state &&
props !
55

ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW? modern syntax ,better suited for big
applications
59
➢Variable types
➢Arrow functions
➢Modules
➢Classes
➢A lot more…

ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
60
➢Arrow functions

ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
61
➢Template Literals (Strings)

ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
62
➢Classes

ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
63
➢Modules

Thanks!
Any questions?
70
You can find me at:
➢ Rebaiahmed.github.io
➢ github.com/Rebaiahmed
➢ @RebaiAhmed_
➢ rebai.ahmed@outlook.com

Ressources
◎https://devhints.io/react
◎https://github.com/enaqx/awesome-react
◎https://medium.freecodecamp.org/all-the-
fundamental-react-js-concepts-jammed-
into-this-single-medium-article-
c83f9b53eac2
◎https://github.com/TunisiaJavascriptCom
munity/react-in-patterns
71

This document provides an introduction to React.js, including: - React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture. - Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React. - Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.

React workshop presentationBojan Golubović

Getting Started with React.jsSmile Gupta

ReactJSHiten Pratap Singh

ReactJS is a JavaScript library for building user interfaces using reusable and interactive UI components. It uses a virtual DOM for rendering UI components and follows a unidirectional data flow architecture. Major companies using ReactJS include Facebook, Instagram, AirBnB, and Khan Academy. ReactJS advantages include its use of components, JSX syntax, and debugging tools. Components are the basic building blocks and use props, state, and lifecycles. Flux is a common architecture used with ReactJS that involves a central store for managing data in a unidirectional flow.

ReactJS presentationThanh Tuong

Introduction to React JS for beginners Varun Raj

- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes. - Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements. - Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes. - The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.

Introduction to React JS for beginners | Namespace ITnamespaceit

React is a JavaScript library for building user interfaces using reusable components. It is used to create single page applications that dynamically update the current page with new data from the server. React uses a component-based approach and one-way data binding to build interfaces simply and allow for easy testing. Key concepts in React include components, props, state, lifecycles, hooks, JSX, and the virtual DOM. Major companies using React include Facebook, Netflix, Instagram, and WhatsApp.

Intro to ReactJustin Reock

The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.

Introduction to React JSArnold Asllani

React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces called components. Components are like functions that return markup describing part of a view. React uses a virtual DOM to efficiently update the real DOM by only making necessary changes. This improves performance by avoiding expensive DOM operations and minimizing DOM access. Components receive data and callbacks through properties and local state is updated using setState(), triggering a re-render of changed parts of the UI.

React JS - IntroductionSergey Romaneko

React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.

Introduction to ReactJSKnoldus Inc.

React HooksJoao Marins

React Hooks are functions that allow you to "hook into" React state and lifecycle features from function components. Some key hooks include useState, useContext, and useEffect. Hooks make it easier to reuse stateful logic between components and simplify component logic. However, hooks should only be called from React functions and not in loops, conditions, or nested functions. Overall, hooks provide more powerful features to function components and opportunities to write code in a more functional style.

Intro to ReactEric Westfall

React is a library for building user interfaces using components. It uses a virtual DOM for rendering components, which are pieces of UI defined as classes or functions. Components receive data via props and local state, and can be nested to build complex UIs. The component lifecycle includes mounting, updating, and unmounting phases. Data flows unidirectionally down the component tree. React has a vibrant ecosystem and community for continued learning.

Introduction to React JSBethmi Gunasekara

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses virtual DOM which improves performance and can render on both client and server. React encourages a component-based approach where UI is broken into independent reusable pieces that accept external data through properties. Components manage their own state which allows the UI to update over time in response to user input. This makes React code more predictable and easier to debug than traditional two-way data binding.

React js programming conceptTariqul islam

VueJS IntroductionDavid Ličen

Vue.JS is a progressive JavaScript framework created by Evan You, formerly of Google. It was first released in 2014 and is growing in popularity as an alternative to AngularJS and React. Key features include declarative rendering, dependency tracking for automatic re-renders, and directives for DOM manipulation. Developers can get started by adding Vue to an HTML page or with single file components using tools like Webpack. The documentation provides many examples for building interfaces with directives, conditional rendering, forms, and more. While still smaller than communities for Angular and React, Vue has growing support from companies and an active ecosystem of libraries.

React hooksRamy ElBasyouni

The document discusses React patterns and hooks. It covers topics like inheritance, composition, mixins, render props, higher order components (HOCs), and React hooks. Some key points: - Inheritance and composition are approaches to code reuse in object-oriented programming. React uses composition over inheritance. - Mixins were introduced in 2015 for code reuse but are now deprecated due to issues. Render props and HOCs are preferred patterns. - Render props and HOCs allow code and state to be shared across components. Render props have fewer levels of nesting while HOCs are better for applying multiple concerns. - Hooks were introduced to overcome class component limitations and support functional components with local state and lif

Basics of React Hooks.pptx.pdfKnoldus Inc.

Redux Toolkit - Quick Intro - 2022Fabio Biondi

The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.

React jsJai Santhosh

This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.

introduction to Vue.js 3 ArezooKmn

Vue.js is a progressive JavaScript framework that focuses on building user interfaces and is used for single-page applications. It was created by Evan You and released in 2014. Vue.js uses declarative templates and reactive data binding to render the view layer for an application. Templates in Vue use HTML-based syntax with directives prefixed with v- to dynamically bind expression results. Common directives include v-bind, v-if, and v-for. Vue.js applications can be built with its core library or integrated with other libraries and frameworks.

ReactJS presentation.pptxDivyanshGupta922023

React JS is a JavaScript library for building user interfaces. It uses virtual DOM and one-way data binding to render components efficiently. Everything in React is a component - they accept custom inputs called props and control the output display through rendering. Components can manage private state and update due to props or state changes. The lifecycle of a React component involves initialization, updating due to state/prop changes, and unmounting from the DOM. React promotes unidirectional data flow and single source of truth to make views more predictable and easier to debug.

React and reduxMystic Coders, LLC

This document provides an overview of React and Redux. It introduces React as a component-based library for building user interfaces using JavaScript and JSX. Key aspects of React include its lifecycle methods, use of a virtual DOM for fast updates, and functional stateless components. Redux is introduced as a state management library that uses a single immutable store with actions and reducers. It follows the Flux architecture pattern without a dispatcher. Hands-on demos are provided for key React and Redux concepts. Resources for further learning are also listed.

React jsRajesh Kolla

This document provides an overview of React including: - React is a JavaScript library created by Facebook for building user interfaces - It uses virtual DOM to efficiently re-render components on updates rather than entire page - React supports ES6 features and uses classes, arrow functions, and other syntax - Popular tools for React include Create React App for setting up projects and React Dev Tools for debugging

Reactjs BasicsHamid Ghorbani

1) Single page applications (SPAs) use JavaScript to dynamically update the content of a single web page rather than loading entire new pages. This reduces page refreshes. 2) React is a popular JavaScript library for building user interfaces, especially for SPAs. It uses a virtual DOM for faster rendering. 3) Create-React-App is a command line interface that sets up a React project with common dependencies like Babel and Webpack preconfigured.

NextJS, A JavaScript Framework for building next generation SPA Pramendra Gupta

This document summarizes Next.js, a JavaScript framework for building single-page applications. It discusses key Next.js features like server-side rendering, automatic code splitting, prefetching and inline critical CSS. It provides demo links and instructions for setting up a basic Next.js project using npm. Overall, Next.js is presented as a batteries-included solution for building production-ready PWAs with features like routing and optimization out of the box.

Ngrx slidesChristoffer Noring

NGRX provides tools for implementing Redux patterns in Angular applications. The key components are: - The Store holds the single source of truth application state as plain JavaScript objects and uses reducers to immutable update state in response to actions. - Actions describe state changes and are dispatched to the Store which passes them to reducers. Reducers pure functions that return new state. - Selectors allow slices of state to be accessed. - Additional libraries provide debugging with devtools, routing integration, side effect handling, and entity management functionality. Files can be organized by domain or feature module.

React js - The Core ConceptsDivyang Bhambhani

The document discusses React's virtual DOM and how it allows for more efficient DOM updates compared to directly manipulating the real DOM. It explains that the virtual DOM is an in-memory representation of the real DOM that allows React to calculate efficient DOM changes before applying them to the real DOM. This avoids unnecessary re-renders and improves performance. It also describes how React uses a diff algorithm and DOM traversal with breadth-first search to determine the minimal number of operations needed to transform the virtual DOM before updating the real DOM in a batched way.

Reactjs workshop (1)Ahmed rebai

This document outlines a Reactjs workshop covering an introduction to Reactjs, its core concepts, and coding with Reactjs. The workshop introduces Reactjs as a library for building user interfaces, discusses its core concepts including components, virtual DOM, JSX, state and props, and demonstrates how to install and start coding with Reactjs. The document provides resources for further learning Reactjs.

Web summit.pptx171SagnikRoy

More Related Content

What's hot (20)

Introduction to React JSArnold Asllani

React JS - IntroductionSergey Romaneko

Introduction to ReactJSKnoldus Inc.

React HooksJoao Marins

Intro to ReactEric Westfall

Introduction to React JSBethmi Gunasekara

React js programming conceptTariqul islam

VueJS IntroductionDavid Ličen

React hooksRamy ElBasyouni

Basics of React Hooks.pptx.pdfKnoldus Inc.

Redux Toolkit - Quick Intro - 2022Fabio Biondi

React jsJai Santhosh

introduction to Vue.js 3 ArezooKmn

ReactJS presentation.pptxDivyanshGupta922023

React and reduxMystic Coders, LLC

React jsRajesh Kolla

Reactjs BasicsHamid Ghorbani

NextJS, A JavaScript Framework for building next generation SPA Pramendra Gupta

Ngrx slidesChristoffer Noring

React js - The Core ConceptsDivyang Bhambhani

Introduction to React JSArnold Asllani

React JS - IntroductionSergey Romaneko

Introduction to ReactJSKnoldus Inc.

React HooksJoao Marins

Intro to ReactEric Westfall

Introduction to React JSBethmi Gunasekara

React js programming conceptTariqul islam

VueJS IntroductionDavid Ličen

React hooksRamy ElBasyouni

Basics of React Hooks.pptx.pdfKnoldus Inc.

Redux Toolkit - Quick Intro - 2022Fabio Biondi

React jsJai Santhosh

introduction to Vue.js 3 ArezooKmn

ReactJS presentation.pptxDivyanshGupta922023

React and reduxMystic Coders, LLC

React jsRajesh Kolla

Reactjs BasicsHamid Ghorbani

NextJS, A JavaScript Framework for building next generation SPA Pramendra Gupta

Ngrx slidesChristoffer Noring

React js - The Core ConceptsDivyang Bhambhani

Similar to Reactjs workshop (20)

Reactjs workshop (1)Ahmed rebai

Web summit.pptx171SagnikRoy

React nativeNexThoughts Technologies

This document provides an overview of ReactJS and React Native. It defines ReactJS as a JavaScript library for building user interfaces and explains concepts like components, virtual DOM, JSX, props, states, and one-way data flow. It also covers React Native and how it allows building native mobile apps using JavaScript and React. Key differences between Ionic and React Native are outlined. Examples of companies that use ReactJS and React Native are given. Setup and installation instructions for React Native are provided.

Welcome to React & Flux !Ritesh Kumar

This document provides an introduction to ReactJS including what it is, its key features, and how it works. Some main points: - ReactJS is a UI library built by Facebook that uses a virtual DOM to selectively update the browser DOM and improve performance. - It allows building of interactive and reusable UI components in a declarative way. - React uses a one-way data flow and unidirectional data binding which keeps complexity low. - Components are the core building blocks and can be composed to build UIs in a modular way. - The virtual DOM enables fast re-renders by only updating parts of the real DOM that changed.

Why Should You Choose ReactJS for Game Development_.pdfReactJS

Choosing the simplest front-end technology can be difficult for businesses and developers nowadays. There are numerous technologies on the market, each of which is designed to meet specific needs. React JS is one such technology that is now used by almost every company. With the growing popularity of React JS, there has been a significant advancement in the field of front-end ReactJS game development. Before we get too far into it, let's first define React JS.

Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel

Introduction to ReactQuentin Leonetti

Tech Talk on ReactJSAtlogys Technical Consulting

This document provides an overview of React, a JavaScript library for building user interfaces. It discusses what React is, why it is useful, when to use it, and its key features and components. React allows building of reusable UI components in a declarative way. It uses a virtual DOM for better performance and can render on both client and server sides. Key advantages include high performance with large data changes, reusability, and ease of building large, complex UIs. The document also provides examples of building a simple React app in steps and references for further information.

React Tech SalonChenguang ZHANG

React is a JavaScript library for building user interfaces that aims to solve issues with data changing over time in large web applications. It introduces components, re-rendering on data changes rather than mutating data, and a virtual DOM for efficient re-rendering. React uses a unidirectional data flow and one-way data binding that improves design architecture and code reusability. Related technologies like JSX, Flux, GraphQL, Relay, and React Native further enhance React's capabilities.

ReactJS Vs React Native: Understanding Differences, Advantages, DisadvantagesTechtic Solutions

Here's an in-depth comparison of ReactJS vs React Native which will help you to understand the differences Advantages, Disadvantages. Meanwhile, Techtic Solutions is one of the top-notch ReactJS and React Native app Development Company with 10+ years of web development experience. Our teams of experienced ReactJS and React Native app developers are adept at building simple to the most complex website apps seamlessly. Get in touch if you are looking to hire ReactJS and React Native developers to deliver secure, high-performance, and faster web applications. Call us at +1 201.793.8324 or visit us https://www.techtic.com/react-native-app-development/

Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga

Introduction to react nativeDani Akash

This document introduces React Native, a framework for building mobile apps using React. It allows building Android and iOS apps with shared code. React Native uses a virtual DOM for fast rendering. Components manage state and receive data through props. Lifecycle methods handle mounting, updating, and unmounting. Setting up requires Node.js, React Native CLI, and Android Studio or Xcode. Hot reloading, Flexbox layouts, and libraries like Lottie and React Navigation make development easier.

React - Inroduction and Fundamentals.pdffizashahid246

Angular Ivy- An OverviewJalpesh Vadgama

Ivy is Angular's next generation compiler and renderer that aims to make applications smaller, faster to load, and use less memory. Some key goals of Ivy include faster initial loading, reduced bundle sizes, lower memory footprint, improved memory allocation, and faster compilation times. Ivy generates template instructions directly from templates rather than generating intermediate metadata, making the compilation process more efficient. It also uses incremental DOM for rendering, which creates and updates DOM trees using in-place instructions rather than full virtual DOM comparisons on each change. Tree shaking also works more effectively with Ivy due to its generation of smaller, more atomic functions from templates.

Reactjs notes.pptx for web development- tutorial and theoryjobinThomas54

Review on React JSijtsrd

This is a review on react js. Its introduction, how to use it, why to use it. Its uses in the front end development world and its effectiveness and advantages as well. Bhupati Venkat Sai Indla | Yogeshchandra Puranik "Review on React JS" Published in International Journal of Trend in Scientific Research and Development (ijtsrd), ISSN: 2456-6470, Volume-5 | Issue-4 , June 2021, URL: https://www.ijtsrd.compapers/ijtsrd42490.pdf Paper URL: https://www.ijtsrd.comengineering/computer-engineering/42490/review-on-react-js/bhupati-venkat-sai-indla

Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Codemotion

What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...Heiko Voigt

This document discusses using Node.js, React, and Express with Domino V10. It provides an overview of a demo that uses these technologies to build a survey application with a real-time dashboard. The demo includes a Notes/iPad app for surveys, a React frontend, a Node.js/Express REST API, and a Node.js/Socket.io real-time backend. It discusses the benefits of this approach, including scalability, flexibility, and reusability. It also provides recommendations for tooling and resources for learning more.

Introduction to React NativePolidea

React Native is a JavaScript library for building user interfaces that allows developers to build mobile apps using React and write native code for iOS and Android. It allows building native UI components with JavaScript and rendering them using the native platform, avoiding cross-platform issues. While not a hybrid framework, it allows fully integrating with native APIs and using native components while writing application logic in JavaScript.

learning reactEueung Mulyana

The document discusses React, a JavaScript library for building user interfaces. It begins by explaining what React is, its core principles of being declarative, efficient and flexible. It then covers React basics like using JSX syntax, maintaining a virtual DOM, one-way data flow and building reusable components. The document also provides examples of adding state and properties to components. Finally, it discusses thinking in React and walks through building a searchable product table as an example.

Reactjs workshop (1)Ahmed rebai

Web summit.pptx171SagnikRoy

React nativeNexThoughts Technologies

Welcome to React & Flux !Ritesh Kumar

Why Should You Choose ReactJS for Game Development_.pdfReactJS

Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel

Introduction to ReactQuentin Leonetti

Tech Talk on ReactJSAtlogys Technical Consulting

React Tech SalonChenguang ZHANG

ReactJS Vs React Native: Understanding Differences, Advantages, DisadvantagesTechtic Solutions

Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga

Introduction to react nativeDani Akash

React - Inroduction and Fundamentals.pdffizashahid246

Angular Ivy- An OverviewJalpesh Vadgama

Reactjs notes.pptx for web development- tutorial and theoryjobinThomas54

Review on React JSijtsrd

Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Codemotion

What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...Heiko Voigt

Introduction to React NativePolidea

learning reactEueung Mulyana

More from Ahmed rebai (15)

Dev fest GDG beja tensorflow presenatationAhmed rebai

This document provides an introduction to TensorFlow presented by Rebai Ahmed. The presentation includes: - An introduction to machine learning and deep learning concepts. - An explanation of what TensorFlow is and why it was developed. TensorFlow is an open-source library for machine learning and deep learning. - Reasons why TensorFlow is a popular tool, including its ability to run on various platforms, support for distributed computing, use by Google and other large companies, and large community. - Examples of cool projects that can be built with TensorFlow, such as image classification, object detection, speech recognition, and more. - Resources provided at the end for learning more about TensorFlow.

DialogflowAhmed rebai

This document provides an overview of building conversational chatbots using Dialogflow. It begins with defining what chatbots are and discussing their history. It then explains the types of chatbots and how Dialogflow uses artificial intelligence to enable chatbots that can learn from interactions. The document demonstrates how to create an agent and intents in Dialogflow to develop a basic chatbot. It also discusses entities, integration options, and using fulfillment for additional functionality. The presenter provides resources for learning more about Dialogflow and chatbot development.

ReclamiAhmed rebai

Machine learning presentation (gdg beja)Ahmed rebai

The document provides an overview and agenda for a machine learning summit. It introduces the speaker, Rebai Ahmed, and their background and interests in machine learning. The agenda includes introductions to machine learning history, use cases and tools, and a machine learning crash course using TensorFlow APIs. The crash course covers framing machine learning problems, descending into machine learning concepts like gradient descent and reducing loss, and first steps with TensorFlow.

Distributed programing (hadoop && java) version finale.pptxAhmed rebai

Cloud computing presentationAhmed rebai

Tensorflow presentationAhmed rebai

The document is a presentation about TensorFlow. It begins with an introduction that defines machine learning and deep learning. It then discusses what TensorFlow is, including that it is an open-source library for deep learning and ML, was developed by Google Brain, and uses data flow graphs to represent computations. The presentation explains benefits of TensorFlow like parallelism, distributed execution, and portability. It provides examples of companies using TensorFlow and demonstrates cool projects that can be built with it, like image classification, object detection, and speech recognition. Finally, it concludes that TensorFlow is helping achieve amazing advancements in machine learning.

Machine learning presentation (gdg beja)Ahmed rebai

The document provides an agenda for a machine learning summit. It includes an introduction to machine learning and its history, use cases and tools. It then outlines a machine learning crash course covering key concepts like framing problems, descending into machine learning through gradient descent, and reducing loss. Finally, it discusses taking first steps with the TensorFlow library for machine learning.

Gestion du stressAhmed rebai

Life is a pitchAhmed rebai

The document appears to be an outline for a 10 slide presentation, with suggested sections including an introduction, defining a problem, proposing a solution, discussing the target market, describing the business model and features, analyzing competitors, optional marketing suggestions, introducing the team, and a concluding question slide. The brief notes provide high-level guidance on content for each slide, such as telling a story for the introduction, emphasizing pain for the problem section, keeping the solution simple, and including a demonstration of features.

Présentation hack the roadAhmed rebai

Isamm clubsAhmed rebai

Bmy bit presentationAhmed rebai

Chatbots provide an opportunity for new customer service capabilities by being available instantly for user requests. Research shows 57% of consumers are interested in chatbots for their immediate response, and 95% believe chatbots will most benefit customer service interactions. This chatbot allows users to instantly get currency conversions, receive trading recommendations, and has a live demo available for questions.

Rapport pfeAhmed rebai

Final présention [recovered]Ahmed rebai

Dev fest GDG beja tensorflow presenatationAhmed rebai

DialogflowAhmed rebai

ReclamiAhmed rebai

Machine learning presentation (gdg beja)Ahmed rebai

Distributed programing (hadoop && java) version finale.pptxAhmed rebai

Cloud computing presentationAhmed rebai

Tensorflow presentationAhmed rebai

Machine learning presentation (gdg beja)Ahmed rebai

Gestion du stressAhmed rebai

Life is a pitchAhmed rebai

Présentation hack the roadAhmed rebai

Isamm clubsAhmed rebai

Bmy bit presentationAhmed rebai

Rapport pfeAhmed rebai

Final présention [recovered]Ahmed rebai

Recently uploaded (20)

Compiler Design_Lexical Analysis phase.pptxRushaliDeshmukh2

Oil-gas_Unconventional oil and gass_reseviours.pdfM7md3li2

Machine learning project on employee attrition detection using (2).pptxrajeswari89780

railway wheels, descaling after reheating and before forgingJavad Kadkhodapour

ADVXAI IN MALWARE ANALYSIS FRAMEWORK: BALANCING EXPLAINABILITY WITH SECURITYijscai

With the increased use of Artificial Intelligence (AI) in malware analysis there is also an increased need to understand the decisions models make when identifying malicious artifacts. Explainable AI (XAI) becomes the answer to interpreting the decision-making process that AI malware analysis models use to determine malicious benign samples to gain trust that in a production environment, the system is able to catch malware. With any cyber innovation brings a new set of challenges and literature soon came out about XAI as a new attack vector. Adversarial XAI (AdvXAI) is a relatively new concept but with AI applications in many sectors, it is crucial to quickly respond to the attack surface that it creates. This paper seeks to conceptualize a theoretical framework focused on addressing AdvXAI in malware analysis in an effort to balance explainability with security. Following this framework, designing a machine with an AI malware detection and analysis model will ensure that it can effectively analyze malware, explain how it came to its decision, and be built securely to avoid adversarial attacks and manipulations. The framework focuses on choosing malware datasets to train the model, choosing the AI model, choosing an XAI technique, implementing AdvXAI defensive measures, and continually evaluating the model. This framework will significantly contribute to automated malware detection and XAI efforts allowing for secure systems that are resilient to adversarial attacks.

IntroSlides-April-BuildWithAI-VertexAI.pdfLuiz Carneiro

AI-assisted Software Testing (3-hours tutorial)Vəhid Gəruslu

introduction to machine learining for beginersJoydebSheet

15th International Conference on Computer Science, Engineering and Applicatio...IJCSES Journal

"Feed Water Heaters in Thermal Power Plants: Types, Working, and Efficiency G...Infopitaara

A feed water heater is a device used in power plants to preheat water before it enters the boiler. It plays a critical role in improving the overall efficiency of the power generation process, especially in thermal power plants. 🔧 Function of a Feed Water Heater: It uses steam extracted from the turbine to preheat the feed water. This reduces the fuel required to convert water into steam in the boiler. It supports Regenerative Rankine Cycle, increasing plant efficiency. 🔍 Types of Feed Water Heaters: Open Feed Water Heater (Direct Contact) Steam and water come into direct contact. Mixing occurs, and heat is transferred directly. Common in low-pressure stages. Closed Feed Water Heater (Surface Type) Steam and water are separated by tubes. Heat is transferred through tube walls. Common in high-pressure systems. ⚙️ Advantages: Improves thermal efficiency. Reduces fuel consumption. Lowers thermal stress on boiler components. Minimizes corrosion by removing dissolved gases.

Data Structures_Searching and Sorting.pptxRushaliDeshmukh2

The Gaussian Process Modeling Module in UQLabJournal of Soft Computing in Civil Engineering

We introduce the Gaussian process (GP) modeling module developed within the UQLab software framework. The novel design of the GP-module aims at providing seamless integration of GP modeling into any uncertainty quantification workflow, as well as a standalone surrogate modeling tool. We first briefly present the key mathematical tools on the basis of GP modeling (a.k.a. Kriging), as well as the associated theoretical and computational framework. We then provide an extensive overview of the available features of the software and demonstrate its flexibility and user-friendliness. Finally, we showcase the usage and the performance of the software on several applications borrowed from different fields of engineering. These include a basic surrogate of a well-known analytical benchmark function; a hierarchical Kriging example applied to wind turbine aero-servo-elastic simulations and a more complex geotechnical example that requires a non-stationary, user-defined correlation function. The GP-module, like the rest of the scientific code that is shipped with UQLab, is open source (BSD license).

Data Structures_Introduction to algorithms.pptxRushaliDeshmukh2

Concept of Problem Solving, Introduction to Algorithms, Characteristics of Algorithms, Introduction to Data Structure, Data Structure Classification (Linear and Non-linear, Static and Dynamic, Persistent and Ephemeral data structures), Time complexity and Space complexity, Asymptotic Notation - The Big-O, Omega and Theta notation, Algorithmic upper bounds, lower bounds, Best, Worst and Average case analysis of an Algorithm, Abstract Data Types (ADT)

Fort night presentation new0903 pdf.pdf.anuragmk56

Raish Khanji GTU 8th sem Internship Report.pdfRaishKhanji

This report details the practical experiences gained during an internship at Indo German Tool Room, Ahmedabad. The internship provided hands-on training in various manufacturing technologies, encompassing both conventional and advanced techniques. Significant emphasis was placed on machining processes, including operation and fundamental understanding of lathe and milling machines. Furthermore, the internship incorporated modern welding technology, notably through the application of an Augmented Reality (AR) simulator, offering a safe and effective environment for skill development. Exposure to industrial automation was achieved through practical exercises in Programmable Logic Controllers (PLCs) using Siemens TIA software and direct operation of industrial robots utilizing teach pendants. The principles and practical aspects of Computer Numerical Control (CNC) technology were also explored. Complementing these manufacturing processes, the internship included extensive application of SolidWorks software for design and modeling tasks. This comprehensive practical training has provided a foundational understanding of key aspects of modern manufacturing and design, enhancing the technical proficiency and readiness for future engineering endeavors.

Introduction to FLUID MECHANICS & KINEMATICSnarayanaswamygdas

Fluid mechanics is the branch of physics concerned with the mechanics of fluids (liquids, gases, and plasmas) and the forces on them. Originally applied to water (hydromechanics), it found applications in a wide range of disciplines, including mechanical, aerospace, civil, chemical, and biomedical engineering, as well as geophysics, oceanography, meteorology, astrophysics, and biology. It can be divided into fluid statics, the study of various fluids at rest, and fluid dynamics. Fluid statics, also known as hydrostatics, is the study of fluids at rest, specifically when there's no relative motion between fluid particles. It focuses on the conditions under which fluids are in stable equilibrium and doesn't involve fluid motion. Fluid kinematics is the branch of fluid mechanics that focuses on describing and analyzing the motion of fluids, such as liquids and gases, without considering the forces that cause the motion. It deals with the geometrical and temporal aspects of fluid flow, including velocity and acceleration. Fluid dynamics, on the other hand, considers the forces acting on the fluid. Fluid dynamics is the study of the effect of forces on fluid motion. It is a branch of continuum mechanics, a subject which models matter without using the information that it is made out of atoms; that is, it models matter from a macroscopic viewpoint rather than from microscopic. Fluid mechanics, especially fluid dynamics, is an active field of research, typically mathematically complex. Many problems are partly or wholly unsolved and are best addressed by numerical methods, typically using computers. A modern discipline, called computational fluid dynamics (CFD), is devoted to this approach. Particle image velocimetry, an experimental method for visualizing and analyzing fluid flow, also takes advantage of the highly visual nature of fluid flow. Fundamentally, every fluid mechanical system is assumed to obey the basic laws : Conservation of mass Conservation of energy Conservation of momentum The continuum assumption For example, the assumption that mass is conserved means that for any fixed control volume (for example, a spherical volume)—enclosed by a control surface—the rate of change of the mass contained in that volume is equal to the rate at which mass is passing through the surface from outside to inside, minus the rate at which mass is passing from inside to outside. This can be expressed as an equation in integral form over the control volume. The continuum assumption is an idealization of continuum mechanics under which fluids can be treated as continuous, even though, on a microscopic scale, they are composed of molecules. Under the continuum assumption, macroscopic (observed/measurable) properties such as density, pressure, temperature, and bulk velocity are taken to be well-defined at "infinitesimal" volume elements—small in comparison to the characteristic length scale of the system, but large in comparison to molecular length scale

DATA-DRIVEN SHOULDER INVERSE KINEMATICS YoungBeom Kim1 , Byung-Ha Park1 , Kwa...charlesdick1345

211421893-M-Tech-CIVIL-Structural-Engineering-pdf.pdfinmishra17121973

new ppt artificial intelligence historyyyPianoPianist

MAQUINARIA MINAS CEMA 6th Edition (1).pdfssuser562df4

Compiler Design_Lexical Analysis phase.pptxRushaliDeshmukh2

Oil-gas_Unconventional oil and gass_reseviours.pdfM7md3li2

Machine learning project on employee attrition detection using (2).pptxrajeswari89780

railway wheels, descaling after reheating and before forgingJavad Kadkhodapour

ADVXAI IN MALWARE ANALYSIS FRAMEWORK: BALANCING EXPLAINABILITY WITH SECURITYijscai

IntroSlides-April-BuildWithAI-VertexAI.pdfLuiz Carneiro

AI-assisted Software Testing (3-hours tutorial)Vəhid Gəruslu

introduction to machine learining for beginersJoydebSheet

15th International Conference on Computer Science, Engineering and Applicatio...IJCSES Journal

"Feed Water Heaters in Thermal Power Plants: Types, Working, and Efficiency G...Infopitaara

Data Structures_Searching and Sorting.pptxRushaliDeshmukh2

The Gaussian Process Modeling Module in UQLabJournal of Soft Computing in Civil Engineering

Data Structures_Introduction to algorithms.pptxRushaliDeshmukh2

Fort night presentation new0903 pdf.pdf.anuragmk56

Raish Khanji GTU 8th sem Internship Report.pdfRaishKhanji

Introduction to FLUID MECHANICS & KINEMATICSnarayanaswamygdas

DATA-DRIVEN SHOULDER INVERSE KINEMATICS YoungBeom Kim1 , Byung-Ha Park1 , Kwa...charlesdick1345

211421893-M-Tech-CIVIL-Structural-Engineering-pdf.pdfinmishra17121973

new ppt artificial intelligence historyyyPianoPianist

MAQUINARIA MINAS CEMA 6th Edition (1).pdfssuser562df4

Reactjs workshop

1. Reactjs Workshop

2. Plan ◎What is Reactjs ? ◎Reactjs Core Concepts ◎Let’s code 2

3. Hello! I am Rebai Ahmed Who AM I ? ➢ React Lover ➢ Someone try to learn new thing every day 3

4. I’m web developer I want to create this web page :)

5. 5

6. How is that possible ? 6

7. 7

8. Solution ? 8

9. 9

10. 10 This is solution !!! ?

11. Issues ! 11 ➢Search & modify elements manually ! ➢Data synchronisation!

12. 1.Fb created Reactjs 12

13. 1. What is Reactjs ? 13

14. Short summary ➢A Facebook & Instagram collaboration. ➢Initial release from 2013 ➢114.894 Star in GitHub 14

15. A library for creating User interfaces 15

16. React is not a Framework 16

17. Big Companies using reactjs 17

18. 18 React vs Angular !

19. Why Reactjs ? 19

20. Core Problem !!!!! 20 Separation of Concerns : ➢app/partials/button.html ➢app/css/button.css ➢app/js/directives/button.js

21. 21 ➢ SEO Friendly - Components are client side as well as server side render hence they are SEO friendly and no 3 rd party plugin required ➢ Coding is simpler because of JSX ➢ Big minds are backing Reactjs

22. 22 ➢ Virtual DOM - Reactjs use the concept of virtual DOM which helps in the performance ➢ Unidirectional Data Flow - Compare to the 2 way data binding. Reactjs use the concept of Unidirectional data flow which improve the over all performance.

23. Reactjs installation: Include as a plain Javascript 23

24. Reactjs installation: Use live sandboxes 24

25. Reactjs installation: using npm 25

26. 2. Reactjs core concepts 26

27. 27 JSX Components Unidirectional Data Flow Virtual DOM

28. React core concepts :Component 28

29. React Components Self-contained reusable building blocks of web application 29

30. React Components ( reusable ) ➢Pinterest open sourced its full React component UI library 30

31. React Components ( reusable ) ➢Office UI Fabric 31

32. React Components LifeCycle ! 32

33. React is about components 33

34. 34

41. How does component look like?

42. React core concepts :Virtual DOM 42

43. 43 What is DOM ?

44. 44 React Virtual DOM ? ➢ Keep track of state in DOM is hard ! ➢ It’ll be so easier to re-render the whole DOM on every change ➢ Unfortunately the DOM API is not so fast.

45. 45 React Re-render everything for every update

46. 46 Seems Expensive ?

47. 47 React Virtual DOM ?

48. 48 React Virtual DOM ? ➢ Use different algorithm with the browser DOM tree to identify the changes ➢ Instead of creating new object, Reactjs just identify what change is took place and once identify update that state

49. 49 React Virtual DOM Re-rendering process ? ➢Build new virtual DOM subtree ➢Diff with the old one ➢Compute the minimal set of DOM mutations ➢Batch execute all update DÉMO

50. React core concepts :JSX 50

51. 51 React JSX ? ➢React components are written in JSX, a JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render components <div> <h1> Shopping list for {this.props.name} </h1> <ul> <li>Instagram </li> <li>Whatsap </li> <li>Oculus </li> </ul> </div>

52. 52 React JSX ? <div> <h1> Shopping list for {this.props.name} </h1> <ul> <li>Instagram </li> <li>Whatsap </li> <li>Oculus </li> </ul> </div>

53. 53 React JSX expressions ?

54. 54 React JSX expressions ?

55. React core concepts :state && props ! 55

56. React :Data Flow State && props 56

57. React :Data Flow State && props 57

58. React :Data Flow Children 58

59. ECMASCRIPT 6 / ECMASCRIPT 2015 WHAT’S NEW? modern syntax ,better suited for big applications 59 ➢Variable types ➢Arrow functions ➢Modules ➢Classes ➢A lot more…

60. ECMASCRIPT 6 / ECMASCRIPT 2015 WHAT’S NEW? 60 ➢Arrow functions

61. ECMASCRIPT 6 / ECMASCRIPT 2015 WHAT’S NEW? 61 ➢Template Literals (Strings)

62. ECMASCRIPT 6 / ECMASCRIPT 2015 WHAT’S NEW? 62 ➢Classes

63. ECMASCRIPT 6 / ECMASCRIPT 2015 WHAT’S NEW? 63 ➢Modules

64. 3. Let’s start coding 64 HELP

65. Use React 65

66. Component 66

67. Render 67

68. State 68

69. FORMS 69

70. Thanks! Any questions? 70 You can find me at: ➢ Rebaiahmed.github.io ➢ github.com/Rebaiahmed ➢ @RebaiAhmed_ ➢ [email protected]

71. Ressources ◎https://devhints.io/react ◎https://github.com/enaqx/awesome-react ◎https://medium.freecodecamp.org/all-the- fundamental-react-js-concepts-jammed- into-this-single-medium-article- c83f9b53eac2 ◎https://github.com/TunisiaJavascriptCom munity/react-in-patterns 71