Mobile app to run Fantacalcio auction per League. Outcome will be an .xls file sent to the League participants. Participants can participate to the auction League to bet on preferred players.
- npm version: 6.14.10
- node version: 14.15.3
- expo version: 42.0.0
-
Install expo (documentation)
npm install -g expo-cli -
Install dependencies
npm install
npm start
It builds and lunches the mobile app. Follow instruction on the screen to lunch application on a real device / simulated device / web browser
In order to run app in your web browser and avoid problems with some libraries copy the following rows:
export const ViewPropTypes = { style: null }; export const MaskedViewIOS = { style: null };
at the start of this path:
..path to your project...\Fantasta_mobile\node_modules\react-native-web\dist\index.js
premere F12 ( oppure tasto destro del mouse + ispeziona ) nella pagina della app sul broser
La pgina si divide in due e sulla destra avremo la schermata di debug; cliccando sui 3 palliniin alto a destra e scegliendo come dockside la prima opzione avremo una finestra di debug separata.
Premendo il pulsante in alto a sinistra ( quadrato + freccia ) e selezionando un punto nella pagina si evidenza il punto preciso nell'html dove è presentequel tag
Il secondo pulsante in alto a sinistra permette di visualizzare la pagina del browser in modalità smartphone/tablet e potrete scegliere il dispositivo che preferite
Elements vi mostrerà il sorgente html della vostra pagina Sources vi mostrerà all'interno di source i vostri file e sarà possibile mettere dei brakpoint sul vostro codice
Design patterns can be seen as templates for how to solve problems. In that mobile app following common patterns are used :
Also reffered as Container and Presentational Pattern.
This pattern is especially ideal for separation of concerns, between logic and presentation.
Logic refers to anything outside of the UI; for example, API calls, event handlers and data manipulation.
Presentation refers to the contents of the render method where we create elements to be displayed on the UI.
Here an example.
Given this reusable CommentList component:
const CommentList = ({ comments }) => (
<ul>
{comments.map(comment => (
<li>
{comment.body}-{comment.author}
</li>
))}
</ul>
);We can create a new component responsible for fetching data and rendering the CommentList function component.
class "CommentListContainer" extends React.Component {
constructor() {
super()
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "/my-comments.json",
dataType: 'json',
success: comments =>
this.setState({comments: comments});
})
}
render() {
return <CommentList comments={this.state.comments} />
}
}Best practice: Append ‘container’ to the end of the container component filename and give the original name -profile.js, to the presentational one. The container component is usually a class component, while the presentational component will be a functional component.
The spread operator is a convenient way to pass attributes as opposed to writing each one manually.
References: The Container Pattern