Created a Cheat Sheet with all the basic concepts of React JS

CheatSheets/react-cheatsheet.md

@@ -0,0 +1,171 @@
+# React JS CheatSheet
+## Import
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+```
+## Components
+### Class Component
+```jsx
+class Welcome extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}</h1>;
+  }
+}
+```
+### Function Component
+```jsx
+function Welcome(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+```
+## Render method
+```jsx
+function Welcome(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+
+const element = <Welcome name="Sara" />;
+ReactDOM.render(
+  element,
+  document.getElementById('root')
+);
+```
+## State
+```jsx
+function tick() {
+  const element = (
+    <div>
+      <h1>Hello, world!</h1>
+      <h2>It is {new Date().toLocaleTimeString()}.</h2>
+    </div>
+  );
+  ReactDOM.render(
+    element,
+    document.getElementById('root')
+  );
+}
+
+setInterval(tick, 1000);
+```
+## Lifecycle Methods
+```jsx
+componentDidMount() {
+    this.timerID = setInterval(
+      () => this.tick(),
+      1000
+    );
+  }
+```
+```jsx
+componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+```
+##### Other Lifecycle Methods:
+```jsx
+componentWillMount()
+```
+
+```jsx
+componentDidCatch()
+```
+
+## Event Handling
+```jsx
+function ActionLink() {
+  function handleClick(e) {
+    e.preventDefault();
+    console.log('The link was clicked.');
+  }
+
+  return (
+    <a href="#" onClick={handleClick}>
+      Click me
+    </a>
+  );
+}
+```
+## Conditionals
+```jsx
+function Greeting(props) {
+  const isLoggedIn = props.isLoggedIn;
+  if (isLoggedIn) {
+    return <UserGreeting />;
+  }
+  return <GuestGreeting />;
+}
+
+ReactDOM.render(
+  // Try changing to isLoggedIn={true}:
+  <Greeting isLoggedIn={false} />,
+  document.getElementById('root')
+);
+```
+## Lists
+```jsx
+function NumberList(props) {
+  const numbers = props.numbers;
+  const listItems = numbers.map((number) =>
+    <li>{number}</li>
+  );
+  return (
+    <ul>{listItems}</ul>
+  );
+}
+
+const numbers = [1, 2, 3, 4, 5];
+ReactDOM.render(
+  <NumberList numbers={numbers} />,
+  document.getElementById('root')
+);
+
+```
+## Keys
+```jsx
+const numbers = [1, 2, 3, 4, 5];
+const listItems = numbers.map((number) =>
+  <li key={number.toString()}>
+    {number}
+  </li>
+);
+```
+## Forms
+```jsx
+class FlavorForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: 'coconut'};
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({value: event.target.value});
+  }
+
+  handleSubmit(event) {
+    alert('Your favorite flavor is: ' + this.state.value);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Pick your favorite flavor:
+          <select value={this.state.value} onChange={this.handleChange}>
+            <option value="grapefruit">Grapefruit</option>
+            <option value="lime">Lime</option>
+            <option value="coconut">Coconut</option>
+            <option value="mango">Mango</option>
+          </select>
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
+}
+```
+

Problem-Solving/BinarySearch.js

@@ -0,0 +1,21 @@
+let binarySearch = function(arr, x, start, end) {
+  if (start > end) return false;
+
+  let mid = Math.floor((start + end) / 2);
+
+  if (arr[mid] === x) return true;
+
+  if (arr[mid] > x) return binarySearch(arr, x, start, mid - 1);
+  else return binarySearch(arr, x, mid + 1, end);
+};
+
+let arr = [1, 3, 5, 7, 8, 9];
+let x = 5;
+
+if (binarySearch(arr, x, 0, arr.length - 1)) console.log("Element is present");
+else console.log("Element not present");
+
+x = 6;
+
+if (binarySearch(arr, x, 0, arr.length - 1)) console.log("Element is present");
+else console.log("Element not present");