React Cheat Sheet

Create a React App

// Create a new app
npx create-react-app my-app-name

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

http://localhost:3000

First 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 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

ReactDOM.render(<App />, document.getElementById('root'))

The App component will then be rendered inside public/index.html 'root' div

Import Component

Component will be created in separate files. Each component need to be export and then import

function Greeting(){
    return <h1>Hello World</h2>
}
export default Greeting

This component can then be import

import Greeting from './Gretting'

function App(){
    return <Greeting />
}