diff --git a/README.md b/README.md index 4b8f9dc..7cbba47 100644 --- a/README.md +++ b/README.md @@ -507,4 +507,3 @@ function isJson(str) { - diff --git a/ReactCodeSnippets.md b/ReactCodeSnippets.md new file mode 100644 index 0000000..e98633c --- /dev/null +++ b/ReactCodeSnippets.md @@ -0,0 +1,77 @@ +# REACT CODE SNIPPETS +# Create REACT APP +``` +npx create-react-app my-app +cd my-app +npm start +``` +# Fetch data from API REACT +``` REACT JS +import React, {Component} from 'react' + +export default class StarWars extends Component { + constructor(){ + super() + this.state = { + character: {}, + isLoading: false + } + } + + componentDidMount(){ + this.setState({isLoading: true}) + fetch("https://swapi.co/api/people/1") + .then(response => response.json()) + .then(data => ( + this.setState({ + isLoading: false, + character: data + }) + )) + } + + + render(){ + const text = this.state.isLoading ? "People data is loading..." : this.state.character.name + return( +
+

{text}

+
+ ) + } +} +``` +# ROUTING +``` +ReactDOM.render(( + + + + + + + + + + ), + + document.getElementById('root') + +); +``` +# Update REACT Dependancies or Libraries +``` +npm install -g npm-check-updates +ncu -u +npm update +npm install +``` +# npm run build +``` +Builds the app for production to the build folder. +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes. + +Your app is ready to be deployed. +```