React for Non Techies

Mar 5, 20171 like689 views

This document provides an overview of React for non-technical audiences. It explains that React is a JavaScript library for building user interfaces that has gained popularity in recent years. It breaks down user interfaces into reusable components, which promotes code reuse. The document also provides examples of how React components can be used to display and update basic data, as well as examples of core React concepts like props, state, and reusable components. It discusses benefits of React like clear structure, reusability, and easier collaboration between design and development teams.

React is everywhere...
● We’ve been using it on every client project during the
last 18 months.
● London React Meetup hosted by Red Badger has
2000+ members.
● 4th most starred JS project of all time on Github
behind Angular, D3 & jQuery

● ‘React is something cool you can use to create UI but
we don’t know why it’s good.’ - Non techie
● ‘A javascript library for building user interfaces. The V in
MVC.‘ - Facebook React Developers
But what is it?
● The best tool developers currently have for
organising the front end code.

Backend
Prepares data that
should be sent to
user and determines
what front end code
should go with it:
What is the frontend exactly?
User types fortnumandmason.com
in web browser, request sent to our server
CLIENT
SERVER
Frontend
Adds data to
HTML and
JavaScript files,
sends those files
with CSS to the
user
Frontend
Adds data to
HTML and
JavaScript files,
sends those files
with CSS to the
user
⬆
React helps us
organise and build this

● jQuery
● Backbone, Ember,
Angular and more...
● All provide a solution
● React was easy to pick up
● Promotes idea of breaking
down UI into components
● Big company backing
Not the first solution, probably not last

● A few lines of JavaScript
that defines how an
element of the page
should behave.
● We can position it on the
page and style it too..
● Facebook recommend
slicing the design into
React components
What is a React component?

Business Requirement
“We want to show a number!”
React: Example 1
http://codepen.io/anon/pen/QjzwdE
● Props
● Render
● Default Values
● Validations of prop data types
● React forces code structure.
10

Business Requirement
“We want to be able to
increase that number!”
React: Example 2
http://codepen.io/anon/pen/epQXZN
● State

Business Requirement
“We want to have re-usable
components so that other
teams can use what we are
building!”
React: Example 3
http://codepen.io/anon/pen/EVOMNg
● Separation of concerns
● Re-use

● Clear structure and organisation of UI
● Encourages code re-use
● Fun! (inspired by game programming)
● Lifecycle - you can do stuff before and after a
component appears on the page
● Small components are more testable
● Abstracts some browser differences
● Challenges: A single component is simple but
constructing a large system of components and
co-ordinating their communication is complex
Patterns for managing state still being figured out.
(Arch, Flux, Relay, Redux etc. etc.)
Developer perspective

UX, Design & Dev collaboration
● Lloyds UXD started slicing components at design
stage with developers. Worked well.
● Shared terminology, better communication.
● UX/Designers already think this way?
● Brings development process closer to design
process?

● Makes the front end easier to
understand, debug and iterate on.
● Reduces communication barriers
between Design and
Development
● Common structure and patterns
so developers can take our
knowledge with us to old and new
projects.
Benefits to clients
Faster Delivery
Higher Quality

Next steps...
● What can we do as Red Badger teams?
○ Regular team huddles during design stages to review Sketch files.
○ Break the design down into components.
○ Translate them to code.
○ Reference them in future designs .
● Remember the only constant is change, who knows what tech
will be using in 1 year, we have to continually adapt our process
and technology, More communication will help us evolve..
● But right now, it feels like we are in the right place...

The document discusses SQL injection, which occurs when malicious SQL commands are injected into a backend database. It provides examples of how SQL injection can be used to bypass authentication or retrieve sensitive data from a database. The document then discusses various techniques for preventing SQL injection, including using stored procedures, parameterized queries, and object-relational mappers like Entity Framework and NHibernate which help protect against injection attacks.

SharePoint Jumpstart #1 Creating a SharePoint StrategyEarley Information Science

This document summarizes a webinar on developing a SharePoint strategy. It provided an overview of SharePoint capabilities for collaboration, portals, enterprise search, content management, and business processes. It emphasized that simply deploying SharePoint without a strategy can result in disconnected information silos that are difficult to manage. The webinar outlined key steps to developing a SharePoint strategy, including defining processes and audiences, auditing content sources, creating use cases, and evaluating technology options. It stressed the importance of aligning any SharePoint deployment with organizational goals, processes, and information needs.

