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