-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathimportantCmds.txt
145 lines (128 loc) · 7.97 KB
/
importantCmds.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
Desktop\Web Design\Courses\Complete_React_Course\Section2\Portfolio\Pfol\Pfolio
// Type $r in console to view the global variable it is present for all components
if you are in the react developer tool console and click on a react componenet
then switch to the console & type $r, you can view each components global variable that way to see all props & state.
// Babel yarn project react setup
//command to launch live server once in the directory that will lead to the folder with index.html file lunch this command
live-server folderNameWithHTMLfile
//Install babel cli globably
npm install -g [email protected]
//include babel in project by launching this command in project folder
yarn init
//(delete node_moduels folder & reinstall it)Install dependice presets into project folder http://babeljs.io/docs/plugins/preset-env/ for presets
yarn add [email protected] [email protected]
// Take jsx code and compile it to react
babel src/app.js --out-file=public/scripts/app.js --presets=env,react
// Added with the watch flag will watch for changes in the src folder and add automatically to the scripts folder
babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
// If a react project is downloaded the node_modules folder will not come with it. To get that folder back launch
yarn install
// Then launch the babel command and the depencies will load into the node_modules folder
-----------------------------------------------------------------------------
Quest to replace depencies: replace global moduels with local moduels
1. npm uninstall -g babel-cli live-server (for yarn its yarn)
2. yarn add live-server [email protected] ( Add depencies to project folder by launching within project folder)
3. Build the object in package.json file above depencies to launch commands as scripts
"scripts": {
"serve": "live-server public/",
"build": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
4. Launch the scripts on terminal to use while inside of both directories with yarn run <scriptName>
yarn run serve
yarn run build
now every time build is ran all the scripts get ran and are watched for updates
To run webpack you must have a webpack.config.js file in the file you can take advantage of
import export modules. You must provide the import entry & output what files are being taken in &
when combining what file is the output path.
---------------------------------------------------------------------------------------------------
Importing npm moduels
Step1.Install: yarn add [email protected] to project folder
Step2.Import: import name from name || import name from './name'
- When using ./ it searches for relative files when using from name without ./ relative files
webpack will look for the same name in the node modules folder
Step3.Use: import validator from 'validator';
console.log(validator.isEmail('[email protected]'));
Search npm validator
-------------------------------------------------------
Adding npm react libraries
Search npm react
search npm react-dom
Step1. Install: yarn add [email protected] [email protected]
Step2. Import: import React from 'react';
import ReactDOM from 'react-dom';
Step3. Use: now you can use the react library and access react-dom but we do not have support for jsx
- To use babel with webpack we need to access a loader which lets you customize a file with webpack. It is a way a file gets transformed when webpack uses it.
- So we will use it with babel to convert es6 to es5 and jsx to javascript
babel-core allows you to run tools from webpack while babel-cli allows you to run tools from command line
babel-loader is a babel plugin & allows us to teach webpack how to run babel when webpack sees certain files
yarn add [email protected] [email protected]
.........................................................................
We can use webpack module.rules & rules allows you to setup how you want webpack to handle your loader through an array
-----------------------------------------------
Install webpack-dev-server locally with --
folder/ yarn add [email protected]
Now we run the yarn script
yarn run dev-server
Type in localhost:8080 to visit webpage on browser
Now it auto saves.
---------------------------------------------------------------------------------------
Transform-class-properties allows us to not have to use the this object in the constructor to better refactor
To intsall transform-class-properties
C:- yarn add babel-plugin-transform-class-properties
---------------------------------------------------------------------------------------------
In react there is a naming conflict with class for html & class in react so class within a div
for html would be written as className="name"
---------------------------------------------------------------------------
Install react-modal
yarn add [email protected]
------------------------------------------------------------------------------
Dave Ceddia Mod Mr212 • a year ago
Either way is fine. I like toggling the actual component because I can look at the DOM and see that it's not there. The css toggle leaves phantom elements on the page. But really, either way is fine.
One thing to consider, though: when components enter and leave, their lifecycle methods are called (componentDidMount, etc). Hiding and showing with CSS will prevent these from being called. Neither is "better", but depending on your use case,
you might prefer one of those behaviors over the other.
An example: Say you load data in componentDidMount. You rely on that event to "refresh" the data every time the modal is opened.
If it's being shown/hidden with CSS, componentDidMount will only be called the first time it opens. However, if the component is being removed from the DOM entirely, then componentDidMount will be called every time it opens.
I should mention that this example doesn't apply to the Modal in this article, because it doesn't have any of this behavior :) Something to consider if you're writing your own though.
---------------------------------------------------------------------------------------
Install css addon Variables to add style with css to React
yarn add [email protected] [email protected]
Installs style-loader & css-loader
inside modules within webpack.config.js add:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
Every time it sees a file ending in .css, It will look to the css-loader, then
dump all the styles into the style-loader.
---------------------------------------------------------------------------------
How to install sass and use css with scss files
sass-loader allows us to import sass files. Node-sass takes the sass code and converts it to regular css
yarn add [email protected] [email protected]
______________________________________________________________________________
With css when naming file with an _ it is known as a partial because it contains part of the styles
-----------------------------------------------------------------------------------
Install css normalizer to render all styles a default way in all browsers
yarn add normalize.css
-------------------------------------------------------------------------------------
Install react-router
yarn add [email protected]
-----------------------------------------------------------------------------------------------
Install redux to access the store easier
yarn add [email protected]
-------------------------------------------------------------------------------------------------
install uuid for trick numbredge
>yarn add [email protected]
===============================================================================================================
install spread object operator for super usefull syntax that has not made its way to the main stream as the array spread operator has
yarn add [email protected]
// instal Mobx preset
npm install --save-dev babel-preset-mobx
// Via cli
babel script.js --presets mobx
//.bablerc
{
"presets": ["mobx"]
}