Scribd
Upload
38 views2 pages

Scrimba React Notes

The document provides lessons on creating React components, including how to structure files for components like Navbar and Main, and how to render them in App.js and index.js. It also covers styling techniques, such as using the ::marker pseudo-element for list items and setting background properties for elements. Additionally, it introduces the concept of props for creating reusable React components.

Uploaded by

Peppa Pig
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
38 views2 pages

Scrimba React Notes

The document provides lessons on creating React components, including how to structure files for components like Navbar and Main, and how to render them in App.js and index.js. It also covers styling techniques, such as using the ::marker pseudo-element for list items and setting background properties for elements. Additionally, it introduces the concept of props for creating reusable React components.

Uploaded by

Peppa Pig
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

SECTION 1 -------------------------------------

LESSON 24:

Create a separate file for each component (navBar.js etc)


and there you write your component:

import React from "react"

export default function Navbar() {


return <h1>navbar component</h1>
}

You will then creaate an App.js file and there you will render your components:

import React from "react"


import Navbar from "./components/Navbar"
import Main from "./components/Main"

export default function App() {


return (
<div className="container">
<Navbar />
<Main />
</div>
)
}

And then in index.js you will render the App.js component:

import React from "react"


import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

-----------------------------------------------

LESSON 28:

To style the bullets of list elements, you can use the pseudo tag ::marker

.main--facts > li::marker {


font-size: 1.4rem;
color: #61DAFB;
}

-----------------------------------------------

LESSON 29:

About background properties:

main {
padding: 57px 27px;
color: white;
background-image: url(./images/react-icon-
large.png);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 75%;
(or just:
background-position: right 75%;)
}

_______________________________________________

SECTION 2 -------------------------------------

LESSON 1:

Props: helps create reusable and composable react components

-----------------------------------------------

LESSON 2:

align-self: center

-----------------------------------------------

LESSON 3:

You might also like