Intro to React

Justin Reock
Chief Architect
Rogue Wave Software
Justin has over 20 years’ experience
working in various software roles and
is an outspoken free software
evangelist, delivering enterprise
solutions and community education
on databases, integration work,
architecture, and technical
leadership.
He is currently the Chief Architect at
Rogue Wave Software.

• React is a JavaScript library that focuses on
declarative syntax and virtualization of the DOM
• It allows developers to write highly efficient
JavaScript for the purpose of rendering a UI in a
web browser
• Whereas traditional JavaScript will re-render the
entire DOM during a state change, React will only
render the parts of the DOM that have changed

• Created by Jordan Walke at Facebook
• First deployed on Facebook’s newsfeed in 2011,
Instagram in 2012
• Released under the MIT License as an open source
project in May of 2013
• Additional projects such as React Native for mobile and
React Fiber would follow in 2015 and 2017 respectively

• It’s really these two keywords that sets React apart from
traditional JavaScript UI development
• React doesn’t iteratively draw UI components on the screen
• The developer defines what the final UI should look like, and
React ensures that the DOM is rendered accordingly
• This is a very significant difference from typical HTML
rendering in JavaScript, which typically centers around injecting
HTML using the innerHTML directive
Declarative and Virtualized

• React also virtualizes the entire DOM and uses
JavaScript to render actual HTML in the form of React
Components
• Although you may never directly use it for reasons that
will soon become clear, React generates HTML elements
using the React.createElement() method
• Every UI element rendered in the browser will be
created by a JavaScript call to this method
Declarative and Virtualized

• Right now you may be thinking: ”Why would you ever do that
when its simple enough to just write HTML with in-line
JavaScript?
• Before you storm out of the session room, never to touch React
again, let’s look at why this is actually quite powerful
• React virtualizes the entire DOM – that really means that it
keeps a dynamic model of the UI in-memory, and can
manipulate it on the fly
• Let’s look at a demo…

• We’ll render a bit of HTML using the traditional
innerHTML call, as well as through React
• Then we’ll create a second timer on the page that will
tick up using the JavaScript setInterval() function
• We’ll then demonstrate exactly why this approach is
so interesting
Just the updates, please!

• This is a much different paradigm, but with JavaScript free
to own the entire DOM, we can do interesting things
• Since React just declares the UI composition and updates
itself accordingly, you don’t have to worry about redrawing
parts or all of the UI when something changes
• You can trust React to, well, react to those changes and re-
render itself only when necessary
Subtle but powerful…

• Another important aspect to understand is that React is
not a framework
• It’s a JavaScript library focused just on UI composition
• You’ll use it in concert with other JavaScript libraries,
such as Node.js
• This allows you the freedom to build the other parts of
your app any way you’d like, without having to commit to
an entire framework
Not a Framework

• As you saw in the demo, the React library contains
a method for drawing HTML elements inside of the
DOM
• But, you may never actually need to invoke it
• JSX gives you the ability to just write your elements
in a pseudo-HTML syntax
React.createElement()

• React will assemble these multiple React.createElement()
calls into a tree of components
• Then, upon every state change, React performs a “tree
reconciliation” where it examines the state of every
component and sees if anything has changed
• If something has changed, react updates that part of
the virtual DOM and re-renders the element
ReactDOM.render()

• The special function render() will expect to receive as
input the design elements of your UI
• An anchor element in HTML where it should draw the
object is its second parameter
• Only one element (or a parent element with children)
can be passed, because Babel will convert these
elements into functions
ReactDOM.render()

ReactDOM.render(
<Button1 /><Button2 />,
document.getElementById(‘root’),
);
ReactDOM.render()

ReactDOM.render()
ReactDOM.render(
<div>
<Button1 /><Button2 />
</div>,
document.getElementById(‘root’),
);