Online Identity- Part 1Kimberley Barker

The document discusses managing your online identity by being aware of the information available about you online, crafting your online presence, and protecting your privacy. It covers facts that can be found about an individual, how to curate an online identity, and steps people can take to manage their online reputation and privacy settings on social media sites. The presenter provides tips on separating personal and professional identities online, thinking before posting, and using privacy tools to control what others can find.

Tim hieu ve lo hong web va cach phong chongVu Trung Kien

AntivirusMeti Liona

Computer Security and EthicsMohsin Riaz

This document discusses various common security risks and threats to computers and networks. It covers topics like malware, viruses, spam, spoofing, phishing, botnets, worms, Trojans, backdoors, blended threats, denial of service attacks, and physical threats like hardware theft and vandalism. It also discusses prevention, detection and removal strategies for many of these threats. Passwords, antivirus software, firewalls and regular backups are recommended for protection. The document provides examples of weak versus strong passwords. It cautions that most malware is spread through the internet.

Ethics in IT and System Usagetushki92

This document discusses ethics and computer ethics. Ethics is defined as applying values to human behavior to guide conduct. Computer ethics examines ethical issues related to technology, such as privacy, property, access, and accuracy of information. Some common computer ethics issues involve hacking, software piracy, and ensuring privacy, accessibility, and accuracy of data. The document also outlines the "Ten Commandments of Computer Ethics" and discusses threats to information systems like computer viruses, software piracy, and hacking.

Open source educational technologies for teaching and learningMbarara University of Science and technology

Top 10 internet usesTisha Scott-Addison

virus and antivirusshashank kurakula

Secure Code Warrior - Unrestricted file uploadSecure Code Warrior

Introduction to OAuth 2.0 - the technology you need but never really learnedMikkel Flindt Heisterberg

This document provides an overview of OAuth 2.0 and how it can be used by developers to access user data from an API or service without requiring the user's credentials. It begins with explaining the problem that OAuth solves by allowing access to user data without sharing usernames and passwords. It then demonstrates the OAuth flow through diagrams and descriptions of the steps. These include generating an authorization URL, exchanging the authorization code for tokens, making requests with the access token, and refreshing tokens. The document concludes by noting that a demonstration of OAuth will be shown.

Security Best Practices for Regular UsersSecurity Innovation

Social Media And Privacy October 9 2009canadianlawyer

This document discusses privacy issues related to social media. It outlines key topics discussed at a conference on managing privacy and disclosure in social media, including: - The Facebook privacy decision by the Canadian Privacy Commissioner which found Facebook must get express consent for sharing personal information with third parties. - The concept of reasonableness in privacy law and how attitudes towards privacy are changing, especially among younger generations more open about sharing personal information online. - Ways for social media operators to manage privacy liability, such as clear terms of use and controls over third party access to personal information. - The increasing use of social media evidence in litigation and courts generally ordering production of relevant social media content despite privacy objections.

Up is Down, Black is White: Using SCCM for Wrong and Rightenigma0x3

This document discusses using Microsoft's System Center Configuration Manager (SCCM) for both offensive and defensive purposes. It introduces PowerSCCM, a PowerShell toolkit for interacting with SCCM. PowerSCCM can be used to create malicious applications and deploy them to targeted collections of machines. It also provides cmdlets for hunting for compromised users and systems. The document recommends tuning SCCM for improved host-based security monitoring and inventory capabilities. It provides examples of using SCCM data for incident response and hunting activities on the network.

M365 e3 and identity and threat protection and compliance new skusSpencerLuke2

The document provides an overview of Microsoft 365 licensing plans including Microsoft 365 F1, E3, and E5. It summarizes the key features and services included in each plan such as Office applications, collaboration tools, security features, device and information management capabilities. The document is intended to help customers understand the different Microsoft 365 offerings and choose the appropriate plan for their needs.

Chapter 10 software certificationPiyush Gogia

Software certification involves certifying software developers, processes, and products. It aims to validate quality and reliability through recognized standards. Developer certification recognizes skills and competence, while process certification evaluates methods and compliance with standards like ISO and CMM. Product certification directly assures customers and aids selection, though there is no universal standard. Aviation uses DO-178B to certify software by potential failure impact from level A (catastrophic) to E (minor). Third party certification of components is needed to build trusted systems, but component-based practices have not been fully stabilized.

