Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Ramcharan Madasu react-ram

🎯
Focusing
  • Hyderabad, India
Block or report user

Report or block react-ram

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@react-ram
react-ram / sample.js
Created Jan 9, 2020
dashboard sample code
View sample.js
import React, {Component} from 'react';
import {View, ScrollView} from 'react-native';
import {List, Divider, Colors} from 'react-native-paper';
const vehicles = [
{id: 1, no: 'AP28X1234'},
{id: 2, no: 'AP28X1222'},
{id: 3, no: 'AP28X1333'},
{id: 4, no: 'AP28X1234'},
{id: 5, no: 'AP28X1222'},
@react-ram
react-ram / index.js
Created Nov 25, 2019
Basics - Introducing JSX - example 2.
View index.js
import React from "react";
import ReactDOM from "react-dom";
function formatName(user) {
return user.first + " " + user.last;
}
const user = {
first: "ram",
last: "charan"
@react-ram
react-ram / index.js
Created Nov 24, 2019
Basics - Introducing JSX - Example 1
View index.js
import React from "react";
import ReactDOM from "react-dom";
//JSX
const name = "ramcharan";
const element = <h1>hello {name}</h1>;
ReactDOM.render(element, document.getElementById("root"));
@react-ram
react-ram / index.js
Last active Nov 24, 2019
Basics - Hello world example
View index.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>hello world</h1>, document.getElementById("root"));
@react-ram
react-ram / App.js
Created Oct 23, 2019
Basics - Lists & keys example 5. Using map( ) in JSX.
View App.js
import React, { Component } from "react";
class App extends Component {
render() {
const numbers = [1, 2, 3, 4, 5];
return (
<ul>
{numbers.map(number => (
<li key={number.toString()}>{number}</li>
))}
@react-ram
react-ram / App.js
Created Oct 23, 2019
Basics - Lists & keys example 4. usage of same key for different arrays.
View App.js
import React, { Component } from "react";
export class App extends Component {
render() {
const posts = [
{ id: 1, title: "hello world", content: "welcome to the react world" },
{
id: 2,
title: "installation",
content: "you can install react from npm"
@react-ram
react-ram / App.js
Created Oct 23, 2019
Basics - Lists & keys - correct usage of key. example 3
View App.js
import React, { Component } from "react";
export class App extends Component {
render() {
const numbers = [1, 2, 3, 4, 5];
return (
<div>
<NumbersList numbers={numbers} />
</div>
);
@react-ram
react-ram / App.js
Created Oct 23, 2019
Basics - Lists & keys example 2.
View App.js
import React, { Component } from "react";
export class App extends Component {
render() {
const todos = [
{ id: 1, text: "do something" },
{ id: 2, text: "do something else" },
{ id: 3, text: "do nothing" }
];
const todoItems = todos.map(todo => <li key={todo.id}>{todo.text}</li>);
@react-ram
react-ram / App.js
Created Oct 23, 2019
Basics - Lists and keys example 1.
View App.js
import React, { Component } from "react";
export class App extends Component {
render() {
const numbers = [1, 2, 3, 4, 5];
return (
<div>
<NumbersList numbers={numbers} />
</div>
@react-ram
react-ram / App.js
Created Oct 22, 2019
basics - preventing component from rendering example ( hint: use null)
View App.js
import React, { Component } from "react";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
warn: true
};
this.handleToggle = this.handleToggle.bind(this);
}
You can’t perform that action at this time.