React — A quick cheatsheet for beginners, with examples.

A guide to help you save time and effort.

Since it came out, react has taken the world by a storm, gaining popularity within a short period of time.

This popularity, of course, affected the web development job market greatly, making React one of the most sought out frameworks in 2019, and I suspect this will continue to 2020 as well.

In turn, a lot of young developers seeking jobs, are now trying to learn it and understand everything about it, and although there’s this annoying trend nowadays in development of oversimplifying things, from FreeCodeCamp’s “Learn React in 5 Minutes” article, to “Learn React in 1 Hour” published on Udemy, I’d like to point out, that nothing in this world worth learning can be learned in 5 minutes. Of course, I’m not saying that it’s a hard framework to learn, but all I’m saying is that you need to put a bit of work into it.

And to make matters easier for you, I decided to put together a quick cheatsheet, that might help you learn a thing or two.

I’ll try to not get too in-depth, because a cheatsheet, should always be precise and to the point.

Setup

First things first, where to start!

• Install Node.js
• Install your favorite text editor, mine is Atom, but some people prefer Sublime.
• Install yarn: brew install yarn
• Run: yarn create react-app hello-world
• Run: yarn start

Once that’s all done, you’ll get a folder, filled with other folders you know nothing about, that will most definitely intimidate you, but after a few projects, you’ll navigate those files and folders like a motherfucker.

Its a big transaction from a couple of HTML and CSS files, but hey, we learn the basics to move on to harder things in life, so buckle up kiddo, this is just the beginning of the rabbit hole.

How to create a react app

create-react-app YOUR_APP_NAME

Stateless components

A stateless component is just a normal JavaScript function that takes props as an argument and returns a React element. Pretty straightforward, right?

import React from ‘react’
const YourComponent = () => <div>aaa</div>
export default YourComponent

Class component

Unlike the stateless component, a class component comes with methods like the class constructor. Which is primarily used to set an initial state, or to bind methods.

import React from ‘react’
class YourComponent extends React.Component {
render() {
return <div>Aladin Bensassi</div>
}
}
export default YourComponent

Properties in stateless components

const YourComponent = ({ propExample1, example2 }) => (
<div>
<h1>properties from parent component:</h1>
<ul>
<li>{propExample1}</li>
<li>{example2}</li>
</ul>
</div>
)

Properties in-class component

class YourComponent extends React.Component {
render() {
return (
<div>
<h1>
properties from parent component:
</h1>
<ul>
<li>{this.props.propExample1}</li>
<li>{this.props.example2}</li>
</ul>
</div>
)
}
}

Children

When I first learned React, one of the hardest concepts for me was this.props.children. Basically Children provide utilities for dealing with the this.props.children opaque data structure. But note that if Children is a fragment, it will be treated as a single child and not traversed.

const Component1 = (props) => (
<div>{props.children}</div>
)
const Component2 = () => (
<Component1>
<h1>Aladin Bensassi</h1>
</Component1>
)

State

The heart of every react component is it’s state, and as such it’s what allows you to create components that are both dynamic, and interactive.

class CountClicks extends React.Component {
state = {
clicks: 0
}
onButtonClick = () => {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}))
}
render() {
return (
<div>
<button onClick={this.onButtonClick}>
Click me
</button>
<span>
The button clicked
{this.state.clicks} times.
</span>
</div>
)
}
}

High order component

Basically a high order component is a function that takes a component and returns a new one. A (HOC) is an advanced React technique to reuse a component’s logic.

import React from ‘react’
import Loading from ‘../components/Loading’
const withLoading = WrappedComponent => {
return (props = {}) => {
if (props.isLoading) {
return <Loading />
}
return <WrappedComponent {…props} />
}
}
export default withLoading
// — — — —
const MyComponent = ({}) => <div /> // …
const WithLoadingComponent = withLoading(MyComponent)

Render props

Render props in React, are what allows us to efficiently re-use code.

import React from ‘react’
const MOBILE_VIEW_WIDTH_THRESHOLD = 600
class MediaQuery {
state = {
shouldShowMobileView: false
}
componentDidMount() {
addEventListener(‘resize’, this.updateResizeStatus)
}
componentWillUnmount() {
removeEventListener(‘resize’, this.updateResizeStatus)
}
updateResizeStatus() {
if (screen.width <= MOBILE_VIEW_WIDTH_THRESHOLD) {
this.setState({
shouldShowMobileView: true
})
}
}
render() {
return this.props.children(
this.state.shouldShowMobileView
)
}
}
export default MediaQuery
// — — — —
import React from ‘react’
import MobileView from ‘../components/MobileView’
import DefaultView from ‘../components/DefaultView’
const Screen = () => (
<MediaQuery>
{shouldShowMobileView =>
shouldShowMobileView ? (
<MobileView />
) : (
<DefaultView />
)
}
</MediaQuery>
)

CSS module

In a CSS module, by default, you’ll find every class name and animation scoped locally to the component that is importing it.

import React from ‘react’
import styles from ‘./YourCssFile.module.css’
const YourCompnent = props => {
return (
<div className={styles.YourCssClass}>
<div className={styles.AnotherCssClass}>
<div className={styles.AnyCssClass}>
</div>
</div>
</div>
);
}
export default YourCompnent ;

These are just a few examples of a very very large framework, and I’ll do my best to keep updating this guide whenever I have the chance.

I really hope you enjoyed this article, and if you did, please share it with your friends, it’ll mean the world to me as a writer.

My website| Twitter | Medium| Quora

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.