Oneted11 / scrimba-react-project1

free react tutorial on scrimba static project 1

Finished project screenshot

How to start

• Ensure you have nodejs installed and either npm or yarn
• pwd into folder
• run npm install or yarn
• run npm start or yarn start or npm run start
• have fun with it

Learnings

::marker

A css pseudo-element very useful for adding styling to your lists. In this project it has been used to make the dots big and blue

.main-content > ul > li::marker {
  color: #61dafb; /* Change the color */

  font-size: 1.4em; /* make bigger*/
}

new render function in react 18

ReactDOM.render(<app/>,document.getElementById("root")) is now out of vogue this is the new method called createRoot I've used it as such:

import React from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import "./index.css";

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

Background image

How to add and postion the background image, in this case the half react-logo

.main-content {
  background-image: url(./images/reactr-half-background.svg);
  background-repeat: no-repeat;
  background-position: 100% 50%; /* x,y coordinates*/
}

Default React info starts here

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify