From 135cec6cd99033524e6a867f26e239a5aa5fdbe0 Mon Sep 17 00:00:00 2001
From: Ken Schaefer <ken@kenschae.com>
Date: Wed, 12 Apr 2023 08:53:39 -0500
Subject: [PATCH] Put notes file into project

---
 react-complete-guide/react-complete-notes.md | 66 ++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 react-complete-guide/react-complete-notes.md

diff --git a/react-complete-guide/react-complete-notes.md b/react-complete-guide/react-complete-notes.md
new file mode 100644
index 0000000..dffff13
--- /dev/null
+++ b/react-complete-guide/react-complete-notes.md
@@ -0,0 +1,66 @@
+# REACT NOTES
+
+## Basics and working with components
+
+React is a javascript library for building UI.
+
+Fundamental building block of React are reusable components.
+
+React uses a declarative approach. This means that you will define the end states and React will work with the DOM to achieve it.
+
+### Creating a new React Project
+
+facebook/create-react-app (https://github.com/facebook/create-react-app) 
+
+This github is a tool for creating a react app
+
+### Post create
+
+```
+npm install # install all dependencies
+npm start
+```
+
+### Project Structure
+
+Mostly work in the /src folder
+
+/src/index.js executes when the app starts. 
+
+### JSX
+
+JSX is a special syntax created by the React team
+
+Allows you to mix JS with HTML
+
+Best practice is 1 file per component
+
+The App.js component is generally the root component of a component tree. Everything is a child of the app component.
+
+Convention is to start all component filenames with Capital letter
+
+### Creating a component
+
+1. Create the file
+2. Add the function
+3. Export it
+4. Import in the App component
+5. Add the HTML in the App component
+
+### Component design
+
+Can only have 1 root div in a component
+
+#### Styles
+
+There are no rules for CSS files but best practice is to use the same name and put the css file in the same dir as the js file.
+
+Import the css file into the component. 
+Note: JSX uses className in place of class
+
+{} Are used as dynamic placeholders for content.
+
+#### Props
+
+Are how to pass data into a component
+