22. create a template for reactjs with webpack
home
Contents
1. Description
- This is about a reactjs project for template.
- webpack is used.
- I would like to create a project, from some working sample.
- Lynda.com, Reactjs Essential Training, Chapter 6, section 4 is used as the template.
- Webpack is simply used to reduce the number of http requests.
- It is difficult for me to build from scratch. Keep all the libraires in sync is the hurdle.
- With a working sample at hand, enter npm install.
- I assume OK to use an older verion of webpack.
- When I tries to use a image, I experienced some difficult. I simply not use webpack for this. It will be an extra http request for the image.
- Routing is needed for multiple pages.
- Menu is needed for being user friendly.
- For data source, I'll add a few more for the interface with rest web services.
steps to to the app running.
step 1: In code visual studio, I create a folder, cloning from the sample code.
step 2: In my mac, I drag and drop the folder into the ide.
step 3: From the menu view, click integrated window.
step 4: in the terminal window, I enter npm install
step 5: edit package.json as below
"script": {
"build": "webpack",
"dev": "webpack-dev-server"
}
step 6.1: enter npm run dev to launch the server
step 6.2: open a browser, enter locahost:3000, the page is like below:
|-----------------------------------------------------
| 1 icon1 days
| 1 icon2 days 0 icon2 days
|
|-----------------------------------------------------|
| home add list |
|-----------------------------------------------------|
* the above is the home page, include two parts
- the summary of a user's ski data
- the menu for home, add, list
* there are some other pages, home, add, list...
examine a subfoler structure
|dist
| assets
index.html
examine webpack.config.js
output: {
path: "dist/assets",
filename: "bundle.js",
publicPath: "assets"
},
examine /dist/index.html
in script tag type="text/javascript" src="assets/bundle.js"
- When you run the server, the bundle file is a virtual one.
- It is not a physical file, it is in memory. It is easy to easy for listen and respond.
- It you stop the server, and enter npm run build, a real file is created.
- For either way, folder assets is referred.
notes
- All the react activities is in a client's browser.
- A server only hosts a html and a bundle.js
2. data
- This app is for demo purpose. One data item is hard coded.
Other subfolder structure is as below:
| src
| components
. Whoops404.sj
. App.js
. Menu.js
. SkiDayCount.js
. AddDayForm.js
. SkiDayList.js
. SkiDayRow.js
/src/components/App.js
export class App extends Component {
constructor(props) {
super(props)
this.state = {
allSkiDays: [
{
resort: "Squaw Valley",
date: "2016-01-02",
powder: true,
backcountry: false
}
]
}
this.addDay = this.addDay.bind(this)
- addDay is an event handler.
- binding is required.
}
- The data structure is array.
- The main data source is from rest web service before the component App is loaded..
- A user can add one data item from a form.
- The data serves two views,
- summary view, included in the home page.
- detail view, in a tablular structure.
- The data is storage as state.
Therefore, if you change the state data, the corresponding views will be updated automatically.
3. JSX and Component
3.1 JSX
- Within a render method of a react-dom or react component, any element is called JSX element.
- A react component, HTML elements, icon elements are JSX elements for display.
- Router and route are also elements.
- a route element has two attributes.
- the first is path.
- the second is component.
- defining the relationship between a url path and its corresponding component.
3.2 Component
- A component has a higher isolation level. For example, the scope of react lifecycle method is component.
- Components can be structured in hierarchy from containing context.
- The following are the related hierarchies in this demo.
- start the server, open the chrome browser, select a page, open the developer tool, select its menu item- react.
---- home page ------
router
App
div
Menu
SkiDayCount
note: In addition to display the hierarchy, the state data is also display.
allSkiDays(array)
resort, date, powder, backcountry
---- list page --------
router
App
div
Menu
SkiDayList
table
thead
tbody
SkiDayRow(many)
---- form page --------
router
App
div
Menu
AddDayForm
4. index.js
<![CDATA[
...
import { Router, Route, hashHistory } from 'react-router'
window.React = React
render(
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path="list-days" component={App}>
<Route path=":filter" component={App} />
</Route>
<Route path="add-day" component={App} />
<Route path="*" component={Whoops404}/>
</Router>,
document.getElementById('react-container')
)
]]>
- route is used to connect a url and its component.
- Later, in App.js, a child component will be selected based on its route.
5. Menu.js
<![CDATA[
import { Link } from 'react-router'
import HomeIcon from 'react-icons/lib/fa/home'
...
import '../stylesheets/ui.scss'
export const Menu = () =>
<nav className="menu">
<Link to="/" activeClassName="selected">
<HomeIcon />
</Link>
....
</nav>
]]>
- It is a shared component at the botoom.
- Css style menu is referred in a different folder.
- JSX element nav is from react.
- JSX element Link is from Router
---- one test on css ----------
1. open /src/stylesheets/ui.scss
2. edit
nav.menu {
...
bottom: 0;
...
}
change bottom to top
3. save
4. the server will be automatically update.
The menu will be postioned from the bottom to the top.
6. App.js - render method
<![CDATA[
render() {
return (
<div className="app">
<Menu />
{(this.props.location.pathname === "/") ?
<SkiDayCount total={this.countDays()}
powder={this.countDays(
"powder"
)}
backcountry={this.countDays(
"backcountry"
)}/> :
(this.props.location.pathname === "/add-day") ?
<AddDayForm onNewDay={this.addDay}/> :
<SkiDayList days={this.state.allSkiDays}
filter={this.props.params.filter}/>
}
</div>
)
}
]]>
- A switch statement is not used.
- A nested if-then-else statement is not used
- ES6 ternary operator is used in a nested way, using the url to select a child component.
- Component menu is used for all conditions.
- When the root url is used, component SkiDaycount is selected.
7. App.js and SkiDayCount.js
7.1.1 ----------- Component App is defined in App.js with ES6 class syntax
export class App extends Component {
constructor(props) {
super(props)
this.state = { // state data
allSkiDays: [
{
resort: "Squaw Valley",
date: "2016-01-02",
powder: true,
backcountry: false
}
]
}
.....
}
7.1.2 ----------- Component App has a helper method ------
countDays(filter) {
const { allSkiDays } = this.state
return allSkiDays.filter(
(day) => (filter) ? day[filter] : day).length
}
// Array.filter(anonymous function) to get subset of array
// if a filter is provided, and the filter is matched, put it in the subset.
// if a filter is not provided, put it in the subset anyway.
// get the length of the subset of array
<![CDATA[
7.1.3 ----------- Component App uses SkiDayCount in its render method------
<SkiDayCount total={this.countDays()}
powder={this.countDays("powder")}
backcountry={this.countDays("backcountry")}/>
]]>
7.1.3 ------------ using the react developer tool to examine -----
- run the server, open the chrome, select the home page
- open the developer tool
- in the top menu, select React
- You see three panes. The first one is the page dispaly.
- The second one is the JSX element hiearachy chart.
- Router
...
- App
- div
- Menu
- SkiDayCount
- The third one is for data
- Props
- State
- allSkiDays
- 0(note: [0]
- resort
- date
- powder
- backcountry
7.2 ----------- component SkiDayCount --------------------
<![CDATA[
...
const calcGoalProgress = (total, goal) => { // helper method
return percentToDecimal(total/goal)
}
// SkieDay is defined as an stateless function.
// the function parameters is the default values
// ignore the defaults, if they are provided from the caller like this case.
export const SkiDayCount = ({total=70, powder=20,
backcountry=10, goal=100}) => (
<div className="ski-day-count">
<div className="total-days">
<span>{total}</span>
<Calendar />
<span>days</span>
</div>
<div className="powder-days">
<span>{powder}</span>
<SnowFlake />
<span>days</span>
</div>...
</div>
)
SkiDayCount.propTypes = { // define the attribute types
total: PropTypes.number,
powder: PropTypes.number,
backcountry: PropTypes.number,
goal: PropTypes.number
}
]]>
8. Tabular display
8.1 Using the react tool to examine in the chrome
----- 8.1.1 page display --------------
Date Resort Powder Backcountry // table title
all days powder days backcountry days // links for filter
2018-4-7 BlueHill * // table row
2018-1-1 White Hill * // table row
------ 8.1.2 JSX hierarchy --------------
router
App
Menu
SkiDayList
table
thead
tr
th - date
th - resort
th - powder
th - backcountry
tr
link
link
link
link
tbody
SkiDayRow
tr
tr
note: If you click the link for powder days,
you'll see params= {filter:"powder"}
inside the hierachy window - App tag
note: * If you click the link, the url will be created.
* like localhost:3000/#/list-days/powder
* powder is a property for filter.
* Both the list and the filter will be passed from App to SkiDayList as attributes.
* The filter is used for the selected list.
8.2 index.js
- the route below shows the relation between a url and the coresponding component.
- the nested route provides a filter.
<![CDATA[
<Route path="list-days" component={App}>
<Route path=":filter" component={App} />
</Route>
]]>
notes: later in the SkiDayList.js
- Component SkiDayList is a table.
- In addition to 4 column headers - Date, Resort, Powder, BackCountry.
- Three Links are added below
- /list-days/
- /list-days/powder
- /list-days/backcountry
- When you select the 2nd or 3rd link, :filter will be set.
- You can verify this by using the react tool in chrome browser.
- When you select powder day, you only want to see them only.
8.3 App.js
<![CDATA[
<SkiDayList days={this.state.allSkiDays}
filter={this.props.params.filter}/>
]]>
8.4 SkiDayList.js
8.4.1 SkiDayList is implemented as a stateless function.
export const SkiDayList = ({days, filter}) => {...}
<![CDATA[
8.4.2 Three links for filtering is implmented in table header area.
<table>
<thead>
<tr>
<th>Date</th>
<th>Resort</th>
<th>Powder</th>
<th>Backcountry</th>
</tr>
<tr>
<td colSpan={4}>
<Link to="/list-days">
All Days
</Link>
<Link to="/list-days/powder">
Powder Days
</Link>
<Link to="/list-days/backcountry">
Backcountry Days
</Link>
</td>
</tr>
8.4.2 The following is the implementation for table row (1 to many)
<tbody>
{filteredDays.map((day, i) =>
<SkiDayRow key={i} {...day}/>
)}
</tbody>
]]>
the sequences are listed as below:
1. When component SkiDayList is created, two attributes are passed in - days, filter.
2. Create a constant filteredDay as below:
const filteredDays = (!filter ||
!filter.match(/powder|backcountry/))?
days:
days.filter(day => day[filter])
3. tablular dispaly
In tag tbody, use map method to use data to format for each.
Component SkiDayRow is the child to encapsulate the row implementation.
The rows are peers. The list and the row is in 1 to many relationship.
8.5 SkiDayRow.js
<![CDATA[
import { PropTypes } from 'react' ...
export const SkiDayRow = ({resort, date, // stateless function
powder, backcountry}) => (
<tr>
<td>
{date}
</td>...
<td>
{(powder) ? <SnowFlake/> : null} // if true, use that icon
</td>...
</tr>
)
SkiDayRow.propTypes = {
resort: PropTypes.string.isRequired,
...
}
]]>
9. form and passing data to parent component
the steps are listed below:
- 9.1 In the home page, click the add new icon.
- 9.2 In index.js, the route is created, and component App is reated.
<![CDATA[
* 9.3 in App.js, render method, the child is created with the following code
<AddDayForm onNewDay={this.addDay}/>
]]>
notes:
- onNewDay is the attribute name; {this.addDay} is the attribute value.
- onNewDay can be replaced with xyz, addDay can be replace with abc...
- When a form is created, no data is required to passed into it.
- This is for the sequence from the child, AddDayForm to the parent, App.
<![CDATA[
* 9.4.1 in AddDayForm.js, create the form for data entry.
let _resort, _date, _powder, _backcountry
const submit = (e) => {
....
_resort.value = '' ....
// preparing the data to the parent.
}
return (
<form>
<input id="resort"
ref={input => _resort = input}/>
......
)
]]>
- A form is rendered.
- A user can fill the form, and click submit button.
- When the submit is clicked, the input can be referenced in some local variables.
- The local vaiables are used to create data, passing to the parent component, App.
- the code is ref={input => _resort = input}
- Atribute ref stores the new value.
* 9.4.2 data from child to parent
the event handler for button click
const submit = (e) => {
e.preventDefault()
onNewDay({
resort: _resort.value,
date: _date.value,
powder: _powder.checked,
backcountry: _backcountry.checked
})
_resort.value = ''
_date.value = ''
_powder.checked = false
_backcountry.checked = false
}
Component AddDayForm is defined as a stateless function
export const AddDayForm =
({ resort, date,powder,backcountry,
onNewDay }) => {...}
- onNewDay is a FUNCTION in this child component.
- It creates the data, passing to the parent, App.
- From its perspective, the componet AddDayForm has two parts of arguments.
- The first part is the data - resoirt, date, powder, backcountry.
- The second part is the function name.
- onNewDay in the parent component is a EVENT.
- In the child component, click submit button to trigger the event.
Function onNewDay is called, the data is prepared.
Reactjs code will trigger a event.
When it finds a subscriber, that is App. A corresponding handler will be called.
This is the way to pass data from a child to its parent.
<![CDATA[
* 9.5 using the form data in App, the parent.
// create the child component
<AddDayForm onNewDay={this.addDay}/>
....
// the event handler
addDay(newDay) {
this.setState({
allSkiDays: [
...this.state.allSkiDays,
newDay
]
})
// in the constructor, the following code is needed
// because addDay is an event handler.
// Method bind to make it as a component method.
this.addDay = this.addDay.bind(this)
]]>
- From a parent's perspective, the attribute format is different.
- in addDay(newDay), addDay is the name of the event handler, newDay is the data name.
- then, update the state to refresh all the views.
10. connect to rest services
- Very often, the data will be from a rest web service, or a database server
- In this demo, the get data case will be simulated, the post data will be discussed.
------------------- get demo -----------------------------
// in App.js before render method,
// add a component life method, componentWillMount
// Normally, when do so, the service side work must be prepared.
// Here, a rest api services, not for this client, is simulated for this demo.
// First make sure the library for fetch is installed.
// import fetch from 'isomorphic-fetch'
// line 1: fetch is to connect.
// line 2: convert the data to json
// line 3: get part of the json data
// line 4: update the state data
// then, hijack with the data for this demo.
// run and see the result.
componentWillMount(){
fetch('https://api.randomuser.me/?nat=US&results=12')
.then(response => response.json())
.then(json => json.results)
.then(data => this.setState({
allSkiDays: [
...this.state.allSkiDays,
{
resort: "White MT", date: "2018-04-10",
powder: false,
backcountry: true
}
]
}) )
}
------------------- post intro -------------------
in AddDayForm.js, the submit handler for rest post request.
choose some libraries like axios,
use methos like axios.post