React outbox

React
Introduction to React
By Angela Lehru
@LehruAJay

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.

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'));

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

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>

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"
},

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

Let’s build an Inventory App

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

State
A class component
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;

Handling events
state = {
count:0
}
handleIncrement () {
console.log(‘Add clicked’)
}
render() {
return (
<Fragment>
<button onClick={this.handleIncrement}>Add</button>
...
</Fragment>
);
}

Updating state
this.setState({ value: state})
state = {
value:0
}
handleIncrement = () => {
console.log(‘Add clicked’, this.state.value)
}
render() {
return (
<Fragment>
<button onClick={this.handleIncrement}>Add</button>
...
</Fragment>
);
}

Parent - Child Components
class Items extends Component {
render() {
return (
<Fragment>
<Item />
<Item />
<Item />
</Fragment>
);
}

Rendering Lists
state = {
tags: [tag1, tag2, tag3]
}
render() {
return (
<Fragment>
<ul>{this.state.tags.map(tag => <li key={tag}>{tag}</li>}</ul>
...
</Fragment>
);
}

Parent - Child Components
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;

Passing Data to components(props)
state = {
value:this.props.value
}
render() {
return (
<Fragment>
...
</Fragment>
);
}
export default Items;

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>

Stateless Functional Components

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

React outbox

More Related Content

What's hot (20)

Similar to React outbox (20)

Recently uploaded (20)

React outbox

Editor's Notes