react
npx create-react-app [name]
then cd /[name]
npm start
starts a development server so we can see our code running. the default page is currently running.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
.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.React.createElement(div)
for us.//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>
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 🙂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 pagenano 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<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 propsisLoggedIn
. 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