- React is mostly the V in the MVC framework (The data is the MODEL, or the real world thing; The VIEW is how the reader interacts or sees your app; The CONTROLLER is the bridge between the MODEL and the VIEW, it decides what to do with input.)
- There are three building blocks in React:
- Components
-
The very first thing that I should learn is how to write components
-
A component is either created stateless or with a state
- if you're creating a stateless component then just use a normal JS function.
function ClasslessComponent(props) { return( <h1>{props.name}</h1> ); } ReactDOM.render( <UserDetails name={name}/>, document.getElementById("app") )
- if you're creating a component with a state then use a class.
class classycomponent extends React.Component{ render(){ return ( <h1>{this.props.name}</h1> ); } } ReactDOM.render( <classycomponent name={name}/>, document.getElementById("app") )
-
- State - Redux is used for managing application state.
- A plain JS object
- Triggered with render()
- React manages the component state by calling setState(data,callback)
- Props - properties
- A plain JS object
- Triggered with render()
- Components
- Classes - Only use a class when you need to manage state.
- stateless functions - Try and make your components out of functions.
- tooling
- reducers
- routing
- smart and dumb components
- pure components
- asynchronous actions
- JSX
- events
- managing state
- passing props
- higher-order components
- lifecycle methods
- using third-party libraries
- single responsibility principle - Make things small
- React lifecycle methods
- Get initial state - this.state
- Get default props - this.props
- componentWillMount
- componentDidMount
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- componentDidUpdate(prevProps, prevState)
- componentWillUnmount
- React Router is the de facto routing solution
- Constructor
- Functional components
- Architect your components with the single-responsibility principle
- Writing stateless components.
- The easiest way to just play around with react is to use the following boilerplate code:
<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<!-- We need babel so that we can use JSX-->
</head>
<body>
<div id="app"></div>
<script type="text/babel">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>
- The easiest way to setup a React environment to to use the create-react-app command
npm install -g create-react-app // installs create-react-app globally
create-react-app myapp // creates a react app called myapp
cd myapp // go into that directory
yarn start // starts the development server. ( compiles app, opens new browser, monitors changes to files)
yarn build // bundles the app into static files for production.
yarn test // starts the test runner.
Here are the files that are created when running create-react-app myapp
Everything in React is a component. They usually take the form of JavaScript classes. Here is a simple component which extends the react-component class. Once you create a component you should define its methods. In the example below we just want to render something on screen.
class Hello extends React.Component{
render(){
return <h1>Hello!</h1>;
}
}
//To use the component we use the ReactDOM.render() function.
ReactDOM.render(
<Hello />,
document.getElementById("app")
);
Props are external way of passing data
class Hello extends React.Component{
render(){
return <h1>Hello {this.prop.message}</h1>;
// Here we have to tell JSX that we want to add a JS expression so we escape it.
}
}
ReactDOM.render(
<Hello message="my prop"/>, //component with the data
document.getElementById("app") //DOM node to mount to
);
The state can be changed by the component itself.
Redux manages an application's state. Redux handles two states: one is the data state and the other is the UI state and it's a standard option for SPAs (single page applications). Redux can be used with AngularJS, jQuery, or with React JS libraries or frameworks.
Unidirectional data flow means that data flows in one direction: from the parent level to the child level. It's very difficult for two components in React to properly communicate.
The STORE is the single place where Redux stores all your states. If a component finds any changes, it has to dispatch to the STORE first and if other components require access, it has to Subscribe from the store. It cannot directly authorize communication with that component.
3 Principles of REDUX:
- Single store approach
- Read-only state
- Reducer functions to change the state