Ken Schaefer
2 years ago
1 changed files with 66 additions and 0 deletions
@ -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 |
||||
|
Loading…
Reference in new issue