https://www.educative.io/collection/5740745361195008/5676830073815040
node --version # *v7.4.0
npm --version # *v4.0.5
npm install --save <package> to include it in package.json
CDN
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
or npm w/ Babel npm install --save react react-dom
create-react-app is preferred way as zero-config setup
npm install -g create-react-app
create-react-app --version
-
src/App.jsis main file to implement components -
src/App.test.jsfor tests -
src/index.css&src/App.cssfor styles -
package.json&node_modules/to manage packages
npm start Runs the application in http://localhost:3000
npm test Runs the tests
npm run build Builds the application for production
$ sudo npm install -g create-react-app
class App extends Component instantiates the App component to be used across the app
render()is the element returned
Exercise: render a complex user object
const (immutable) vs let (mutable)
const hello = "Hellois immutableconston an array or object can be modified
:caution: default to using const unless you are sure you need let
ReactDOM.render in index.js is main function w/ args:
- JSX that is rendered
- HTML element to hook
In default example below App is the main App component in App.js
ReactDOM.render(
<App />,
document.getElementById('root')
);Can also pass JSX directly e.g.
ReactDOM.render(
<h1>Hello React World</h1>,
document.getElementById('root')
);Hot Module Replacement HMR allows hot reloading by adding if (module.hot) { module.hot.accept(); } to index.js
enable HMR (hot module replacement)
() => { ... } == function () { ... }
:caution:
- A function expression always defines its own
thisobject - Arrow function expressions still have the
thisobject of the enclosing context