You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.4 KiB
67 lines
1.4 KiB
2 years ago
|
# 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
|
||
|
|
|