React Cheatsheet

React Cheatsheet

This is a under development kind of thing for react concept I have been learning.

Create a new react app

We are going to usenpx, it allows us to scaffold all required config files with one command, It comes pre-installed withnpm5.5 or later (Just use latest because I am not sure)

npx create-react-app react-training
cd react-training
code .			# Open project in VS Code
npm start		# Start React live server

This is what we get.

React first screen

Few points

  • This is initial screen
  • It uses react components
  • All source code is available insidesrcdirectory

There are so many files.

  • /node_modules- Node modules, created bynpm/npxcommand
  • public- Contains compiled files, don’t modify anything inside this directory for now.
  • src- Contains source code, we will play with it.
    • App.css- A simple stylesheet.
    • App.js- A react component file.
      • Import statements are for importing other components and files (images, css, etc).
      • Every react component extendsReact.Componentclass, since it is imported in first line we writeclass App extends ComponentwhereAppis component name in this case.
      • renderfunction will return html which will be rendered.
      • export default App, it allows other files to import this file, App is our component name, if you useclass TodoListItem extends Componentthen you have to writeexport default TodoListItem
    • App.test.js- I don’t know/care.
    • index.css- Another CSS file.
    • index.js- This is our main JavaScript file, we will explore it later.
    • logo.svg- A logo in SVG format.
    • serviceWorker- A service worker works in the background and allows you web app to behave like native app, this is advanced level thing so don’t touch it if you don’t understand what is happening.

ExploreApp.js

import React from 'react';				// Import react from node_modules folder
import ReactDOM from 'react-dom';		
import './index.css';					// Import index.css from current folder
import App from './App';				// Import App.js from current folder, Importing js files doesn't require extension
import * as serviceWorker from './serviceWorker';	// Import everything from serviceWorker in current folder, It will import everything which is being exported for SW.

ReactDOM.render(<App />, document.getElementById('root'));	// Render App component, on #root element, in our index.html #root is a div.

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Our initial app architecture

  • index.html: It is importing index.js.
    • index.js: It is importing App component.
      • App.js: It is our only component for now.

Let’s create a todo app to understand more

A todo app is perfect example for learning any JavaScript frameworks, it helps us learning the following concepts.

  • How to handle form input
  • How to handle button clicks
  • How to add elements dynamically
  • How to remove elements dynamically
  • How to handle events on dynamically created elements
  • May be one or two nice concepts about framework.

Steps

  • We are going to create two new elements,TodoListandTodoListItem, it’s likeulandli.

Create two new filesTodoList.js&TodoListItem.js

// TodoList.js
import React, { Component } from `react`

class TodoList extends Component {

}

export default TodoList;

Original: Updated: