React State

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})}/>;
  }

Comments

Post a Comment

Popular posts from this blog

ES6 / ES2016 Notes

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;
Read more

ReactJS Components

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 ...
Read more

NPM

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" }
Read more