React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses virtual DOM which improves performance and can render on both client and server. React encourages a component-based approach where UI is broken into independent reusable pieces that accept external data through properties. Components manage their own state which allows the UI to update over time in response to user input. This makes React code more predictable and easier to debug than traditional two-way data binding.

1. React JS
Introduction to React

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

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

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

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

6. 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

7. React Features
7

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

9. 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

10. 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

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

12. 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

13. 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

14. Environment Setup
14

15. 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

16. 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

17. 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

18. 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

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

20. 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

21. 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

22. 2. JavaScript Expressions
class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}
22

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

24. 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

25. 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

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

27. 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

28. class App extends React.Component {
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

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

30. ● 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

31. Thank You!
31