Intro to React Workshop - Girl Develop it!

React knowledge is one of the most sought after skills for modern web developers. Join us for an interactive and gentle introduction to the React ecosystem and learn how front end developers use this JavaScript library to create interactive user interfaces. Do you have what it takes to be a hero? Find out in this Github Battle workshop!

Prerequisites

Node.js Javascript runtime

Installing

git clone https://github.com/duggiemitchell/gdi-github-battle.git

cd gdi-github-battle

yarn

yarn start

Development server will open at localhost:3000

Getting Started

Follow along step by step to create the github battle app. The steps to build the app are seperated into branches. To get started at the beginning, once the app is installed on your local machine, point your terminal to the project root and

git checkout --track origin/step-0

Do this through the last step, step-06.

I also created some codepens to practice passing props: Here, here and here

Further Learning

Checkout these resources to dive deeper into React:

QUICKSTART GUIDE: https://reactjs.org/docs/add-react-to-a-new-app.html

Must Reads:

Thinking in React: https://reactjs.org/docs/thinking-in-react.html

Lifting Up State: https://reactjs.org/docs/lifting-state-up.html

Accessibility: https://reactjs.org/docs/accessibility.html

FAQs:

AJAX and APIs: https://reactjs.org/docs/faq-ajax.html

Passing Functions to Components (talks about when/when not to use arrow functions: https://reactjs.org/docs/faq-functions.html

Component State https://reactjs.org/docs/faq-state.html

Styling and CSS https://reactjs.org/docs/faq-styling.html

Hackernoon article on component lifecycle: https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0