A brilliant intro to React.js for a less technical audience by Jack Hoy, Software Engineer at Red Badger

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.