Web Development Diaries

Each class has a state Each instance of a class has its own copy of state object A state always needs to be initialised like so: constructor(props) {     super (props);     this.state = {searchTerm: ''};   } To set state render() {     return <input onChange={(e) => this.setState({searchTerm: e.target.value}) }/>;   }

React is used as the View in an MVC application. Used to create UI components that manage their own state ES6 classes can extend React Component to inherit component features Class extended from React component must always have a 'render' function otherwise it will throw an error Types of components A function component may contain a class component inside. 1. Function based component const SearchBar = () => {   return <input />; } or  const App = function() {   return (   <div>     <SearchBar />   </div>   ) } 2.  Class based component import React from 'react'; class SearchBar extends React.Component {   render() {     return <input />;   } } is the same as: import React, {Component} from 'react'; class SearchBar extends Component {   render() {     return <input />;   } } Using curly braces ...

const or let Before: var abc = "something"; var pie = 3.14; After: let abc = "something"; const pie = 3.14; Functions Before : var App = function() {} After: const App = () => {} // you either use const or let depending on your variable type Example ES6 function const SearchBar = () => {   return <input />; } Classes class SearchBar extends React.Component{   render() {     return <input />;   } } export default SearchBar;

IDE Atom https://atom.io/ Building and Transpiling Babel http://babeljs.io/ - Javascript compiler Webpack https://webpack.js.org/ - Bundler src: https://webpack.js.org/ Wireframes/Mockups Balsamiq https://balsamiq.com/

npm install Install packages from package.json file in your directory. npm start Starts your Node server npm install --save <package-name> Saves the package to your package.json list Example: npm install --save youtube-api-search adds the following to package.json dependencies. "dependencies": { "youtube-api-search": "0.0.5" }