Date: July 13, 2020

Topic: prep call workshop

react

• download node, then use npm todownload create-react app - a package that sets up an environment for us to write code
• open terminal from desktop run npx create-react-app [name] then cd /[name]
• node_modules is all the packages we installed through npm. so when we download styled-components as a package, it'll be added here. you can ignore everything else. most of what we're doing is in the src file. gitignore lists files to ignore when you push changes to github - like node modules. we don't want to add those huge changes to github so that's usually in there. package/ has scripts you can run for your app, so to build you use this command etc. package-lock.json holds a specific version of each package, making sure that ppl whow install our app use the version of the package that we used to build the app. you don't rlly need to worry about these its just bg info
• we write code in /src. app. running npm start starts a development server so we can see our code running. the default page is currently running.
• delete everything from app.js create a component to strart in react. app.js is a component - a file that holds all the logic, html and styling in one file. a self contained piece of code. always when creating a component, you must import React from 'react' then write a function function app(){ return(); } inside the return add some basic html <h1>hello world!</h1> then add export default App.
• we just created a component, exported it, and our index.js has import React from 'react' and import ReactDom from 'react-dom' and the react dom render is used to render our app component to the webpage! document.getElementByID('root')` if you go to index.html, which is in every website project, you'll see the body div has an id of root. so our jsx (javascript and html) is generated in this basic html so that we can write our css html and js in one place in the app.js file.
• no need to npx start - react updates your page so check it out now!
• the html in app.js isn't html. it's just javascript that gets translated into html. something like React.createElement(div) for us.
• where do we write the page's javascript?/logic, above the return statement.

//this is a variable referencing a arrow function - a nicer way to write javascript functions
const sayHello = () => {
	console.log('hello')
}
const counter = 0;
//now you can do this under return. curly braces= add javascript. onclick listens to when the user clicks button
<button onClick={sayHello}>{counter}</button>

• you can create a new component to have the hello function - a specific piece of code - in another file. (move that function to a sayHello component), import sayHello from './sayHello' the dot means a file in the same folder as the current file then render by writing it as <sayHello /> now you can edit htis specific button and its logic in a component seperate from the main file - easy to read and manage 🙂
• now to tweet, you can create a css class by using className="" in your divs and use .[classname] in app.css to edit that div. a div is just a HTML tag to section off part of the html doc, usually this is a seciton of the website like the whole page, then a div inside for a toolbar etc. we can't do class= bc that already exists in javascript. you must import "./App.css" remember upper/lowercase matters! using *{} means apply the following style to every element on the page
• to create a new file you can do nano filename.js then click ctrl+O, click enter to save it under that name and click ctrl+x to exit. this creates an empty page
• now we can copy and past our component mutliple times! <component />. you can add name="__" to each component to differentiate them and edit them slightly from the og. this is called a prop. you can pass this as a props parameter to the original component. essetially <component /> is a placeholder for the component's function which runs everytime you write <component />. things like name="__"are variables passed to that function. to find out a specific component's name prop, you can print {prop.name} from the component file and everytime you call that component and give it a name, it will print that speicifc name - how cool! (add more props and show stuff you can do w it) you can also pass {name, message, etc} as the prop for only specific props
• state is some data - liek a variable. based on that data your app renders itself. so like isLoggedIn. if true it shows one type of html. if not it shows another. you can toggle this. styled-components lets you do the same w css! you can edit your state using useState(state) there's more stuff you can do w states including using them w apis but that's not important rn

//in app.js. u can use numbers strings etc not just boolean. 
const [isLoggedIn, setLoggedIn] = useState(true);
const [isLoggedOut, setLoggedOut] = useState(false);
setLoggedOut(true);//changes isLoggedOut. you can make functions that change state