https://github.com/ruthmoog/bees-in-react-native
learning React Native
https://github.com/ruthmoog/bees-in-react-native
Last synced: about 2 months ago
JSON representation
learning React Native
- Host: GitHub
- URL: https://github.com/ruthmoog/bees-in-react-native
- Owner: ruthmoog
- Created: 2019-08-11T15:17:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T21:28:09.000Z (over 2 years ago)
- Last Synced: 2025-02-11T11:42:21.830Z (3 months ago)
- Language: JavaScript
- Size: 1.02 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
- To start a new project, `expo init ProjectName`
- Make your component with a simple render function
```JavaScript
class BeeTracker extends Component {
render() {
return (
Hello there
)
}
}
```
- When you create an instance of your component, like `````` the name is a props you assigned to the instance. You can access the props per instance with `this`: ``` {this.props.name}```
```JavaScript
class BeeTracker extends Component {
render() {
return (
{this.props.name}
)
}
}
```
- I want each bee to have it's own button, but you can only return 1 element, so wrap with `<>>` or ``
```JavaScript
return (
{this.props.name}
)
```
- If I click the button I want to `console.log` to see something happened. In this code, JS runs through and thinks its job is done. No matter how many times you click the button, it won't log to console again as the page isn't being re-rendered and the code has already been run. Instead, you want to pass `onPress` a function so that it can be run over and over again
```JavaScript
// Console log just the once & put yer feet up:
render() {
return (
{this.props.name}
)
}
}
// JS stays ready for orders whenever you press that button...
render() {
return (
{this.props.name}
{ console.log(this.props.name) }}
/>
)
}
}
```
- Ok so lets SRP this sucker and extract the log function out of the View:
```JavaScript
// here's the function inside BeeTracker
logMe = () => { console.log(this.props.name) }
// and this is how you tell JS what func to run onPress (don't execute the func like `logMe()`, just tell JS to run it when the button is pressed)
onPress={ this.logMe }
```
- we want to render the count alongside the bees so we need to set initial state by adding our count to the constructor like so:
```JavaScript
constructor(props) {
super(props)
this.state = {
count: 0
}
}
```
then it'll be possible to render the count:
```JavaScript
{this.props.name} count: {this.state.count}
```
- lets change our `logMe` func to count bees in increments of 1. I've renamed the func to `countMe`, this gets called each time the button is pressed. the `countMe` func calls `setState` on the instance, which means that once called the component will be re-rendered, and `setState` takes a function. The current state is passed in as a whole object, and we return the newly changed state with a count that has a new value of _1 plus the old count value_.
```JavaScript
countMe = () => {
this.setState((currentState) => {
return {
count: (currentState.count + 1)
}
})
}
```