├── resources.md ├── mentor-notes.md ├── README.md └── project.md /resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Articles 4 | 5 | ### React docs 6 | 7 | There's a lot more information in the React docs than we could cover in the course. Definitely have a read through and see what else you can do. For example here's the section on [error boundaries](https://reactjs.org/docs/error-boundaries.html). 8 | 9 | The docs also have a few good articles about general React philosophy: 10 | - [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html) 11 | - [Composition vs Inheritance](https://reactjs.org/docs/composition-vs-inheritance.html) 12 | - [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) 13 | 14 | ### General concepts 15 | 16 | You have propably encountered the "prop drilling" problem by now (passing state/function down through multiple levels of components. [This article](https://blog.kentcdodds.com/prop-drilling-bb62e02cb691) by Kent C. Dodds gives a good overview. 17 | He also has a good one discussing the [state of state management](https://blog.kentcdodds.com/application-state-management-66de608ccb24) in React right now (spoiler: you probably don't need Redux yet) 18 | 19 | ## Videos 20 | 21 | - [The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react) is what a lot of our Intro to the React API workshop was based on. It's great to quickly jump through to brush up on concepts. 22 | - [Advanced React](https://courses.totalreact.com/p/advanced-react-free) is a great short series of videos introducing some more advanced React patterns (by the creator of React Router). 23 | - [Advanced Component Patterns](https://egghead.io/courses/advanced-react-component-patterns) goes into more depth about advanced React use. 24 | -------------------------------------------------------------------------------- /mentor-notes.md: -------------------------------------------------------------------------------- 1 | # Mentor Notes 2 | ## Day 1 3 | 4 | ### [Intro to ES6 Classes](https://github.com/oliverjam/es6-class-intro) 5 | ### [Reactive Rendering Challenge](https://repl.it/@sofiapoh/class-morning-challenge) 6 | - explain that this challenge highlights the problem that react is trying to solve aka it's difficult to hold state and dynamically update the dom with vanilla js/jquery 7 | - meant to be run as a morning challenge. It's okay for students to try to hack together a solution to get this to work 8 | ### [Modern frontend & how React fits in](https://hackmd.io/p/SJauYz6EM#) (talk/discussion) 9 | - do the presentation 10 | ### [React API](https://github.com/oliverjam/intro-react-workshop) 11 | - go through each in turn and get students to read/complete exercise, then talk through their solutions 12 | ### [Build a stopwatch](https://github.com/oliverjam/intro-react-workshop/blob/master/workshop-top-notch-stopwatch) 13 | - mini project/challenge for students to implement what they have learnt in this workshop 14 | 15 | ### Day 2 16 | ### [Diet Pattern-matching](https://github.com/foundersandcoders/mc-diet-pattern-matching) 17 | - Only did the first 4 challenges 18 | ### [React with dynamic data](https://github.com/sofiapoh/react-dynamic-data-workshop) 19 | 1. **Step1** 20 | -- Setup Card component 21 | -- import in App.js 22 | -- add token.js in root 23 | -- Create utils folder with data_helpers.js. data_helpers will return fetch request to gh api 24 | 2. **Step2** - Create state for card and add fetch result to it. 25 | 3. **Step3** - Modularise user data code into its own componenet so that card is a container element 26 | 4. **Step4** - (not currently documented) Create a repo component that: 27 | -- makes an api call to get gh repos 28 | -- make a componenet that can be used when mapping through an array 29 | ### [Intro to bundlers](https://hackmd.io/p/rJBLi5mSf) (talk) 30 | - do the presentation 31 | ### [Set-up project boilerplate](https://github.com/oliverjam/fac-react-project) 32 | - completed projects in teams of 2 33 | - lots of useful mds in repo :point_up: -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Week 2 | 3 | 🌐 4 | 5 | ## Learning Outcomes 6 | 7 | 1. How modern frontend works 8 | - The differences between server-rendered and single-page apps 9 | - Why frontend is great/hard 10 | 1. React's benefits/tradeoffs 11 | 1. The React API 12 | - JSX/React elements 13 | - Function components 14 | - Component state 15 | - Effects 16 | - Class components 17 | 1. Real-world React patterns 18 | 1. Testing React components 19 | 1. How bundlers work (ish) 20 | - Modularising frontend code 21 | 22 | ## Schedule 23 | 24 | ### Day 1 25 | 26 | 10:00-10:30 [Modern frontend & how React fits in](https://hackmd.io/p/SJauYz6EM#) (talk/discussion) 27 | 10:30-13:00 [React API](https://github.com/oliverjam/learn-react) (workshop) 28 | _13:00-14:00 Lunch_ 29 | 14:00-15:00 [React API](https://github.com/oliverjam/learn-react) (workshop continued) 30 | 15:00-18:00 [Build a filterable product page](https://github.com/oliverjam/react-food-workshop) (mini project) 31 | 32 | ### Day 2 33 | 34 | 10:00-11:00 [Destructuring morning challenge](https://github.com/oliverjam/learn-destructuring) (morning challenge) 35 | 11:00-11:30 [Intro to bundlers](https://hackmd.io/p/rJBLi5mSf) (talk) 36 | 11:30-13:30 [React with dynamic data](https://github.com/sofiapoh/react-dynamic-data-workshop) 37 | _13:30-14:30 Lunch_ 38 | 14:30-16:30 [Testing React components](https://github.com/oliverjam/learn-react-testing) 39 | 16:30-17:30 [Project set-up](./project.md) 40 | 17:30-18:00 Project planning 41 | 42 | ### Day 3 43 | 44 | 10:00-11:00 [Refactor classes to hooks](https://github.com/oliverjam/react-refactor-class-hooks) (morning challenge) 45 | 11:00-13:00 Projects 46 | _13:00-14:00 Lunch_ 47 | 14:00-17:00 Projects 48 | 17:00-18:00 Talk 49 | 50 | 51 | ### Day 4 52 | 53 | 10:00-13:00 Projects 54 | _13:00-14:00 Lunch_ 55 | 14:00-18:00 Projects 56 | 57 | ### Day 5 58 | 10:00-11:00 Code review 59 | 11:00-13:00 Fixing issues/planning presentations 60 | _13:00-14:00 Lunch_ 61 | 14:00-16:00 Present projects 62 | 16:00-17:00 Stop-go-continue 63 | 17:00 Pub 64 | -------------------------------------------------------------------------------- /project.md: -------------------------------------------------------------------------------- 1 | # Tamagotchi Project! 2 | 3 | The goal is to build an interactive game-like thing that uses data from an API. 4 | 5 | It should: 6 | 7 | * Accept some user input (e.g. a username) 8 | * Query an API (e.g. the [Github API](https://developer.github.com/v3/), or any other [fun one](https://www.potterapi.com/)) 9 | * Populate the UI with API data 10 | * Have some form of persistent state and interactivity, e.g. 11 | * A hunger bar that decreases over time and is topped up when you feed them stars 12 | * A button to add more users to your collection 13 | * Have integration tests using React Testing Library 14 | 15 | ## Stretch goals 16 | 17 | * Save your state to localstorage so you can leave the page and come back later 18 | * Have a button to add more copies of the game 19 | * Make it look sick 20 | 21 | ## Examples 22 | 23 | "interactive game-like thing" is a bit vague, so here are two example apps: 24 | 25 | [Oli's Tamagotchi](https://tamagotchi.netlify.com) 26 | [Zooey's Drake thing](https://fuckin-yolo.netlify.com/) 27 | 28 | ## Setup 29 | 30 | We're using [Create React App](https://create-react-app.dev/docs/getting-started) to handle all our bundling, linting etc. 31 | 32 | 1. `npx create-react-app [my-app-name]` generate the project (might take a while) 33 | 1. `cd [my-app-name]` 34 | 1. `npm start` start the dev server 35 | 36 | Open the project in your editor—you should see an example app setup. Feel free to delete the logo/CSS/service worker that you won't be using. 37 | 38 | ### Linting 39 | 40 | Create React App includes a comprehensive ESLint config. You will see linting errors displayed in your terminal or browser console. If you have an ESLint editor plugin installed you should also see errors highlighted as you write. 41 | 42 | ### Testing 43 | 44 | Create React App already has [a testing environment](https://create-react-app.dev/docs/running-tests) set up with Jest. You do not need to install Jest yourself—it's part of the `react-scripts` dependency. `npm test` will run any `*.test.js` files in your project. It even comes with React Testing Library installed, and an example test you can look at in `src/App.test.js`. 45 | 46 | ### Deployment 47 | 48 | We'll be deploying our apps to [Netlify](https://netlify.com). 49 | 50 | 1. Go to https://app.netlify.com and login with Github 51 | 1. Click the "New site from Git" button 52 | 1. Choose "Github" as your provider (and authorize it) 53 | 1. Choose the repo you want to deploy 54 | 1. Choose "Deploy site" (the build settings for CRA should be pre-filled) 55 | 56 | Now every time you push to the Master branch your site will redeploy. 57 | 58 | ### API secrets 59 | 60 | If you have API tokens you want to prevent reaching Github you should use Create React App's [environment variable support](https://create-react-app.dev/docs/adding-custom-environment-variables). 61 | 62 | 1. Create a gitignored `.env` at the root of your project 63 | 1. Add your environment variables, prefacing them with `REACT_APP_`. e.g. 64 | ```bash 65 | REACT_APP_GITHUB_TOKEN=123456 66 | ``` 67 | 1. Access the token in your code as `process.env.REACT_APP_GITHUB_TOKEN` 68 | 69 | You will need to configure Netlify to inject this value when it deploys your site too (just like Heroku). You can do this under "Site settings" > "Build & deploy" > "Environment" > "Environment variables". 70 | 71 | #### IMPORTANT! 72 | 73 | Since all your code is client-side it will all be available in the browser. This means if someone looked inside your JS using dev tools they would be able to find this token. If you have an API key that absolutely _must_ stay secret you need to make your requests on a server instead. You may find [Netlify Functions](https://www.netlify.com/docs/functions/) useful for adding simple Node endpoints to a mostly-frontend app (but they're probably not necessary for this project). 74 | --------------------------------------------------------------------------------