Introduction to React JS

React JS
Introduction to React

What is React?
React is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
2

http://coenraets.org/present/react/#6 3

http://coenraets.org/present/react/#7
4

Build components, not templates
● UI Components are the cohesive units
● UI description and UI logic
● Full power of JavaScript to express UI
5

React challenges established best practices
in traditional MVC framework
React can also render on the server using Node, and it can power native apps
using React Native.
React implements one-way reactive data flow which reduces boilerplate and is
easier to reason about than traditional data binding.
6

1. JSX
JSX is JavaScript syntax extension. It isn't necessary to use JSX in
React development, but it is recommended.
8

2. Components
React is all about components. You need to think of everything as a
component. This will help you to maintain the code when working on
larger scale projects.
9

3. Unidirectional data flow and Flux
React implements one way data flow which makes it easy to reason
about your app. Flux is a pattern that helps keeping your data
unidirectional
10

4. License
React is licensed under the Facebook Inc. Documentation is licensed
under CC BY 4.0.
11

React Advantages
● React uses virtual DOM which is JavaScript object. This will
improve apps performance since JavaScript virtual DOM is faster
than the regular DOM.
● React can be used on client and server side.
● Component and Data patterns improve readability which helps to
maintain larger apps.
● React can be used with other frameworks
12

React Limitations
● React only covers view layer of the app so you still need to choose
other technologies to get a complete tooling set for development.
● React is using inline templating and JSX. This can seem awkward
to some developers.
13

While React can be used without a build pipeline, it is
recommend to use it up to be more productive.
A modern build pipeline typically consists of:
1. Package manager - Yarn or npm.
It lets you take advantage of a vast ecosystem of third-party
packages, and easily install or update them.
2. Bundler - webpack or Browserify.
It lets you write modular code and bundle it together into small
packages to optimize load time.
3. Compiler - Babel.
It lets you write modern JavaScript code that still works in older
browsers. 15

Using a CDN
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
16

create-react-app
● Create React apps with no build configuration.
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
17

Create React App is the best way to start building a new React single page
application.
It sets up your development environment so that you can use the latest
JavaScript features, provides a nice developer experience, and optimizes your
app for production.
Create React App doesn't handle backend logic or databases; it just creates a
frontend build pipeline, so you can use it with any backend you want.
It uses webpack, Babel and ESLint under the hood, but configures them for you.
18

Hello World!
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
19

React uses JSX for templating instead of regular JavaScript. It is not necessary
to use it, but there are some pros that comes with it.
● JSX is faster because it performs optimization while compiling code to
JavaScript.
● It is also type-safe and most of the errors can be caught during
compilation.
● JSX makes it easier and faster to write templates if you are familiar with
HTML.
20

1. Nested Elements
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
} 21

2. JavaScript Expressions
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}
22

3. Styling
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}
23

Components & Props
Components let you split the UI into independent, reusable pieces, and
think about each piece in isolation.
They accept arbitrary inputs (called "props") and return React elements
describing what should appear on the screen.
24

class Welcome extends React.Component
{
render() {
return <h1>Hello,
{this.props.name}</h1>;
}
}
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
With ES6Javascript function
25

But Props are Read-Only!
All React components must act like pure functions with
respect to their props.
Components can be reused
26

State allows React components to change their output over
time in response to user actions, network responses, and
anything else, without violating this rule.
State
27

constructor(props) {
super(props);
this.state = {
header: "Header from state...",
"content": "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
State is the place where the data
comes from.
Always try to make your state as
simple as possible and minimize
number of stateful components.
If you have, for example, ten
components that need data from
the state, you should create one
container component that will keep
the state for all of them.
28

1. Components
2. Backend
3. Maintainable code
4. Learning curve
Thinking in React
29

● React is a library for building composable user interfaces.
● It encourages the creation of reusable UI components which
present data that changes over time.
● Lots of people use React as the V in MVC.
● React abstracts away the DOM from you, giving a simpler
programming model and better performance.
● React can also render on the server using Node, and it can power
native apps using React Native.
● Implements one-way reactive data flow which reduces boilerplate
and is easier to reason about than traditional data binding.
Summary
30

Introduction to React JS

More Related Content

What's hot (20)

Similar to Introduction to React JS (20)

More from Bethmi Gunasekara (6)

Recently uploaded (20)

Introduction to React JS