At Modus Create, our culture is defined by a few key objectives, including the value we place on constant learning and sharing of knowledge. It’s no surprise that when I’m not writing automation tests for a client, I am working on personal projects. With most development projects, there comes a time to decide what tools you want to build your UI with. For my latest project, I decided I wanted to use the React library. The only problem was…I didn’t know React — so I decided to see how far I could get using the resources at my disposal.
With the help of React’s extensive documentation, as well as an awesome course by Wes Bos, I’ve picked up enough knowledge to be dangerous, while still only scratching the surface of what React can do. Through it all, I documented my take aways and made a list of four main points that were beneficial to understanding and utilizing the React library. If you’ve thought about picking up React or have already started and are having trouble with the basics, this article will motivate you to continue learning and expand your skillset.
It’s Dangerous To Go Alone! Use the React-CLI
Rather than send you into the wilderness with only the framework and your unwavering determination, the folks at Facebook have created an awesome tool for getting started with ReactJS. Aptly named Create-React-App, the tool scaffolds the file structure for your React app and includes a dev server, as well as a compiler, bundler, and more. With so much to learn already in this library, not having to worry about your boilerplate code is a giant relief and the file structure that the CLI tool provides on install will give you everything you need to dive into creating your Dream App™.
Setup is simple. Simply use NPM to install
npm install create-react-app -g
and use the newly installed package to create your project directory and start your dev server with the npm script created by the CLI tool.
create-react-app your_app_name cd your_app_name npm start
Boom! You now have a fully functioning “Hello, World!” ReactJS application, ready to be flushed out with your own code. In addition, the dev server will listen for any changes you make to your code, and refresh your application automatically! Programmatic Laziness FTW!
Props: Take One Down, Pass It Around!
Props are one of React’s most powerful features. They allow you to take methods, variables, and even state objects (another ReactJS feature) and pass them around to different parts of your application as PROPerties. If you think of the component structure in your application like a tree, Props allow you to create any of the examples listed above in a high level component (eg your App.js component), and pass them down to any nested component that branches from that location. This is important for two reasons:
- It reduces code duplication. If you know you’re going to need a method or state object in more than one component, it’s better to define them in one place and pass them down via Props, rather than duplicate data in each respective component. This is especially important when dealing with state objects because…
- It keeps state objects in sync. For a beginner, understanding how state works is important and nothing can make that more difficult than having your state objects out of sync with one another because the same state is defined in multiple components.
Here’s an example where we define a method in our main component file (App.js) and then pass it down to another component being rendered inside App.js
class App extends React.Component {
<span style="background-color: #ffff00">handleSubmit = () => {
// your code
}</span>
render() {
return (
<div>
<ExampleComponent
<span style="background-color: #ffff00">handleSubmit={this.handleSubmit}</span>
/>
</div>
)
}
}
export default App;
And in our ExampleComponent we can now use it like so:
render() {
<span style="background-color: #ffff00">const { handleSubmit } = this.props</span>
return (
<div>
<button onClick={ <span style="background-color: #ffff00">handleSubmit</span> }>Click Me!</button>
</div>
)
}
}
export default ExampleComponent;
The ExampleComponent can now use the handleSubmit method and the method itself can be used across multiple components. Best of all, it’s defined only once.
State: One State To Rule Them All
State is yet another powerful core feature of ReactJS and, much like Props, should only be defined in one place. This comes from the programming idea of having “A Single Source of Truth”. Think of state as sort of a local database that holds the current rendered version of your app’s data in a giant object. Most web apps use one database to store application state and best practice indicates that React state is treated much the same.
This means you should define state once, almost as a master state, in a high level location (think App.js) and pass it down to child components via props. This ensures that your state is always in sync, that you can track/view the history of all state changes in one place, and that you aren’t re-rendering unnecessarily.
PropTypes: Not Necessary, But Helpful!
Switching back to Props, one final concept worth mentioning is declaring PropTypes. PropTypes are a way for you to tell your application what type of data your component should expect to be passed to it. Think of PropTypes as a form of strict type declaration. PropTypes can even determine whether the data passed down is required or not (meaning not undefined or null).
While not necessary for your application to function properly, I found it helpful while learning React because it helped me to better understand what data I was actually passing down to my child Components. Here is an example of PropTypes being used in the previous example, ExampleComponent.
class ExampleComponent extends React.Component {
<span style="background-color: #ffff00">static propTypes = {
handleSubmit: React.PropTypes.func.isRequired
}</span>
render() {
const { handleSubmit } = this.props
return (
<div>
<button onClick={ handleSubmit }>Click Me!</button>
</div>
)
}
}
Declaring PropTypes for handleSubmit ensures that the we are expecting it to be a function and it cannot be null or undefined. This serves as a great debugging tool as well. If the data passed down does not match the PropType declared, React will provide a console error letting you know what data type was passed down as well as what data type it was expecting. Declaring them statically (done above) is part of ES7 property initializers. Used more for style than function, it allows for prop types to be declared at the top of your class rather than outside the class underneath it. This makes your prop types more readable and visible. The same can be done for defaultProps if you wish for those prop types to have default values.
You might not see more experienced React developers utilizing this feature, but I highly recommend getting into the habit if you’re just getting started with React.
Conclusion
React is a robust and highly scalable front-end library with a lot under the hood to learn. Understanding core concepts is crucial to creating complex applications, but with the create-react-app CLI and the tips I’ve listed, you’ll be well on your way to creating your first ReactJS application and hopefully many more after. Are you new to React? Got any tips or tricks for making learning easier or fun? Let us know in the comments!
