This document provides an overview and introduction to React, including:
- An introduction to the speaker and slides/resources for the talk
- A comparison of React and Angular
- An overview of common components in a React app: React, Redux, Router
- Setting up a basic React project with many dependencies
- Explanations of key React concepts like components, props, and state
- Examples of component structure and organization in a React project
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
In this presentation, Prashant Sharma of Valuebound has talked about ReactJS - a JavaScript library for building user interfaces. Check out the agendas to know what is there for you.
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
In this presentation, we'll explore React’s “Component” based world. We'll go through Virtual DOM, how it works, and React's Virtual DOM vs. the real DOM.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
In this presentation, Prashant Sharma of Valuebound has talked about ReactJS - a JavaScript library for building user interfaces. Check out the agendas to know what is there for you.
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
In this presentation, we'll explore React’s “Component” based world. We'll go through Virtual DOM, how it works, and React's Virtual DOM vs. the real DOM.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
20180518 QNAP Seminar - Introduction to React NativeEric Deng
What is React Native?
How does React Native work?
Writing React Native
Expo
Components, props, and states
Component lifecycle
Declarative and imperative
Event handling
User input
Style
Layout
Data access
Publishing your Project
As applications grow in complexity, web developers and front-end developers all suffer the hassle of building and maintaining complex web applications; managing and maintaining consistency of application state. This presentation goes through what's special about React and Redux.
This was part of JOSA TechTalks project within Jordan Open Source Association, presented by Ali Sa'o and Omar Abdelhafith.
React and Flux life cycle with JSX, React Router and Jest Unit TestingEswara Kumar Palakollu
Understanding of React, JSX, Flux, react-router and Jest for React and Flux Unit Testing.
Detailed view of react life cycle and flux life cycle along with React life cycle.
React with MVC pattern and React + Flux with MVC pattern explained.
React – Structure Container Component In MeteorDesignveloper
Over the past two months, I have been working on an interesting project at my company which is supposed to be a very big one. So at first, as a team leader and core maker, I spent quite a lot of time to find a good starting point, I meant stuff like how to structure the project, which frontend stack to use, how that stack connects to server, how to set up and bring all those things together, etc, to satisfy all the project’s requirements.....
Learn how to develop front-end JavaScript web applications using React and Redux for the application architecture. Immutability and one-way data binding at it's finest. Focus on components and state management without all the hassle.
Code examples available here: https://github.com/kinabalu/mysticpaste_react_example
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
Building Modern Web Applications using React and ReduxMaxime Najim
React and Redux are latest evolution in modern web application development. This talk covers the concepts and set of technologies of modern web application development.
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
An infographic about five best practices for creating and sharing personas in customer and user experience contexts. This provides a visual snapshot of effective persona creation.
8 Essential Elements of your Agile UX Playbook [Infographic]TandemSeven
This infographic recommends 8 best practices for creating a viable, streamlined user experience. Follow these steps to garner cohesive, consistent digital experiences.
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
20180518 QNAP Seminar - Introduction to React NativeEric Deng
What is React Native?
How does React Native work?
Writing React Native
Expo
Components, props, and states
Component lifecycle
Declarative and imperative
Event handling
User input
Style
Layout
Data access
Publishing your Project
As applications grow in complexity, web developers and front-end developers all suffer the hassle of building and maintaining complex web applications; managing and maintaining consistency of application state. This presentation goes through what's special about React and Redux.
This was part of JOSA TechTalks project within Jordan Open Source Association, presented by Ali Sa'o and Omar Abdelhafith.
React and Flux life cycle with JSX, React Router and Jest Unit TestingEswara Kumar Palakollu
Understanding of React, JSX, Flux, react-router and Jest for React and Flux Unit Testing.
Detailed view of react life cycle and flux life cycle along with React life cycle.
React with MVC pattern and React + Flux with MVC pattern explained.
React – Structure Container Component In MeteorDesignveloper
Over the past two months, I have been working on an interesting project at my company which is supposed to be a very big one. So at first, as a team leader and core maker, I spent quite a lot of time to find a good starting point, I meant stuff like how to structure the project, which frontend stack to use, how that stack connects to server, how to set up and bring all those things together, etc, to satisfy all the project’s requirements.....
Learn how to develop front-end JavaScript web applications using React and Redux for the application architecture. Immutability and one-way data binding at it's finest. Focus on components and state management without all the hassle.
Code examples available here: https://github.com/kinabalu/mysticpaste_react_example
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
Building Modern Web Applications using React and ReduxMaxime Najim
React and Redux are latest evolution in modern web application development. This talk covers the concepts and set of technologies of modern web application development.
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
An infographic about five best practices for creating and sharing personas in customer and user experience contexts. This provides a visual snapshot of effective persona creation.
8 Essential Elements of your Agile UX Playbook [Infographic]TandemSeven
This infographic recommends 8 best practices for creating a viable, streamlined user experience. Follow these steps to garner cohesive, consistent digital experiences.
Journey Maps are a popular and important method in customer and user experience optimization. Here are some best practices for creating Journey Maps that will be effective in transforming your customer’s experience. The infographic discusses:
-What journey maps are and why create them
-The high-level steps to create a customer journey map
-The essentials of effective customer journey maps
-The different types of journey maps (ex: Customer Lifecycle, Service Blueprint)
-An example customer journey.
Redux is an exciting Javascript framework where you get things done by modifying nothing! More seriously, Redux is a flux-like way to manage UI state deterministically, with logical state transitions. This talk will explore how New Relic's APM product is using Redux to build interfaces at the future of software analytics. Here's to code we can understand and reason about!
---
Talk originally from New Relic FutureStack 2015!
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
React in Native Apps - Meetup React - 20150409Minko3D
Minko is a platform to display, share and interact with 3D content from anywhere, whether you're on a web browser, a workstation, or a device that fits in your pocket. In order to reach those targets with the team we have, we had to go with a cross-platform, hybrid solution that would enable fast UI development with native 3D performances. So we built one, on top of many open source projects, using C++. This talk will discuss our approach for building cross-platform HTML5 interfaces, with a C++/JS bridge to bind DOM APIs, and the tricks we use to make them responsive (spoiler: React is one of them).
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
How to Get Your CX and UX Teams Working TogetherTandemSeven
Sometimes CX team initiatives can overlap or compete with UX team initiatives. This post by TandemSeven's CMO Steve Offsey discusses how to connect the strengths from both CX and UX teams to provide an overall winning customer experience.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
UX in Agile Contexts: How to Run a Product Design Sprint
by Mark Di Sciullo, TandemSeven
A product design sprint is a five-day series of interactive exercises (or workshops). They take a product, service or feature from initial design idea through prototyping and user testing. It’s a process that orients the entire team around a design and aims their efforts at hitting clearly defined goals.
This process is a useful starting point when kicking off entirely new products, features, workflows, and businesses. They are also ideal for solving problems with an existing product feature or service.
The good news is it’s not all work-there’s a lot of fun involved. The process involves drawing, collaborating, discussions, healthy debate, critiquing, voting, laughing and crying (sometimes experienced during user testing). Your team will experience a clear sense of accomplishment throughout the duration of the sprint and will come out of the process with actionable results.
I Heard React Was Good
with Ryan Christiani
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
OBJECTIVE
Break down the concepts behind React and make it easy for people to start building with it.
TARGET AUDIENCE
JavaScript developers or project mangers looking to get a better understanding of React.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate understanding of JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API.
An Introduction to React for individuals new to reactive technology. The presentation goes through React lifecycles, events, components and explains the shift in programming paradigms
Getting Started with React, When You’re an Angular DeveloperFabrit Global
If you’re an Angular developer looking into expanding your stack with React, this presentation will come in handy! It is an insightful introduction to React in comparison with Angular, where you will find all the basic knowledge you need to get started.
We’ll deep-dive into tech details such as:
● Virtual DOM
● JSX
● Functional vs Class-Based Components
● State
● How to Style
● Requests
● Upgrading: Redux and Flux and more!
You can also check out the full article version here: https://blog.fabritglobal.com/product-development/getting-started-with-react-angular-developer/
Presented at FITC Toronto 2016
See details at www.fitc.ca
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concept of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
Objective
Break down the concepts behind React and make it easy for people to start building with it.
Target Audience
JavaScript developers or project mangers looking to get a better understanding of React.
Assumed Audience Knowledge
Intermediate understanding of JavaScript.
Five Things Audience Members Will Learn
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
Improperly architected applications may work, may perform well, and may meet the acceptance criteria, but the ability to maintain them degrades over time. This presentation will show some of the common mistakes made when building large web applications, how to be aware of them, correct them, and hopefully prevent them.
Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel
React js for beginners, learn react js with basic code setup and code examples with general understanding. beginners guide for basic react js programming with examples
At Lia Infraservice we create Dynamic Websites. Become a front-end React JS developer and be a part of our tech-savvy Web App Development Company in Chennai.
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile application
A talk I gave at Montreal React Native Meetup (August Edition)
This talks is dedicated to Reactotron, a debugging desktop application that tightly integrate with React and Redux as well as providing nice debugging goodies like network inspection, async storage inspection, screenshot, overlay and more.
The outline of the talk is:
What is it?
How does it work?
What it can do for you?
* Redux State Management
* Reporting & Logging
* Networking
* Miscellaneous
Slides include presenter notes.
Similar to Getting Started with React-Nathan Smith (20)
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
3. • Father of two rambunctious boys, who
are big fans of Star Wars and Legos.
• Self-taught. That just means I pestered
lots of people until I learned how to do
this stuff. Yet, I still doubt myself daily.
• I build the "legacy" software of tomorrow.
• I generally have a "get off my lawn"
attitude towards emerging technology.
Nathan Smith
Principal Front-End
Architect
Introduction
6. Perhaps unsurprisingly, my off
the cuff, ill-informed reaction…
ended up being totally wrong.
(But, admitting when you're wrong
is part of being a grown-up, right?)
8. Today, I would like to talk
to you about the "three Rs."
•Reading
•wRiting
•aRithmetic
9. There are three fundamental
aspects of most React apps.
•React = the "V" (and "C") layer.
•Redux = the "M" layer.
•Router = um, the "URL" layer? :)
10. PROOF POSITIVE OF COOL PROJECTS? LOGOS!
github.com/reactjs/react-routergithub.com/reactjs/reduxgithub.com/facebook/react
11. Actually, my projects are more like this.
Accounting.js Babel ECMAScript 6+ ESLint
Jest Lodash Markdown Moment.js
NPM PostCSS React ReactDOM
React Router React Test Utils Redux Sass (SCSS)
Sass-Lint Standard Webpack window.fetch
15. NOTE:
First off, let me say that what I am showing
you today is simply "a" way to do React.
It is not necessarily "the" (right, only) way.
This is simply the approach we have settled
on, after trial and error with various projects.
16. One thing to keep in mind when working
with React is the oft-repeated phrase…
"Everything is a component."
A component is essentially anything
that looks like this: <UppercaseTag>
(Components may contain other components.)
17. Any time you see something like this…
<UppercaseTag />
<UppercaseTag> content </UppercaseTag>
…that is usually a React "class," which may or may
not be an actual JavaScript (ECMAScript 6) class.
For the purpose of this talk, let's assume they all are.
18. NOTE:
Syntax that looks like HTML but is
embedded (not simply within a string)
in JavaScript is referred to as "JSX."
It is an artificial construct that means:
React.createElement(UppercaseTag, …)
19.
20.
21. Conceptually, all React apps are structured like this.
– great-grandparent
–– grandparent
––– parent
–––– child
–––– child
–– grandparent
––– parent
–––– child
–––– child
22. Components talk to each other via "props."
<UppercaseTag foo='bar' />
^ Here, the parent of <UppercaseTag> is passing
down a prop called foo, with the value of 'bar'.
Within the UppercaseTag class, that is usable via…
this.props.foo // "bar"
23. Typically, in order for a child to talk to a parent, the parent
component passes a callback function prop to the child.
Here's an example of how we use our <Input /> component.
<Input
handleChange={
function (e, value) {
// `e` is the event.
// `value` is the *.value of the input.
}
}
/>
24. Q: What if the parent does not "care" about the grandparent or the
child, other than the fact that they are nested within one another?
– grandparent <—> "parent" props
–– parent <—> "grandparent" and "child" props
––– child <—> "parent" props
25. A: That is why Redux was created, to allow each component to
get and/or set changes to a shared object store, aka "app state."
– grandparent <—> Redux
–– parent
––– child <—> Redux
^ If the parent has no inherent reason to care about the shared
state, it need not be involved as an unnecessary middleman.
26. NOTE: Dan Abramov is
on the React team, and is
the creator of Redux.
27. NOTE: Ryan Florence is
one of the creators of
React Router. He does
not usually use Redux.
28. You may sometimes hear about local state as being confined to each
individual React component. That is correct. Components can have...
this.state.batmanIdentity // "Bruce Wayne"
this.state.checked // boolean
this.state.hasPlaceholder // boolean
this.state.value // string
…data that is internal. That self-contained state can be shared with child
components via props, and can be passed to parents via callback functions.
Redux "app state" makes things like this.props.foo available to multiple
components, from a source other than their parents. Redux is a "parent to all."
30. Angular apps usually
have "decorated" HTML,
with <tag ng-foo="…">
attributes sprinkled
throughout. HTML loads,
JS parses it, and then
applies functionality.
31. React apps usually have
a very minimal HTML
page, with a single
insertion point, such as
<div id="app"> and then
the rest of the markup is
generated entirely by JS.
32. Having full knowledge of the generated HTML, React is
able to keep track of the "virtual DOM" and do precise
updates accordingly. This means you rarely, if ever,
actually make any of your HTML changes directly.
No more typing… $('#foo').addClass('bar')
33. Anatomy of a React Component
NOTE:
This is an contrived example. You
would not normally use internal
state, when something is just
directly set via props anyway.
However, this illustrates the
relationship between state and
props. State is internal, whereas
props come from a component
that resides a "level above."
34. Anatomy of a React Component
NOTE:
Most of the time, you can safely
leave out the constructor. It is
called implicitly, if absent.
This example also shows how
you might use defaultProps, to
provide a fallback placeholder for
this.props.name. This is handy
when awaiting an Ajax request.
41. How I feel about neatly nested nested React components.
bestpysanky.com/9-pcs-10-Semenov-Russian-Nesting-Dolls-p/nds09000.htm
42. This index.js file kicks off
the entire app. It pulls in
<Provider> as the first
component, which wraps
{routes} and makes
shared Redux "app
state" available.
43. In routes.js we have the
pattern matching of
various paths, and their
respective components.
We are also setting a title
prop that will be added to
the <title> tag via a Page
component.
44. This a simple <Page>
level component. In this
case, it is the fallback for
when a route is not
found. We are pulling in a
Markdown file, with a
basic "404" message.
It utilizes the <App>
layout component,
wrapping the content.
45. This is an example of the
<App> layout
component, which pulls
in app level header, main,
footer, etc.
{this.props.children} is
the Markdown content,
passed forward from the
<Page> component.
46. This is the <AppHeader>
component, which was
being used from within
the <App> component. It
contains the logo, and a
few links in a list.
It is making use of the
"Unsemantic" grid, via
<Grid> components.
47. Here, the <AppMain>
component is basically
just a pass-through for
content, simply wrapping
it in <main role="main">
for accessibility and
styling purposes.
49. Accessibility is best when done with advanced planning. For the
components we build, we make sure it is not just an afterthought.
50. This is actually an example of
the <AccordionMulti>
component, a not mutually
exclusive version of the
<Accordion> component.
51. First, the initial selected
state is set, based on
props passed in from the
parent component.
If it does not exist, then
the accordion starts out
completely collapsed.
We also ensure a unique
id, to map ARIA roles to
various elements.
52. In the event that the parent
component wants to override
the internal state, we have
componentWillReceiveProps
which will potentially cause a
state change by calling…
this.setState({key:val})
53. The handleClick method
is called internally when
an accordion header is
clicked. This sets the
component state, and if a
this.props.handleClick
callback exists from the
parent, it will call it too.
54. Here, an otherwise
tedious process is made
fully automatic. That is,
obviating the manual
assignment of a unique
id to each header and
panel, in order to ensure
ARIA accessibility hooks
are properly associated
to their peer elements.
55. In the render method, ARIA
roles are set, based on the
internal component state.
For each section of accordion
content, a child component
<AccordionHeader> is
created.
Also note, an accordion is
technically a role="tablist"
57. <Page> is like Tony Stark. Redux connect adds the "suit" to this.props
This is done through a process called "currying," when a function returns another, modified function.
58. First, we need to import
bindActionCreators and
connect from redux, and
react-redux. These will
allow us to make external
functions usable within
the <Page> component.
59. Next, we import our own
"actions" from the
various files we have
stored in the directory
"/source/redux/actions".
This directory is not to
be confused with NPM's
"/node_modules/redux".
60. At the end of the file, we
have Page.propTypes
validation, so that React
can warn us if the wrong
type of props are passed.
string vs. boolean, etc.
63. Lastly, connect uses
"currying" to make these
changes innate to <Page>.
You could think of <Page> as
Tony Stark, and the result of
the connect call as wrapping
him in an Iron Man suit.
<Page> then has all the
additional props and
functions applied to it from
Redux.
64. Thanks to the aforementioned
currying of connect, we now
have multiple "action"
methods available from
Redux, that can be called from
within our <Page> component.
65. When we actually make use of
<AccordionMulti> we pass in
the selectedFaqAccordion
"app state," and the callback
handleClickFaqAccordion
which triggers our Redux
"action" state change.
67. The way Redux layers
together various state
changes into one object
reminds me of the SNL skit
"Taco Town" where they
wrap a hard-shell taco in a
soft-shell taco, in a crepe,
in a pizza, in a pancake,
that is deep fried…
68.
69. In "/source/redux/index.js" we
have what is referred to as a
rootReducer, which
aggregates the various child
reducers. A common mistake
is to forget to add a new
reducer here. That can lead to
frustration when debugging.
70. In "/source/redux/_types.js"
there is a list of action types,
which have been assigned to
constants. While this may
seem silly, because they are
just strings, it enforces unique
action names. This is helpful
as your project grows larger.
71. Each reducer reads from the
aforementioned _types.js file,
and potentially pivots based
on what type of action it is.
In this case, we are saving
changes to the selected state
of the accordion. Notice that
the state is being get/set by
utils.storage, which allows the
state change to persist across
page loads, saved in
window.localStorage
72. This file makes the function
this.props.updateFaqAccordion
available to any component
where connect is used on it.
It passes forward any changes to
the accordion's selected state.
76. By default, Jest wants to be
helpful and "mock" every file you
include. But, we can just disable
that, as we know exactly what we
want to test. It speeds things up.
77. We give our test suite a name,
the same as our
<UppercaseTag>. Then, we
render it into the testing concept
of a "document," and assign a
parent reference.
Then we can use vanilla DOM
methods: querySelectorAll, etc.
78. For each aspect we want to test,
we pass a string and function to
"it" — made available by Jest.
it('does something', …)
Each resulting pass/fail is shown
in the command line, via…
npm run test
80. In the "/source/utils/index.js" file,
we import various utility
methods, and bundle them under
a single object, named utils.
81. In the "/source/utils/_ajax.js" file,
we have a wrapper around
window.fetch — which is the new
HTML5 replacement for the
quirkiness of XMLHttpRequest.
You can specify a host, url,
method, params — sent as query
or body based on method — and
callbacks for success/error.
This file is not presently used in
the React starter project, but we
do make use of it in real projects
that require us to do Ajax.
82. I use this utils.save method quite
a bit, when I need to view an API
response that is too
cumbersome to read as JSON in
the browser's developer tools.
Instead, it causes the browser to
download a nicely formatted
*.json file, so I can scroll through
it using a text editor instead.
83. Clicking the Save JSON
button on the "/#/profile"
page of the demo app will
download a JSON file…
form_data.json
In it, you will see the
current state of the form
fields and their values.