React (work in progress) Cheat sheet
Tags: javascript, react, beginners, tutorial
Published: 2021-04-11 17:29:31

---
title: React (work in progress) Cheat sheet
published: true
description: 
tags: javascript, react, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3ui703pme0meo82pu5o.png
series: React Cheat Sheet
---
Follow me!: <a href="https://twitter.com/EricTheCoder_" class="twitter-follow-button" data-show-count="false">Follow @EricTheCoder_</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<hr>
I don't use React often and so whenever I need to do even the smallest thing in React, I have to check out the documentation, a tutorial, or post a question on a forum.

That's why I decided to do this memory aid and given that my memory is not that good I thought why not make a monstrous memory aid with all the concepts I know about React.

So I can read it from time to time and thereby strengthen my knowledge of React.

It will take couples of days to put all that together so every day I will post an updated Cheat Sheet version until the final version.

If you have ideas or recommendation do not hesitate and do so in the comments section.

Let's start right now with the first version... 

<h2>React Cheat Sheet (draft day 1)</h2>
&nbsp;

<h4>Create a React App</h4>
```js
// Create a new app
npx create-react-app my-app-name

// Run the created app
cd my-app-name
yarn start

// http://localhost:3000
```

<h3>First React functional Component</h3>
- No need to import React from 'react' (since React 17)
- Must have uppercase first letter
- Must return JSX

(src/App.js)
```react
// React component
function App(){
  return <h1>Hello World</h1>
} 

export default App;
```
How this component get render to the browser? The main project file is src/index.js and in that file there are instruction to render the component
```react
ReactDOM.render(<App />, document.getElementById('root'))
```
The App component will then be rendered inside public/index.html 'root' div

<h3>JSX Rules</h3>
Return a single element (only one parent element)
```react
// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with fragment. 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)
// Noted the parenthesis for multi-line formatting
```
Use className instead of class
Also all attribute name need to be camelCase
```react
// not valid
return (
    <div class="title">
        Hello World
    </div>
)

// valid
return (
    <div className="title">
    </div>
)

```
Close every element
```react
return (
    <img src="http:example.com/image.jpg" />
    <input type="text" name="first_name" />
)
```
<h3>Nested Components</h3>
```react
// Arrow function shorthand component
const Person = () => <h1>Mike Taylor</h1>

// Arrow function component
const Message = () => {
    return <h1>Hello</h1>
}

// Function component
function HelloWorld(){
  return (
      <>
          <Message />
          <Person />
      </>
  )
} 
```

<h3>Component CSS</h3>
(src/App.css)
```css
h1 {
    color: red;
}

```
(src/App.js)
Import the CSS file
```react
import './App.css'

function App(){
  return <h1>Hello World</h1>
} 
```

<h3>Inline CSS</h3>
```react
function App(){
  return <h1 style={{ color: 'red' }}>Hello World</h1>
} 
```
<h3>Javascript in JSX</h3>
- Enclose between {}
- Must be an expression (return a value)
```react
function App(){
    const name = 'Mike'
    return (
      <>
          <h1>Hello {name}</h1>
          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>
      </>
    )
} 
```

<h3>Component Properties (Props)</h3>
```react
function App()
    return <Person name='Mike' age={29} />
} 

const Person = (props) => {
    return <h1>Name: {props.name}, Age: {props.age}</h1>
}

// or props object deconstructing
const Person = ({name, age}) => {
    return <h1>Name: {name} Age: {age}</h1>
}
```
<h3>Children Props (slot)</h3>
```react
function App()
    return (
        <Person name='Mike' age={29}>
            Hi, this is a welcome message
        </Person>
    )
} 

const Person = (props) => {
    return (
        <h1>Name: {props.name}, Age: {props.age}</h1>
        <p>{props.children}</p>
    )
}

// or props object deconstructing
const Person = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}
```

<h2>Conclusion</h2>
That's it for today. We still have a lot to do, so see you tomorrow... If you want to be sure to miss nothing click follow me!

Follow me!: <a href="https://twitter.com/EricTheCoder_" class="twitter-follow-button" data-show-count="false">Follow @EricTheCoder_</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<hr>