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 +