Insecure direct object reference (null delhi meet)Abhinav Mishra

This document discusses insecure direct object references (IDOR), a type of access control vulnerability. IDOR occurs when an application exposes references to unauthorized resources, such as allowing access to another user's account, through direct manipulation of the reference URL or parameter. The document explains how IDOR works using examples, how attackers can discover and exploit IDOR vulnerabilities, and considerations for when it may not be critical even if present. It also provides resources for further information on testing and remediating IDOR issues.

File upload vulnerabilities & mitigationOnwukike Chinedu. CISA, CEH, COBIT5 LI, CCNP

This document discusses file upload vulnerabilities, exploitation, and mitigation. It provides 6 cases of how file uploads can be exploited such as through simple uploads without validation or altering content types. Tools mentioned for exploitation include BurpSuite and proxies. The document recommends mitigation techniques like using .htaccess files outside the upload directory, storing uploads outside the server root, not relying on client-side validation, and renaming files with random names. It concludes with offering a proof of concept demonstration.

Enterprise JavaScript Error Handling (Ajax Experience 2008)Nicholas Zakas

The document discusses best practices for handling JavaScript errors. It recommends 7 rules: 1) assume code will fail, 2) log errors to servers, 3) handle errors in code not browsers, 4) identify where errors may occur, 5) throw your own errors, 6) distinguish fatal from non-fatal errors, and 7) provide a debug mode. The document covers different types of errors and strategies for logging, catching, and displaying errors to users.

Web servers – features, installation and configurationwebhostingguy

A web server is a computer program and server that allows for hosting of websites and web applications. It accepts requests from browsers and returns HTML documents and other content. Common technologies used on web servers include CGI scripts, SSL security, and ASP to provide dynamic content and server-side processing. Web servers work by accepting connections from browsers, retrieving content from disk, running local programs, and transmitting data back to clients as quickly as possible while supporting threads and processes.

HTTP Request SmugglingAkash Ashokan

HTTP request smuggling occurs when HTTP requests pass through multiple entities that parse requests differently, allowing an attacker to smuggle a request to one entity without the other being aware. There are two main causes - using HTTP connection modifications like Keep-Alive and Pipeline, which allow multiple requests over a single connection, and message body transfer encodings like chunked encoding, which send content in chunks. An attacker can craft requests that one entity parses one way based on headers like Content-Length, while the other entity parses differently based on Transfer-Encoding, allowing a request to be smuggled through.

Privacy in private browsing modeAparna “Ash” Himmatramka

Every major browser has an "Incognito Mode," "Private Browsing," "inPrivate," or something similar—a switch that supposedly covers your tracks, at least on your computer. But security researchers have found many holes in the armor that privacy modes supposedly provide. This material that I presented in my Master's class today mainly gives an overview of how and why we have an unrealistic expectation of privacy when browsing in the private browsing modes of several browsers. It also some best practices to follow when surfing in private browsing mode.

idsecconf2023 - Satria Ady Pradana - Launch into the Stratus-phere Adversary ...idsecconf

Recon and Bug Bounties - What a great love story!Abhijeth D

n this talk, the speaker will demonstrate few effective techniques using which researchers/pen testers can do better information gathering. The speaker would also share many stories which allowed him to earn some bounties using these recon techniques. This techniques might also be useful to red teams/incident response teams to identify rogue devices in their organisation which are often missed out during normal penetration testing. These might not be “best practices” but are definitely “good practices” and “nice to know” things while doing Penetration Testing.

Browser isolation (isc)2 may presentation v2Wen-Pai Lu

Mac ForensicsCTIN

The document provides information on analyzing Macintosh computers for digital forensics purposes. It discusses the file systems, operating systems, and applications used by Macs and how to acquire disk images and examine key artifacts. Specific topics covered include acquiring memory using Target Disk Mode, disabling disk arbitration, analyzing browser data from Safari, Firefox, Internet Explorer, and AOL, and examining email from applications like Mail, Entourage and AOL. Forensic tools mentioned include dd, dcfldd, Emailchemy, and the Safari Tools browser analyzer.

React JS and why it's awesomeAndrew Hull

This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include: - Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components. - Everything in React is a component, with data flowing in one direction from parent to child via props. State is mutable within a component. - By using a virtual DOM, React can efficiently update the real DOM by only making necessary changes, keeping the interface fast and pure.

WordPress, React, oh my! (DevelCZ 2016)Borek Bernard

React for WordPress developersBorek Bernard

This document discusses React, a JavaScript library for building user interfaces. It provides examples of major companies using React like Facebook, Instagram, and Netflix. React is simple, focused on building user interfaces, and universal across browsers and devices. The document demonstrates how React can be used to build better admin interfaces and rich frontends for WordPress. It highlights opportunities for WordPress developers to learn JavaScript and use React to create innovative user experiences.

More Related Content

What's hot (19)

Top 10 internet usesTisha Scott-Addison

virus and antivirusshashank kurakula

Secure Code Warrior - Unrestricted file uploadSecure Code Warrior

Introduction to OAuth 2.0 - the technology you need but never really learnedMikkel Flindt Heisterberg

Security Best Practices for Regular UsersSecurity Innovation

Social Media And Privacy October 9 2009canadianlawyer

Up is Down, Black is White: Using SCCM for Wrong and Rightenigma0x3

M365 e3 and identity and threat protection and compliance new skusSpencerLuke2

Chapter 10 software certificationPiyush Gogia

Insecure direct object reference (null delhi meet)Abhinav Mishra

File upload vulnerabilities & mitigationOnwukike Chinedu. CISA, CEH, COBIT5 LI, CCNP

Enterprise JavaScript Error Handling (Ajax Experience 2008)Nicholas Zakas

Web servers – features, installation and configurationwebhostingguy

HTTP Request SmugglingAkash Ashokan

Privacy in private browsing modeAparna “Ash” Himmatramka

idsecconf2023 - Satria Ady Pradana - Launch into the Stratus-phere Adversary ...idsecconf

Recon and Bug Bounties - What a great love story!Abhijeth D

Browser isolation (isc)2 may presentation v2Wen-Pai Lu

Mac ForensicsCTIN

Top 10 internet usesTisha Scott-Addison

virus and antivirusshashank kurakula

Secure Code Warrior - Unrestricted file uploadSecure Code Warrior

Introduction to OAuth 2.0 - the technology you need but never really learnedMikkel Flindt Heisterberg

Security Best Practices for Regular UsersSecurity Innovation

Social Media And Privacy October 9 2009canadianlawyer

Up is Down, Black is White: Using SCCM for Wrong and Rightenigma0x3

M365 e3 and identity and threat protection and compliance new skusSpencerLuke2

Chapter 10 software certificationPiyush Gogia

Insecure direct object reference (null delhi meet)Abhinav Mishra

File upload vulnerabilities & mitigationOnwukike Chinedu. CISA, CEH, COBIT5 LI, CCNP

Enterprise JavaScript Error Handling (Ajax Experience 2008)Nicholas Zakas

Web servers – features, installation and configurationwebhostingguy

HTTP Request SmugglingAkash Ashokan

Privacy in private browsing modeAparna “Ash” Himmatramka

idsecconf2023 - Satria Ady Pradana - Launch into the Stratus-phere Adversary ...idsecconf

Recon and Bug Bounties - What a great love story!Abhijeth D

Browser isolation (isc)2 may presentation v2Wen-Pai Lu

Mac ForensicsCTIN

Viewers also liked (12)

React JS and why it's awesomeAndrew Hull

WordPress, React, oh my! (DevelCZ 2016)Borek Bernard

React for WordPress developersBorek Bernard

Writing Scalable React Applications: IntroductionKlika Tech, Inc

Мы предлагаем курс из 2 лекций по React: - Первая лекция: React Basics - Вторая лекция: Dive into React На первой лекции мы расскажем, что такое React и его плюсы/минусы по отношению к другим решениям. Второй вебинар, более практический, опишет, как писать приложения с использованием библиотеки React.

Chrome presentationismnoiet

Google Chrome is a web browser developed by Google that provides developers with useful tools for debugging JavaScript code and testing responsive web designs. It allows rearranging browser tabs, selecting interface colors without extensions, testing sites across devices with responsive mode, and linking production and original source code with source maps. The developer console allows logging messages and timing code execution, while the toolbox offers other debugging features.

React 101Casear Chu

Presentation reactismnoiet

React + Redux for Web DevelopersJamal Sinclair O'Garro

I've been working a lot with React lately and thought it would be a good idea to share what I've learned with the group. During this talk we'll take a look at Facebook's React library while drawing comparisons to frameworks like Angular. We'll see how we can use React and friends to create a fast and efficient single page app. Attendees are expected to have some familiarity with ES6/ES7 since we the codebase we will be looking at leverages features from the spec. What we'll be taking a look at: • React • React Router • Redux • Redux Sagas • Webpack • Babel

Rethinking Best Practicesfloydophone

React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304 We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.

React lectureChristoffer Noring

This document provides an overview of React and Redux concepts including: - React basics like components, props, state, and lifecycle methods - Flux architecture and how data flows through actions, dispatcher, and stores - Redux as an alternative to Flux that uses a single store updated by reducers in response to actions - Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

Isomorphic React applications allow code to run on both the client and server, improving performance and scalability. Server-side rendering builds HTML on the server so the page loads immediately before JavaScript loads. This improves the user experience but requires loading data asynchronously. Caching pre-rendered components and separating rendering can improve performance. Progressive rendering and Facebook's BigPipe technique can further optimize loading. Performance can also be improved through code optimizations like using direct React files and load balancing with multiple server instances.

How to Become a Thought Leader in Your NicheLeslie Samuel

React JS and why it's awesomeAndrew Hull

WordPress, React, oh my! (DevelCZ 2016)Borek Bernard

React for WordPress developersBorek Bernard

Writing Scalable React Applications: IntroductionKlika Tech, Inc

Chrome presentationismnoiet

React 101Casear Chu

Presentation reactismnoiet

React + Redux for Web DevelopersJamal Sinclair O'Garro

Rethinking Best Practicesfloydophone

React lectureChristoffer Noring

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

How to Become a Thought Leader in Your NicheLeslie Samuel

Similar to React for Non Techies (20)

Dust.jsYevgeniy Brikman

The document discusses LinkedIn's adoption of the Dust templating language in 2011. Some key points: - LinkedIn needed a unified view layer as different teams were using different templating technologies like JSP, GSP, ERB. - They evaluated 26 templating options and selected Dust as it best met their criteria like performance, i18n support, and being logic-less. - Dust templates are compiled to JavaScript for client-side rendering and to Java for server-side rendering (SSR) through Google's V8 engine, allowing templates to work on both client and server. - SSR addresses challenges like SEO, supporting clients without JavaScript, and i18n by rendering

20180518 QNAP Seminar - Introduction to React NativeEric Deng

workshopsbutitisnottrueatalljusttobe.pptxwwwculturalarcher205

Web summit.pptx171SagnikRoy

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.

Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon

RealDay: Angular.jsMiguel Schmitz Grazziotin

AngularJS is an open source JavaScript framework maintained by Google and the community. It aims to make developing simple single-page applications easier by extending HTML. The framework guides developers to decouple DOM manipulation from application logic and client/server code. It promotes declarative programming and two-way data binding between views and models. While powerful for CRUD apps, it takes longer to fully learn and provides less flexibility than some alternatives. Overall, AngularJS is well-designed for quickly building quality dynamic web applications, especially those following its model-view conventions.

AngularJS in Production (CTO Forum)Alex Ross

Programming for non tech entrepreneursRodrigo Gil

The document provides an introduction to programming for non-technical entrepreneurs, including a definition of programming languages, a brief history of programming, common programming roles and processes, popular programming languages and tools, basic programming concepts, and considerations for creating websites and mobile apps. It aims to give non-technical founders an overview of the programming landscape to help them communicate effectively with technical teams.

From React to React Native - Things I wish I knew when I startedsparkfabrik

Industrial Training.pptxSamraatBansal1

GoComet is a logistics company that uses data science and machine learning to maximize efficiency. The intern worked on their website using the MERN stack (MongoDB, Express, React, Node). Technologies used include MongoDB for data storage, Express for the backend API, React for the frontend UI, and Node.js as the runtime environment. The intern completed tasks like building forms with React Hook Form, implementing real-time functionality with Socket.io, integrating Redux for state management, and sending emails with Nodemailer.

Comparing AngularJS and ReactJS_ Finding the Best Framework for your Next Pro...JPLoft Solutions

COMP6210 Web Services And Design Methodologies.docxwrite31

The document discusses the development of a web application for the SCP Foundation using modern technologies like React JS, Next JS, and Tailwind CSS. It describes the technologies used and the development process, which followed an agile Scrum methodology divided into sprints. Testing was done to ensure responsiveness across different devices. The application allows users to view information about various SCP entities and features secure authentication for user accounts.

Frontend Development Bootcamp - React [Online & Offline] In BanglaStack Learner

Frontend Development Bootcamp - React Stack School: https://courses.stackschool.co/courses/frontend-development-bootcamp-react "Frontend Development Bootcamp - React"[ Online + Offline], we will teach you frontend development and its process. And we will use React and its ecosystem for learning. But at the end of this camp, if you want to switch to any other library or framework, and you can do so without anyone's help. ওয়েব ডিজাইনার না, জেনে শুনে বুঝে, দীর্ঘ সময় হাতে কলমে প্রাকটিস করে সত্যিকার অর্থেই ফ্রন্টেন্ড ডেভেলপার হতে চাইলে এই বুটক্যাম্পটি আপনার জন্য। ফ্রন্টেন্ড ডেভেলপমেন্ট মানে HTML CSS না, React Vue না, এটা একটা প্রোসেস এবং যা আমরা শিখবো React ব্যবহার করে। Frontend Development Bootcamp - React [Online & Offline] 43+ Weeks, 86+ Classes - A Long Journey to Become A Professional Frontend Developer আমাদের অনেকেরই ধারণা ফ্রন্টেন্ড ডেভেলপমেন্ট মানেই হচ্ছে React, Vue বা Angular. এগুলো একবার শিখতে পারলেই হয়ে গেলো। কিন্তু বাস্তবিক অর্থে এগুলো হচ্ছে কিছু টুলস যা আপনাকে ফ্রন্টেন্ড অ্যাপলিকেশন ডেভেলপ করতে সাহায্য করবে। এই সুদীর্ঘ বুটক্যাম্পে আমরা ফ্রন্টেন্ড ডেভেলপমেন্ট শিখবো। এবং শেখার কাজে ব্যবহার করবো React এবং এর ইকো সিস্টেম। তবে এই ক্যাম্প শেষে যদি আপনি অন্য যে কোনো লাইব্রেরী বা ফ্রেমওয়ার্ক এ সুইচ করতে চান, কারোর সাহায্য ছাড়াই আপনি সেটা করতে পারবেন। কারণ এই লম্বা বুটক্যাম্পে আপনাকে ফ্রন্টেন্ড ডেভেলপমেন্টের থিওরি এবং প্রসেসের সাথে এমন ভাবে পরিচয় করিয়ে দেওয়া হবে, যেন চাইলেই আপনি যেকোনো টুলস ব্যবহার করে ফ্রন্টেন্ড ডেভেলপমেন্ট করতে পারেন। মনে রাখবেন, এটা React এর কোনো কোর্স না, ফ্রন্টেন্ড ডেভেলপমেন্ট কোর্স যেখানে আমরা টুল হিসেবে React কে বেছে নিয়েছি।

Usable Software DesignAlexandru Bolboaca

Angular (v2 and up) - Morning to understand - LinagoraLINAGORA

Best React js Training course in BangaloreAvinash Kumar

niharika saxenaNiharika Saxena

Niharika Saxena has over 3 years of experience as a .NET developer specializing in C#, ASP.NET, MVC, and web technologies like HTML, CSS, and JavaScript. She has worked on projects involving web and desktop applications for various clients, designing databases, implementing business logic, and leading development teams. Currently located in Bhopal, she is pursuing an MCA and has a BSc degree in Computer Science.

Web Development - Roadmap to MERN stack developmentSwapnilNarayan

The Complete React Learning CourseRakhi Lambha

Dust.jsYevgeniy Brikman

20180518 QNAP Seminar - Introduction to React NativeEric Deng

workshopsbutitisnottrueatalljusttobe.pptxwwwculturalarcher205

Web summit.pptx171SagnikRoy

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

Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon

RealDay: Angular.jsMiguel Schmitz Grazziotin

AngularJS in Production (CTO Forum)Alex Ross

Programming for non tech entrepreneursRodrigo Gil

From React to React Native - Things I wish I knew when I startedsparkfabrik

Industrial Training.pptxSamraatBansal1

Comparing AngularJS and ReactJS_ Finding the Best Framework for your Next Pro...JPLoft Solutions

COMP6210 Web Services And Design Methodologies.docxwrite31

Frontend Development Bootcamp - React [Online & Offline] In BanglaStack Learner

Usable Software DesignAlexandru Bolboaca

Angular (v2 and up) - Morning to understand - LinagoraLINAGORA

Best React js Training course in BangaloreAvinash Kumar

niharika saxenaNiharika Saxena

Web Development - Roadmap to MERN stack developmentSwapnilNarayan

The Complete React Learning CourseRakhi Lambha

Recently uploaded (20)

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Cyber Awareness overview for 2025 month of securityriccardosl1

How analogue intelligence complements AIPaul Rowe

Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results. News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

Mobile App Development Company in Saudi ArabiaSteve Jonas

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

Cyber Awareness overview for 2025 month of securityriccardosl1

How analogue intelligence complements AIPaul Rowe

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

React for Non Techies

1. React For ‘Non Techies’

2. React is taking over...

3. React is everywhere... ● We’ve been using it on every client project during the last 18 months. ● London React Meetup hosted by Red Badger has 2000+ members. ● 4th most starred JS project of all time on Github behind Angular, D3 & jQuery

4. ● ‘React is something cool you can use to create UI but we don’t know why it’s good.’ - Non techie ● ‘A javascript library for building user interfaces. The V in MVC.‘ - Facebook React Developers But what is it? ● The best tool developers currently have for organising the front end code.

5. Backend Prepares data that should be sent to user and determines what front end code should go with it: What is the frontend exactly? User types fortnumandmason.com in web browser, request sent to our server CLIENT SERVER Frontend Adds data to HTML and JavaScript files, sends those files with CSS to the user Frontend Adds data to HTML and JavaScript files, sends those files with CSS to the user ⬆ React helps us organise and build this

6. ● jQuery ● Backbone, Ember, Angular and more... ● All provide a solution ● React was easy to pick up ● Promotes idea of breaking down UI into components ● Big company backing Not the first solution, probably not last

7. ● A few lines of JavaScript that defines how an element of the page should behave. ● We can position it on the page and style it too.. ● Facebook recommend slicing the design into React components What is a React component?

8. Business Requirement “We want to show a number!” React: Example 1 http://codepen.io/anon/pen/QjzwdE ● Props ● Render ● Default Values ● Validations of prop data types ● React forces code structure. 10

9. Business Requirement “We want to be able to increase that number!” React: Example 2 http://codepen.io/anon/pen/epQXZN ● State

10. Business Requirement “We want to have re-usable components so that other teams can use what we are building!” React: Example 3 http://codepen.io/anon/pen/EVOMNg ● Separation of concerns ● Re-use

11. ● Clear structure and organisation of UI ● Encourages code re-use ● Fun! (inspired by game programming) ● Lifecycle - you can do stuff before and after a component appears on the page ● Small components are more testable ● Abstracts some browser differences ● Challenges: A single component is simple but constructing a large system of components and co-ordinating their communication is complex Patterns for managing state still being figured out. (Arch, Flux, Relay, Redux etc. etc.) Developer perspective

12. UX, Design & Dev collaboration ● Lloyds UXD started slicing components at design stage with developers. Worked well. ● Shared terminology, better communication. ● UX/Designers already think this way? ● Brings development process closer to design process?

13. ● Makes the front end easier to understand, debug and iterate on. ● Reduces communication barriers between Design and Development ● Common structure and patterns so developers can take our knowledge with us to old and new projects. Benefits to clients Faster Delivery Higher Quality

14. Next steps... ● What can we do as Red Badger teams? ○ Regular team huddles during design stages to review Sketch files. ○ Break the design down into components. ○ Translate them to code. ○ Reference them in future designs . ● Remember the only constant is change, who knows what tech will be using in 1 year, we have to continually adapt our process and technology, More communication will help us evolve.. ● But right now, it feels like we are in the right place...

15. Fin.

React for Non Techies

Recommended

More Related Content

What's hot (19)

Viewers also liked (12)

Similar to React for Non Techies (20)

Recently uploaded (20)

React for Non Techies