• If you promise not to get too upset, I’ll show you how
you’ll generally create elements in React
Ok now I’m really leaving…
function Title() {
return ( <div>
<h1>WTF How Is This Possible?</h1>
</div> );
}
ReactDOM.render(<Title />, document.getElementById(’root’);

• So, yeah, you will write in-line ersatz HTML (really, JSX) and
pass it around as if it was native JavaScript
• It takes a little getting used to, but, it ends up being a lot
cleaner than dozens of createElement() calls
• In fact, when React compiles, it uses a library called Babel to
generate createElement() statements from the JSX
• So the JSX is really never rendered directly, it is interpreted by
Babel and converted to createElement() calls at compile time

• Open up the Babel test portal at https://babeljs.io
• Add some JSX to the test pane after selecting “react”
under the Presets tab
• Watch as Babel displays the equivalent React code
• Hopefully end up a little less nauseated at what JSX is
doing!

• Components are atomic UI elements which will combine
layout with a state and set of properties that React will
maintain
• You will create these components as either JavaScript classes
or functions, and React will use them to render UI elements
• These components are autonomous, and maintain their own
private state and properties
• They can be arranged into parent/child hierarchies, and can
flow data between them

• A function component starts with a function,
obviously
• We’ve actually already seen one:
function Title() {
return ( <div>
</div> );
}

• These can also be defined using the newer JavaScript
function arrow syntax:
const Title = (props) => {
return ( <div>
</div> );
}

• For more complex components, you may want to take
advantage of JavaScript classes
• Those who are more comfortable with OOP as opposed
to Functional programming may prefer creating classes
• I do encourage you to get comfortable with Functional
programming, though
• It is a discipline getting more and more important as
we move to distributed and concurrent application
architectures

class App extends React.Component {
render() {
const profile = this.props;
return <div>
<h1>profile.title</h1>
</div>;
}
…
<App title=“Class Component” prop1=“somethingelse” />

• Components will automatically contain a properties
object that can be interacted with and changed
• These properties are passed in by default as function
parameters in a function component
• Or, they will be their own object, referenced with
‘this.props’ inside of a class component
• Properties are immutable, but can be set with initial
values when a component is rendered

• State inside of a React component consists of two parts
• The first is the state, which is really just a primitive or
set of primitives that can be manipulated
• The second is a setter function which allows you to
update the state of a component
• Both of these entities are exposed by deconstructing a
special hook called useState() which is provided by
React

• We just covered a lot of ground, but when we look at
the code this is actually very straightforward
• Let’s create a function component, and give that
component a set of properties and a state
• And let’s alter that state and watch the result in the
browser
Lets tie it all together

• This is a large topic, but we’ll gently introduce it here
• Recall in the demo that we broke our UI into two
components, a Display and a Button
• The Display object had to react to state changes caused
by the Button’s onClick event handler
• We did this by passing properties into the Display
function
One-way Data Flow

One-Way Data Flow
function Display(props) {
return (
<div>{props.message}</div>
);
}
<Display message={counter.counterValue} />
Here, The App parent (below)
Flows property data to the
Child Display component (above)

• The parent App element has the Display element as its child, so it
is able to flow data down to it
• While this isn’t the only technique for flowing data in React, this is a
pattern you will see often
• You can even pass entire functions to child components, which
the children can then execute to relay data back to the parent
• Don’t worry if this is a little confusing at this point, it is one of
React’s more advanced concepts and just takes some practice
One-Way Data Flow

• Like many things in life, there’s an easy way and a hard way to get
going with React
• The easy way is great, but it obfuscates the setup and so you
can’t really learn from it
• Let’s step through the hard way first (just listing the steps) and then
I’ll introduce the easy way
• I recommend that everyone go through the hard way at least
once so you can become familiar
• It’s a pain, but, it’s worth it to increase your knowledge of React
Let’s start playing!

1) Install Node.js
2) Create root directory
3) npm init
4) Install express with
npm
5) Install react and react-
dom with npm
Just to give you an idea…
6) Install webpack with npm
7) Install BabelJS with npm
8) Install nodemon
9) Install eslint
10)Create webpack app
structure….

Ok ok I’ll stop….

• Thankfully, a special Node.js module called “create-react-
app” exists for you and is kept up to date
• This module is maintained by Facebook and is an
officially supported way to create a React app
• Note that this is only suitable for single-page React
apps, but, that covers most apps since your dynamic
content will all be rendered in the DOM
Huzzah!

1) npx create-react-app my-cool-app
2) cd my-cool-app
3) npm start

• Let’s create a Dev environment using the create-
react-app module through npx
• We’ll then make a couple modifications and watch as
nodemon automatically restarts our process
Small mercies…

• We’ve just scraped the surface, but hopefully you have enough to get
started
• We learned that React is a Declarative library that Virtualizes the DOM
• And we looked at React’s building blocks, components, and demonstrated
their states and properties
• Finally, we walked through setting up a Dev environment
• From here, go check out React’s official tutorial, hosted by the React
community: https://reactjs.org/tutorial/tutorial.html
• Happy hacking, and finally…
Still so much to learn!

LinkedIn – Only Justin Reock in the world apparently!
Twitter – @jreock - But I do get a little political on
there….
Blog - http://blog.klocwork.com/author/justin-reock/
Email – justin.reock@roguewave.com
Feel Free to Reach Out – I Get Lonely…

Intro to React

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Intro to React

Similar to Intro to React (20)

More from Justin Reock

More from Justin Reock (9)

Recently uploaded

Recently uploaded (20)

Intro to React

Editor's Notes