Wrażenia z warsztatów ReactJS

Dzisiaj opowiem o swoich wrażeniach z warsztatów ReactJS, na których ostatnio byłem.

Jakie warsztaty?

Warsztaty, o których miałem przyjemność być to  „React.js dla programistów znających JS”. Spotkanie był organizowane przez DevMeetings, we Wrocławiu. Celem warsztatów, jak sama nazwa wskazuję ;), było wprowadzenie nas do Reacta oraz zbudowanie naszej pierwszej aplikacji w Reactie.

Jaki był materiał?

Teraz kilka słów o samym materiale, który był poruszony w czasie warsztatów.

Krótkie przypomnienie JSa

Na początku zostało przypomniane kilka użytecznych funkcji JSowych, które miały się przydać w dalszej części kursu. Przypomnieliśmy sobie o takich funkcjach jak:

• map

  const array = [1, 2, 3, 4, 5]
  
  function squareNumber(num) {
      return num * num
  }
  
  const squared = array.map(squareNumber)
  
  squared // [1, 4, 9, 16, 25]
  array // [1, 2, 3, 4, 5]

• filter

  const array = [1, 2, 3, 4, 5]
  
  function biggerThan3(num) {
      return num > 3;
  }
  
  const selectedNumbers = array.filter(biggerThan3)
  
  selectedNumbers // [4, 5]
  array // [1, 2, 3, 4, 5]

• arrow functions

  const square = (num) => {
      return num * num
  }
  
  const sqaure2 = num => num * num;

• classes

  class Shape {
      type = 'shape'
  
      constructor(description) {
          this.description = description
      }
  }
  
  const myShape = new Shape('random blob');

I w końcu React!

Czyli pora na mięso 🙂

• pierwsza funkcja w ReactJS

  import React from 'react'
  
  function App() {
      return (
          <h1>Hello DevMeetings!</h1>
      )
  }
  
  export default App

• Komponenty

  import React from 'react'
   
  function FirstComponent({ item }) {
      return (
          <div>
              <header>{ item.name }</header>
              <p>
                  { item.description }
              </p>
          </div>
      )
  }
   
  export default FirstComponent

• Klasy

  import React, { Component } from 'react'
   
  class FirstClass extends Component {
      field = 'Field of my class!'
   
      render() {
          return (
              <h1>{this.field}</h1>
          )
      }
  }
   
  export default FirstClass

• Obsługa eventów

  buttonEventHandler = (event) => {
  	console.log(event.target.textContent);
  }
  
  render() {
  	return (
  		<button onClick={this.buttonEventHandler}>Click me!</button>
  	)
  }

• Obiekty stanowe

  state = {
  	myNumber: 0
  }
  
  buttonEventHandler = () => {
  	this.setState({
  		myNumber: this.state.myNumber + 1
  	})
  }

• Routing

  import React from 'react'
  import { BrowserRouter, Route } from 'react-router-dom'
  
  import MyPageComponent from './components/myPage'
  
  function App() {
      return (
          <BrowserRouter>
              <div>
                  <Route path="/myPage" component={MyPageComponent}></Route>
              </div>
          </BrowserRouter>
      )
  }
  
  export default App

  Redux

  Czyli dodatek do Reacta, który służy do zarządzania stanem. aplikacji. Został on wspomniany raczej na zasadzie ciekawostki czego się używa w poważnych aplikach ;). My nie mieliśmy okazji go używać na warsztatach.

Moje wrażenia

I na końcu kilka słów o moich subiektywnych wrażeniach z warsztatów 🙂

Był to dla mnie pierwszy kontakt z Reactem. Na tych kilku-godzinnych warsztatach dostałem wystarczająco informacji, żeby mieć jakiekolwiek pojęcie z czym to się je. Warsztaty dla mnie były prowadzone w fajnej formie i wyglądało na to, że prowadzący się zna na rzeczy 🙂

Jedynym minusem, który odnotowałem był brak wcześniejszej informacji o wymaganych toolach. Przez to na początku straciliśmy około 30 minut czekając, aż wszystkie osoby będą miały zainstalowane nodeJS itd. Po za tą drobnostką wszystko było ok 🙂

Podsumowując – jestem zadowolony z warsztatów i w przyszłości z chęcią pójdę na nie jeszcze raz jak pojawi się interesujący temat 🙂