> npm install --save axios
{
"apiUrl": "https://localhost:5001/api"
} import React from "react";
import {apiUrl} from "../../config.json";
export default function App() {
return <></>;
} import App from "./components/part03/Search";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { apiUrl } from "../../config.json";
export default function App() {
useEffect(() => {
axios
.get(apiUrl + "/posts/search?query=")
.then(response => console.log(response.data));
});
return <></>;
} 
import axios from "axios";
import React, { useEffect, useState } from "react";
import { apiUrl } from "../../config.json";
export default function App() {
const [results, setResults] = useState([]);
useEffect(() => {
axios.get(apiUrl + "/posts/search?query=").then(response => {
console.log(response.data);
setResults(response.data);
});
}); 
useEffect(() => {
// ...
}, []);
//...
export default function App() {
// ...
return (
<>
<table className="table">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
{results.map(post => (
<tr key={post.id}>
<td>{post.title}</td>
</tr>
))}
</tbody>
</table>
</>
);
} 
useEffect(async () => {
const { data } = await axios.get(apiUrl + "/posts/search?query=");
console.log(data);
setResults(data);
}, []); Warning: An effect function must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) or returned a Promise.
useEffect(() => {
getResults();
}, []);
const getResults = async () => {
const { data } = await axios.get(apiUrl + "/posts/search?query=");
console.log(data);
setResults(data);
}; export default function App() {
// ...
const [query, setQuery] = useState("Title"); <input
type="text"
name="query"
className="form-control my-3"
placeholder="Search..."
onChange={event => setQuery(event.target.value)}
value={query}
/> const { data } = await axios.get(
`${apiUrl}/posts/search?query=${encodeURIComponent(query)}`
); useEffect(() => {
getResults();
}, [query]); 
<button
className="btn btn-primary"
type="button"
onClick={getResults}
>
Search
</button> <form onSubmit={handleSearch}>
<div className="input-group my-3">
<label htmlFor="query" className="form-control-label sr-only"></label>
<input
type="text"
id="query"
name="query"
className="form-control"
placeholder="Search ..."
onChange={event => setQuery(event.target.value)}
value={query}
/>
<div className="input-group-append">
<button className="btn btn-primary" type="submit">
Search
</button>
</div>
</div>
</form> const handleSearch = event => {
event.preventDefault();
getResults();
}; <button
type="button"
onClick={handleClearSearch}
className="btn btn-info"
>
Clear
</button> import React, { useEffect, useRef, useState } from "react";
// ...
export default function App() {
// ...
const searchInputRef = useRef();
const handleClearSearch = () => {
setQuery("");
searchInputRef.current.focus();
}; <input
type="text"
id="query"
name="query"
className="form-control"
placeholder="Search ..."
onChange={event => setQuery(event.target.value)}
value={query}
ref={searchInputRef}
/> 
const [loading, setLoading] = useState(false);
const getResults = async () => {
setLoading(true);
const { data } = await axios.get(
`${apiUrl}/posts/search?query=${encodeURIComponent(query)}`
);
console.log(data);
setResults(data);
setLoading(false);
}; {loading ? (
<div className="alert alert-info">Loading results...</div>
) : (
<table className="table">
<thead>
<tr>
<th>Title</th>
</tr>
</thead>
<tbody>
{results.map(post => (
<tr key={post.id}>
<td>{post.title}</td>
</tr>
))}
</tbody>
</table>
)} 
// ...
export default function App() {
// ...
const [error, setError] = useState(null);
// ...
const getResults = async () => {
setLoading(true);
try {
const { data } = await axios.get(
`${apiUrl}/posts/search?query=${encodeURIComponent(query)}`
);
console.log(data);
setResults(data);
} catch (err) {
setError(err);
}
setLoading(false);
}; {error && <div className="alert alert-warning">{error.message}</div>} 
dockerrun --name db` -d ` -p 3306:3306 ` -e MYSQL_ROOT_PASSWORD=my-secret-pw ` -v db:/var/lib/mysql` mysql dockerinspect db # extract ipaddress dockerrun --name web ` -d ` -p 8080:80 ` -e MY_DB_PORT=3306 ` -e MY_DB_HOST=? ` -v /my/php/app:/usr/share/nginx/html ` nginx
version: '2'
services:
db:
image: mysql
ports:
-3306:3306
environment:
-MYSQL_ROOT_PASSWORD=my-secret-pw
volumes:
-db:/var/lib/mysql
web:
image: nginx
ports:
-8080:80
environment:
-MY_DB_PORT=3306
-MY_DB_HOST=db
volumes:
-/my/php/app:/usr/share/nginx/html version: '2'
services:
teamcity:
image: sjoerdmulder/teamcity
ports:
- 8111:8111
teamcity-agent:
image: sjoerdmulder/teamcity-agent
environment:
- TEAMCITY_SERVER=http://teamcity:8111
postgres:
image: postgres
environment:
- POSTGRES_DB=teamcity 
docker ps docker exec -it teamcity_postgres_1 bash #exit
docker-compose exec postgres bash
#ping teamcity #exit
docker-compose exec postgres psql -U postgres postgres=#\l postgres=#\q
docker run --name apline -it --rm --net teamcity_default alpine sh
docker ps docker-compose ps docker volume ls docker network ls docker-compose stop docker-compose rm -v docker-compose down docker ps -a docker volume ls docker network ls
version: '3'
services:
db:
image: microsoft/mssql-server-windows-developer
environment:
sa_password: "Password1"
ACCEPT_EULA: "Y"
ports:
- "1433:1433" # REMARK: This is currently required, needs investigation
healthcheck:
test: [ "CMD", "sqlcmd", "-U", "sa", "-P", "Password1", "-Q", "select 1" ]
interval: 1s
retries: 30
web:
build:
context: .
dockerfile: Dockerfile.windows
environment:
- "Data:DefaultConnection:ConnectionString=Server=db,1433;Database=MusicStore;User Id=sa;Password=Password1;MultipleActiveResultSets=True"
depends_on:
- db
ports:
- "5000:5000" FROM microsoft/dotnet-nightly:2.0-sdk-nanoserver SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"] ENV NUGET_XMLDOC_MODE skip ENV DOTNET_SKIP_FIRST_TIME_EXPERIENCE 1 RUN New-Item -Path \MusicStore\samples\MusicStore -Type Directory WORKDIR app ADD samples/MusicStore/MusicStore.csproj samples/MusicStore/MusicStore.csproj ADD build/dependencies.props build/dependencies.props ADD NuGet.config . RUN dotnet restore --runtime win10-x64 .\samples\MusicStore ADD samples samples RUN dotnet publish --output /out --configuration Release --framework netcoreapp2.0 --runtime win10-x64 .\samples\MusicStore FROM microsoft/dotnet-nightly:2.0-runtime-nanoserver WORKDIR /app COPY --from=0 /out . EXPOSE 5000 ENV ASPNETCORE_URLS http://0.0.0.0:5000 CMD dotnet musicstore.dll
docker-compose -f .\docker-compose.windows.yml build docker-compose -f .\docker-compose.windows.yml up
> create-react-app sample-04 > cd sample-04 > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
import React, { Component } from 'react'; import React, { Component } from "react";
class Counter extends Component {
render() {
return <h1>Hello world!</h1>;
}
}
export default Counter; import Counter from "./components/counter";
ReactDOM.render(<Counter />, document.getElementById("root")); render() {
return <h1>Hello world!</h1><button>Increment</button>;
} render() {
return (
<div>
<h1>Hello world!</h1>
<button>Increment</button>
</div>
); return ; <div></div>
return ( <div></div> );
return (
<React.Fragment>
<h1>Hello world!</h1>
<button>Increment</button>
</React.Fragment>
); import React, { Component } from "react";
class Counter extends Component {
state = {
count: 0
};
render() {
return (
<React.Fragment>
<span>{this.state.count}</span>
<button>Increment</button>
</React.Fragment>
);
}
}
export default Counter; import React, { Component } from "react";
class Counter extends Component {
state = {
count: 0
};
render() {
return (
<React.Fragment>
<span>{this.formatCount()}</span>
<button>Increment</button>
</React.Fragment>
);
}
formatCount() {
const { count } = this.state; // Object Destructuring
return count === 0 ? "Zero" : count;
}
}
export default Counter; formatCount() {
const { count } = this.state; // Object Destructuring
return count === 0 ? <h1>Zero</h1> : count;
} state = {
count: 0,
imageUrl: "/logo192.png"
}; render() {
return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span>{this.formatCount()}</span>
<button>Increment</button>
</React.Fragment>
);
} return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span className="badge badge-primary m-2">{this.formatCount()}</span>
<button className="btn btn-secondary btn-sm">Increment</button>
</React.Fragment>
); 
styles = {
fontSize: 50,
fontWeight: "bold"
}; return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span style={this.styles} className="badge badge-primary m-2">
{this.formatCount()}
</span>
<button className="btn btn-secondary btn-sm">Increment</button>
</React.Fragment>
); 
<button style={{ fontSize: 30 }} className="btn btn-secondary btn-sm"> render() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return (
<React.Fragment>
<img src={this.state.imageUrl} alt="" />
<span style={this.styles} className={classes}>
{this.formatCount()}
</span>
<button style={{ fontSize: 30 }} className="btn btn-secondary btn-sm">
Increment
</button>
</React.Fragment>
); 
render() {
let classes = this.getBadgeClasses();
// ...
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
} <span style={this.styles} className={this.getBadgeClasses()}> 