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, iż 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
