- Basics
- JSX Elements
- ReactDOM
- Advanced JSX
- className
- Self-closing HTML Tags
- Vanilla JS inside ReactJS
- eventListeners are written in camelCase
- if Statements
- && operator
- .map
- keys
- createElement
- Classes and Components
- this and getters
- this and eventListeners
- Components render other Components
- this.props
- parsing props from one file to another
- this.props.children
- defaultProps
- this.state
exportclassDavidextendsReact.Component{...}// leads to import{David}from'./...';exportdefaultclassDavidextendsReact.Component{...}// leads to importDavidfrom'./...';importReact,{Component}from'react';// leads to classDavidextendsComponent{...}//if the file you are importing from is called index.js then:importDavidfrom'.';consth1=<h1>Hello world</h1>;constmultiLine=(<div><p>Hello</p><p>World</p></div>)importReactfrom'react';importReactDOMfrom'react-dom';// This is just an example, switch to app.js for the exercise.ReactDOM.render(<h1>Hello world</h1>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';// Write code here:constmyList=(<ul><li>a</li><li>b</li></ul>)ReactDOM.render(myList,document.getElementById('app'));https://www.codecademy.com/articles/react-virtual-dom
importReactfrom'react';importReactDOMfrom'react-dom';// Write code here:constmyDiv=<divclassName="big">I AM A BIG DIV</div>;ReactDOM.render(myDiv,document.getElementById('app'));constprofile=(<div><h1>I AM JENKINS</h1><imgsrc="images/jenkins.png"/> // <img> does not work
<article>
I LIKE TO SIT
<br/> // <br> does not work
JENKINS IS MY NAME
<br/> // <br> does not work
THANKS HA LOT
</article></div>
);importReactfrom'react';importReactDOMfrom'react-dom';// Write code here:ReactDOM.render(<h1>{2+3}</h1>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';consttheBestString='tralalalala i am da best';ReactDOM.render(<h1>{theBestString}</h1>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';functionmakeDoggy(e){// Call this extremely useful function on an <img>.// The <img> will become a picture of a doggy.e.target.setAttribute('src','https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg');e.target.setAttribute('alt','doggy');}constkitty=(<imgsrc="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg"alt="kitty"onClick={makeDoggy}/>);ReactDOM.render(kitty,document.getElementById('app'));http://facebook.github.io/react/tips/if-else-in-JSX.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
importReactfrom'react';importReactDOMfrom'react-dom';functioncoinToss(){// This function will randomly return either 'heads' or 'tails'.returnMath.random()<0.5 ? 'heads' : 'tails';}constpics={kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'};letimg;// if/else statement begins here:if(coinToss()==='heads'){img=<imgsrc={pics.kitty}/>}else{img=<imgsrc={pics.doggy}/>}ReactDOM.render(img,document.getElementById('app'));https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript
Ternary operator
importReactfrom'react';importReactDOMfrom'react-dom';functioncoinToss(){// Randomly return either 'heads' or 'tails'.returnMath.random()<0.5 ? 'heads' : 'tails';}constpics={kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'};constimg=<imgsrc={pics[coinToss()==='heads' ? 'kitty' : 'doggy']}/>;ReactDOM.render(img,document.getElementById('app'));!judgmental should come before the && operator.
importReactfrom'react';importReactDOMfrom'react-dom';// judgmental will be true half the time.constjudgmental=Math.random()<0.5;constfavoriteFoods=(<div><h1>My Favorite Foods</h1><ul><li>Sushi Burrito</li><li>Rhubarb Pie</li>{!judgmental&&<li>Nacho Cheez Straight Out The Jar</li>}<li>Broiled Grapefruit</li></ul></div>);ReactDOM.render(favoriteFoods,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';constpeople=['Rowe','Prevost','Gare'];constpeopleLis=people.map(person=>// expression goes here:<li>{person}</li>;);// ReactDOM.render goes here:ReactDOM.render(<ul>{peopleLis}</ul>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';constpeople=['Rowe','Prevost','Gare'];constpeopleLis=people.map((person,i)=>// expression goes here:<likey={'person_'+i}>{person}</li>;);// ReactDOM.render goes here:ReactDOM.render(<ul>{peopleLis}</ul>,document.getElementById('app'));not JSX
https://reactjs.org/docs/react-api.html#react.createelement
constgreatestDivEver=React.createElement("div",null,"i am div");importReactfrom'react';importReactDOMfrom'react-dom';classMyComponentClassextendsReact.Component{render(){return<h1>Hello world</h1>;}}// component goes here:ReactDOM.render(<MyComponentClass/>,document.getElementById('app'));QuoteMaker
importReactfrom'react';importReactDOMfrom'react-dom';classQuoteMakerextendsReact.Component{render(){return(<blockquote><p>
The world is full of objects, more or less interesting; I do not wish to add any more.
</p><cite><atarget="_blank"href="http://bit.ly/1WGzM4G">
Douglas Huebler
</a></cite></blockquote>);}};ReactDOM.render(<QuoteMaker/>,document.getElementById('app'));ReactJs accepts newlines in its syntax
importReactfrom'react';importReactDOMfrom'react-dom';constowl={title: "Excellent Owl",src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg"};// Component class starts here:classOwlextendsReact.Component{render(){return(<div><h1>{owl.title}</h1><imgsrc={owl.src}alt={owl.title}/></div>);}}ReactDOM.render(<Owl/>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';constfriends=[{title: "Yummmmmmm",src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyweirdo.jpg"},{title: "Hey Guys! Wait Up!",src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-earnestfrog.jpg"},{title: "Yikes",src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg"}];// New component class starts here:classFriendextendsReact.Component{render(){constfriend=friends[1];return(<div><h1>{friend.title}</h1><imgsrc={friend.src}/></div>);}}ReactDOM.render(<Friend/>,document.getElementById('app'));plain javascript can go within a render method but outside of the return statement
importReactfrom'react';importReactDOMfrom'react-dom';constfiftyFifty=Math.random()<0.5;// New component class starts here:classTonightsPlanextendsReact.Component{render(){if(fiftyFifty){return<h1>Tonight I'm going out WOOO</h1>}else{return<h1>Tonight I'm going to bed WOOO</h1>}}}ReactDOM.render(<TonightsPlan/>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';classMyNameextendsReact.Component{// name property goes here:getname(){return'David Murdoch';}render(){return<h1>My name is {this.name}.</h1>;}}ReactDOM.render(<MyName/>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';classButtonextendsReact.Component{scream(){alert('AAAAAAAAHHH!!!!!');}render(){return<buttononClick={this.scream}>AAAAAH!</button>;}}ReactDOM.render(<Button/>,document.getElementById('app'));import a Component from one file to another
for NavBar.js:
importReactfrom'react';exportclassNavBarextendsReact.Component{render(){constpages=['home','blog','pics','bio','art','shop','about','contact'];constnavLinks=pages.map(page=>{return(<ahref={'/'+page}>{page}</a>)});return<nav>{navLinks}</nav>;}}then for ProfilePage.js:
importReactfrom'react';importReactDOMfrom'react-dom';import{NavBar}from'./NavBar.js'classProfilePageextendsReact.Component{render(){return(<div><NavBar/><h1>All About Me!</h1><p>I like movies and blah blah blah blah blah</p><imgsrc="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyselfie.jpg"/></div>);}}ReactDOM.render(<ProfilePage/>,document.getElementById('app'));http://exploringjs.com/es6/ch_modules.html
importReactfrom'react';importReactDOMfrom'react-dom';classPropsDisplayerextendsReact.Component{render(){conststringProps=JSON.stringify(this.props);return(<div><h1>CHECK OUT MY PROPS OBJECT</h1><h2>{stringProps}</h2></div>);}}// ReactDOM.render goes here:ReactDOM.render(<PropsDisplayermyProp="Hello"/>,document.getElementById('app'));importReactfrom'react';importReactDOMfrom'react-dom';classGreetingextendsReact.Component{render(){return<h1>Hi there, {this.props.firstName}!</h1>;}}ReactDOM.render(<GreetingfirstName='David'/>,document.getElementById('app'));Greeting.js
importReactfrom'react';exportclassGreetingextendsReact.Component{render(){return<h1>Hi there, {this.props.name}!</h1>;}}App.js
importReactfrom'react';importReactDOMfrom'react-dom';import{Greeting}from'./Greeting.js'classAppextendsReact.Component{render(){return(<div><h1>
Hullo and, "Welcome to The Newzz," "On Line!"
</h1><Greetingname="David"/><article>
Latest newzz: where is my phone?
</article></div>);}}ReactDOM.render(<App/>,document.getElementById('app'));https://mathiasbynens.be/notes/javascript-identifiers
specifically, parsing an event handler
Talker.js
importReactfrom'react';importReactDOMfrom'react-dom';import{Button}from'./Button';classTalkerextendsReact.Component{talk(){letspeech='';for(leti=0;i<10000;i++){speech+='blah ';}alert(speech);}render(){return<Buttontalk={this.talk}/>;}}ReactDOM.render(<Talker/>,document.getElementById('app'));Button.js
importReactfrom'react';exportclassButtonextendsReact.Component{render(){return(<buttononClick={this.props.talk}>
Click me!
</button>);}}importReactfrom'react';exportclassListextendsReact.Component{render(){lettitleText=`Favorite ${this.props.type}`;if(this.props.childreninstanceofArray){titleText+='s';}return(<div><h1>{titleText}</h1><ul>{this.props.children}</ul></div>);}}importReactfrom'react';importReactDOMfrom'react-dom';classButtonextendsReact.Component{render(){return(<button>{this.props.text}</button>);}}// defaultProps goes here:Button.defaultProps={text: 'I am a button'}ReactDOM.render(<Buttontext=""/>,document.getElementById('app'));https://hacks.mozilla.org/2015/07/es6-in-depth-classes/
http://exploringjs.com/es6/ch_classes.html
importReactfrom'react';importReactDOMfrom'react-dom';classAppextendsReact.Component{// constructor method begins here:constructor(props){super(props);this.state={title : 'Best App'};}render(){return(<h1>
Wow this entire app is just an h1.
</h1>);}}importReactfrom'react';importReactDOMfrom'react-dom';classAppextendsReact.Component{// constructor method begins here:constructor(props){super(props);this.state={title : 'Best App'};}render(){return(<h1>{this.state.title}</h1>);}}ReactDOM.render(<App/>,document.getElementById('app'));https://reactjs.org/docs/handling-events.html
importReactfrom'react';importReactDOMfrom'react-dom';constgreen='#39D1B4';constyellow='#FFD712';classToggleextendsReact.Component{constructor(props){super(props);this.state={color: green}this.changeColor=this.changeColor.bind(this);}changeColor(){constnewColor=this.state.color==green ? yellow : green;this.setState({color: newColor});}render(){return(<divstyle={{background: this.state.color}}><h1>
Change my color
</h1><buttononClick={this.changeColor}>
Change color
</button></div>);}}ReactDOM.render(<Toggle/>,document.getElementById('app'));