Week 3

 Week 3

Week 3 brought us to our first introduction to React. React made sense to me early on, but it definitely took some organization when it came to classes extending each other and state.

We began our first day by learning about React components. Components are the building blocks for React. They are a JavaScript class or function that takes in an input and returns a React element. Within components you can create a class component and a function component. In React, classes and functions start with an Uppercase letter and are CamelCased.

Create React App is a file structure with codes written by others which are then given to developers to use. It makes it faster and easier for developers to write code when this command is run. We used this command to start us off on creating some React projects of our own.

Lets first look at a basic set up for a React code:

import React, { Component } from 'react',

class App extends Component{
render (){
return(

export default App

class Counter extends Component{
constructor(){
super()
this.state = {
counter : 0
}
}

addOne = () => {
this.setState({ counter : this.state.counter + 1 })
}

render(){
return(

Thats a lot going on up there so lets break it down. The first class , App, will be where our work in Counter will be displayed. Its only purpose is to display our finished product. In our Counter class we are setting a state for counter which is 0. We then created a method called addOne which will increase the state of counter by 1 each time the method is called and hence setState the state of counter to 1 rather than 0 and so on. In our render, we are writing some html code to display the text :Counter: " followed by the current state of counter.

Now that we know a little about state, we then were introduced to props. Props are a way of passing state into even more classes and functions. We do this by calling this.props rather than this.state in the classes that do not have the constructor and super stating this.state.

Some of our challenges from this week included creating a React dice roller, treasure hunt, and TicTactToe. I had a blast learning React and working through the challenges. It was very frustrating when our code wouldn't work due to a syntax error we didn't recognize for a bit. All in all it was another good week done.

Checking out!