So I attended a bootcamp on react.js and redux over a weekend. It was 9am - 9pm and it defiantly lived up to its title of a bootcamp. It was a lot to take in over the two days so I tried to take as much notes as possible for myself and these are them. I hope these are all correct if not please let me know as I will be looking back over these often.
State is the data that react looks to for changes, so we need to only add in what we think will change to the state. As trying to keep track of a lot of different parts can get problematic this explains it well.
Once we have set an initial sate we can add to this state. So if we have a click handler that updates out state. We can call this.setState then what we want to add to the state.
What is super and should you use it good explanation
Binding on click methods
Using bind(this) nice explanation
Properties take in information and we can pass it on to our components, they have two parts. One passing it onto our jsx component using an attribute and the second is defining it in our function. We need to pass in the argument called props to our component then it makes it available to be used within “props” is the most common word to use.
Creating components (Higher order components)
“Now we are going to create a container component, it’ll wrap your component into another component. The idea is to separate the logic from the presentation.”
Creating presentational components
Using normal functions instead of classes this is where we create the components html. And are presentational components. Save them in a file called components.
Creating Classes to create Container components
To create a class use the new ES6 syntax instead of the old react.createElement. The classes hold the functionality and state of the component and should be saved into a folder called Containers. “The idea is to separate the logic from the presentation”
You need to import the component into the class then build up any state and props here to then pass on to the component when you use it.
When accessing state and props inside a class (container component) you need to call them with this. before each prop / state call.
Presentational components contain the JSX and Container components surrounds and contains the component and holds the logic. These are called Higher Order components. State then needs to be made available to both
React-router is the go to companion for react to control the routes of an app. You set up each route and set the component=”” to be the component you want to link to and then the path=”” to the path you would like the link to lead to. Then you can use the path to in your navigation to activate the link.
Then place the routes in a separate config file for good house keeping.
Then using the link key word call the router route.
When using children within the routing structure you need to use this.children to ensure the children routes get used.
So redux is currently the advisable flux based methodology to control state. Redux creates a state tree and stores it all, minimal representation of the app. The benefits to this are that every time that react updates the state it refreshes the whole tree of data. So thats no great on a parge application as you could have hundreds of things updating the state and therefore causing lots of refreshes. Redux takes a copy of the state and using reducers you can make changes to small parts of the tree / components and these are the only bits that refresh. It ignores the rest of the data as it only worries about its own bit. This will speed everything up. Well this is my take on it anyway. The copy of the tree created by redux is called “the store”.
Setting up your project
Put actions in /actions/ (import use * as actions from /actions/ ) Create a root file and add in the route and the create store redux stuff Create a store file and keep store in one place
A Manifest.json needs to be created to house the json instructions (more info)
You also need to wrap your router in a provider. Provider puts the store into context, so allows all children elements to access the store
The Redux store
It takes three methods getState dispatch subscribe
Create the store in the root and pass down with props or context
An actions is just a json object and is a pure function so can not be modified. Its just read only, so you use actions to update the store using a action called reducer. They are pure functions. Pure function: don’t depend on anything, can not modify parameters. They are predictable and efficient.
We pass it into a reducer which takes in two parameters - state, action the reducer is the function that makes the changes and then returns a new copy of the state to the store.
Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of a reducer. https://github.com/reactjs/redux/blob/master/docs/basics/Reducers.md
We can combine two reducers
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch(). https://github.com/reactjs/redux/blob/master/docs/basics/Actions.md
The dispatcher updates the application (sometimes a timeout is needed to see the change)
Action creaters return the action, we can combine them with a dispatcher like so.
when adding the state use es6 … to copy whole object
connect has two parameters
Middle was mentioned and I need to some more research into this
We also looked into testing using Mocha and Chi. I am not going to lie my mind was fried by this point and I need to look into this some more also
Enzyme, Mocha, Chi etc
This was a nice repository that was set up for us to practice on. https://github.com/alexlbr/react-koans
You can pass in functions to props making them usable in multiple places. create props to pass functions, json and string to components
These do not implement a component’s functionality. They are a json and they dont change. You get a new version
Returns an attached react instance.
Should return the same React Instance for the same component (they are not detached). Will not create same instance
Deep copy v Shallow copy
Retrieving data from json data using fetch.
Some mock data
Some mock data to use to practice building an application.
Reading / Links
I’m an inline-style link
boilerplate react app
repos from the course
Things I need to Research into
- redux-form (look into this for the forms)
- React.propTypes - could be array, object or function