Follow me!:Follow @EricTheCoder_
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...
React Cheat Sheet (draft day 1)
Create a React App
// Create a new appnpxcreate-react-appmy-app-name// Run the created appcdmy-app-nameyarnstart// http://localhost:3000First React functional Component
- No need to import React from 'react' (since React 17)
- Must have uppercase first letter
- Must return JSX
(src/App.js)
// React componentfunctionApp(){return<h1>Hello World</h1>}exportdefaultApp;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
ReactDOM.render(<App/>,document.getElementById('root'))The App component will then be rendered inside public/index.html 'root' div
JSX Rules
Return a single element (only one parent element)
// not validreturn<h1>Hello world</h1><h2>Hi!</h2>// valid with fragment.return(<><h1>Hello World</h1><h2>Hi!</h2></>)// Noted the parenthesis for multi-line formattingUse className instead of class
Also all attribute name need to be camelCase
// not validreturn(<divclass="title"> Hello World</div>)// validreturn(<divclassName="title"></div>)Close every element
return(<imgsrc="http:example.com/image.jpg"/><inputtype="text"name="first_name"/>)Nested Components
// Arrow function shorthand componentconstPerson=()=><h1>Mike Taylor</h1>// Arrow function componentconstMessage=()=>{return<h1>Hello</h1>}// Function componentfunctionHelloWorld(){return(<><Message/><Person/></>)}Component CSS
(src/App.css)
h1{color:red;}(src/App.js)
Import the CSS file
import'./App.css'functionApp(){return<h1>Hello World</h1>}Inline CSS
functionApp(){return<h1style={{color:'red'}}>Hello World</h1>}Javascript in JSX
- Enclose between {}
- Must be an expression (return a value)
functionApp(){constname='Mike'return(<><h1>Hello{name}</h1><p>{name==='Mike'?'(admin)':'(user)'}</p></>)}Component Properties (Props)
functionApp()return<Personname='Mike'age={29}/>}constPerson=(props)=>{return<h1>Name:{props.name}, Age:{props.age}</h1>}// or props object deconstructingconstPerson=({name,age})=>{return<h1>Name:{name} Age:{age}</h1>}Children Props (slot)
functionApp()return(<Personname='Mike'age={29}> Hi, this is a welcome message</Person>)}constPerson=(props)=>{return(<h1>Name:{props.name}, Age:{props.age}</h1><p>{props.children}</p>)}// or props object deconstructingconstPerson=({name,age,children})=>{return(<h1>Name:{name} Age:{age}</h1><p>{children}</p>)}Conclusion
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!:Follow @EricTheCoder_
Top comments(3)
- LocationNetherlands
- EducationMarketing honors + self-taught dev
- WorkSenior Software Engineer at ACT Commodities
- Joined
Hi. I am not so familiar with React. so this looks useful for me.
I have a React cheatsheet here. I liked some of your points so worked them into my JSX page. Also I hadn't see destructuring props without props variable so added it to my Props page.
michaelcurrin.github.io/dev-cheats...
I also like to use the result of running the quickstart command as repo and live site, for reference.
For further actions, you may consider blocking this person and/orreporting abuse
