React is just a view library, in order to developer a fully functional web application with React, we have to use many order libraries. In this articles, I will list 4 essence libraries.
Routing management
Routing is an important part of any web application. Without routing, user can’t share link or save your website url to their history. That’s why a good router library is very important for any web application.
React Router is a declarative router library for React.
By declarative, it means that we will configure the router in the render function of React application.
Here is an example of React Router, I take it from the home page of React Router website.
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
export default BasicExample
Here you see, we can use the component from React Router library. When the url is matched with one of the configured route, the corresponding component is rendered.
This kind of configuration makes it very easy to use. Besides that, React Router provides you a lot of tools to get routing parameter, create nested url…
You can learn more about React Router at here: https://reacttraining.com/react-router/web
State management
Few years ago, when React was not popular. Most of framework use 2-way data binding. So when a parent components pass an object to child component. Child component can modify it and pass that object back to parent component.
But the guys at Facebook are brilliant. They soon recognized that this pattern will lead to a lot of confusion if we have a lot of component. So they invent Flux pattern. This is a new pattern which only allow one way data flow.
Redux was developed based on Flux concept. Here are some advantage of Redux:
- One way data flow
- Easier to manage data flow.
- Application state ( or application data ) is stored in one object. This approach makes it easy to serialize and deserialize data.
- Allow undo and redo data changes.
So if you are going to develop a large scale application with React, Redux is a must-have library in your app.
Just a warning, you might think it is simple but actually it will take you some time to learn to master it: http://redux.js.org
Styling component
React promotes using JS to style component instead of CSS. There are several advantages which are presented in this famous slide: https://speakerdeck.com/vjeux/react-css-in-js
After a time to use CSS in JS, I don’t feel like it.
I recommend everyone to use React CSS Modules.
This library is easier to you.
You can still write CSS, but the CSS is applied to your component only.
There are a lot more benefit from React CSS Modules which you can learn from here: https://github.com/gajus/react-css-modules
Testing
Testing with React is much more organized because test file is packed with the component.
Facebook has it own solution for testing with React, it’s Jest
Jest is a testing frame work for writing unit test for React. It includes:
- Test runner
- Data, function mocking
- Asserting library
- Snapshot testing
Snapshot testing is a interesting library from Jest. With Snapshot testing, the output of current test is compared with the output from previous test. Test passes when outputs are same.
You can learn more about Jest at there homepage: https://facebook.github.io/jest
Again, when comes to React, it doesn’t force you to use any particular libraries. The ecosystem of React is totally depends on developer community. That’s why React ecosystem will grow very quickly and outdated solution will throw away from community very quickly. Hence, it will always be a challenge to choose a tool for our React project but it’s great because we are free to choose the best tools.