Building applications with React

1. React
Introduction to React
By Angela Lehru
@LehruAJay

2. What is React
A Javascript library for building user interfaces like web applications.
React can be used as a base in the development of single-page applications.

3. Create and Render a React Element
const element = React.createElement(
'h1',
{
id: 'main-title',
title: 'This is a title'
},
'Hello World'
)
ReactDOM.render(element, document.getElementById('root'));

4. React Dom
A library that lets React connect to and update the DOM

5. JSX
A syntax extension to Javascript that is used with React to describe elements in
the UI. As we’ll see, it resembles writing HTML.
We need Babel to transpile JSX into Javascript to be rendered on the browser. Try
it out babeljs.io/repl
To add Babel in a project:
<html/><head/> - <script src="https://unpkg.com/babel-
standalone@6.15.0/babel.min.js"></script>
<html/><head/> - <script type="text/babel" src="app.js"></script>

6. Set up a development server
Install http-server
1. npm init -y
2. npm i -S http-server
Add a start script to the package.json
"scripts": {
"start": "http-server"
},

7. Create React Project
create-react-app is an abstract way of getting started on a React Project. It
configures:
- Development server
- Webpack
- Babel
To install via command line/terminal:
npx create-react-app project-name

8. Let’s build an Inventory App

9. Components

10. Components
A typical functional component
import React, { Component, Fragment} from 'react';
const HelloWorld () {
return (
<h1>Hello World</h1>
);
}
export default HelloWorld;

11. State
A class component
import React, { Component, Fragment} from 'react';
class MainBody extends Component {
state = {
value:0
}
formatCount() {
return this.state.value === 0 ? 'Zero' : this.state.value
}
render() {
return (
<Fragment>
<span>{this.formatCount()}</span>
...
</Fragment>
);
}
}
export default MainBody;

12. Handling events
import React, { Component, Fragment} from 'react';
class MainBody extends Component {
state = {
count:0
}
handleIncrement () {
console.log(‘Add clicked’)
}
render() {
return (
<Fragment>
<button onClick={this.handleIncrement}>Add</button>
...
</Fragment>
);
}
export default MainBody;

13. Updating state
this.setState({ value: state})
import React, { Component, Fragment} from 'react';
class MainBody extends Component {
state = {
value:0
}
handleIncrement = () => {
console.log(‘Add clicked’, this.state.value)
}
render() {
return (
<Fragment>
<button onClick={this.handleIncrement}>Add</button>
...
</Fragment>
);
}
export default MainBody;

14. Parent - Child Components
import React, { Component, Fragment} from 'react';
class Items extends Component {
render() {
return (
<Fragment>
<Item />
<Item />
<Item />
</Fragment>
);
}
export default MainBody;

15. Rendering Lists
import React, { Component, Fragment} from 'react';
class MainBody extends Component {
state = {
tags: [tag1, tag2, tag3]
}
render() {
return (
<Fragment>
<ul>{this.state.tags.map(tag => <li key={tag}>{tag}</li>}</ul>
...
</Fragment>
);
}
export default MainBody;

16. Parent - Child Components
import React, { Component, Fragment} from 'react';
import MainBody from './components/mainBody';
class Items extends Component {
state = {
items: [
{ id: 1, value: 1 }
}
render() {
return (
<Fragment>
{this.state.items.map(item =>
<MainBody key={item.id} value={item.value}></MainBody>)}
</Fragment>
);
}
export default Items;

17. Passing Data to components(props)
import React, { Component, Fragment} from 'react';
class MainBody extends Component {
state = {
value:this.props.value
}
render() {
return (
<Fragment>
...
</Fragment>
);
}
export default Items;

18. Passing Children
Special prop called children, we use when we want to pass something between
the opening and closing tags of an element
1. Pass element in the component
2. Pass{this.props.children}in the parent component
<MainBody><h4>Item #{counter.id}</h4></MainBody>

19. React Tree

20. Props Vs State

21. Stateless Functional Components

22. Resources
Link to source code - Github repo
References used:
https://www.youtube.com/watch?v=Ke90Tje7VS0
https://reactjs.org/docs/

23. Questions