<style> .present { text-align: left; } img[alt=set_operations] { width: 60%; } </style> --- ###### tags: `Week 14` `W14D1` --- # Welcome to Module 5! ## Learning React - and Redux too... --- ## Congrats on completing the Module 4 Project! ### Pass or fail, you made your first production server! Be proud! --- ## Module 5 - Your Job will be to make a React client for the server you made in Module 4 - You will have 2 weeks to prepare for this job - Week 1 - React fundamentals - Week 2 - React with Redux - Week 3 - Full Stack React Project --- ## Mod 5 - The Hardest Module??? - 7 days teaching -> 2 Frameworks (React & Redux) - Week 16 - Solo fullstack project - Visual module, you are going to see stuff in the browser! --- ### Deferrals are okay and this is the mod to have one... - Communicate with us if you are struggling or we might not know --- ## Do your homework! (pretty pretty please 🙏) - There is a significant amount, but it is really important - Do the homework practices, they will help make sure the concepts in the readings stick --- ## What lies ahead... ### Week 14 - React Basics (components, props, router, hooks, state, context) ### Week 15 - W14 Assessment (only one in Module 5) - Class Based React - Redux ### Week 16 - Solo Full Stack Project - build a front end for your Mod 4 project! --- ## Week 14 Details - Day 1 - Intro to React, self study - Day 2 - Basics and React Router - Day 3 - useState and useEffect - Day 4 - Context (global state) - Day 5 - Study Day! note: if you write like this, its not shown in the slides --- ## What is React? - Lets see what the docs say? https://react.dev/ - "React lets you build user interfaces out of individual pieces called components." --- ### From the HW reading (oh no there was homework???) - "React is a library that manages the creation and updating of DOM nodes in your web page. It does not do AJAX. It does not do services. It does not do local storage. It does not provide a pretty CSS framework for you. It just dynamically renders stuff into the DOM." --- ## What sites use React? (there are a lot...) - https://medium.com/@coderacademy/32-sites-built-with-reactjs-172e3a4bed81 --- ## Request / Respose Cycle  ### Lets look at a server... --- ## How does React fit in to this cycle? - Our Frontend or client lives in our backend or server... - First request to the server sends react to the browser so we can use it --- ## How does React work? ### Lets draw some happy little trees...  --- ## Virtual DOM  --- ## What's this JSX thingy? - JavaScript eXtension JSX - Lets us write HTML in our JavaScript files using a dependancy called babel --- ## What is a "React Component" - function with a title/capital cased name - must return only 1 JSX element (which looks like HTML) ```jsx export default function Component() { return ( <div> Some stuff </div> ); } ``` --- ## Other things about components... - can have props (parameters) - can have child components - most are potentially reusable (prolly not App but most others) - can have front end routing, making choices on which components to render --- ## How to make a new react project - Create React App depricated - Vite is the new way! - Walkthrough in today's material --- ## Don't forget your JS - array methods - object destructuring - ternary snytax - MDN is still your best friend --- ## Goals for today... - Self study day (Lots to read and practice) - Intro to React Content (in Canvas for Monday) - Vite Walkthrough (in Canvas for Monday) - Start on your homework! (homework for Tuesday) - Placements will come by after afternoon break for another Module transition talk